Javascript 快速按钮点击会导致在按钮下方的字段上进行选择
我试图使用jQuery创建一个滑块,但我遇到了一些新手问题。 我做了一个动态插入的按钮和一个动态插入的支架。。当我点击这个按钮的速度超过2秒时,它会选择按钮后面的holder字段 我的HTML:Javascript 快速按钮点击会导致在按钮下方的字段上进行选择,javascript,jquery,css,slider,Javascript,Jquery,Css,Slider,我试图使用jQuery创建一个滑块,但我遇到了一些新手问题。 我做了一个动态插入的按钮和一个动态插入的支架。。当我点击这个按钮的速度超过2秒时,它会选择按钮后面的holder字段 我的HTML: <div id="slidingmenu"> <img src="http://www.hayvansevgisi.net/resimler/wallpaper/ceylan-1.jpg" alt="main1.png" /> <img src="http:
<div id="slidingmenu">
<img src="http://www.hayvansevgisi.net/resimler/wallpaper/ceylan-1.jpg" alt="main1.png" />
<img src="http://www.belgeselizlesek.com/wp-content/uploads/hayvanlar-resimi-4.jpeg" alt="main2.png" />
<img src="http://img03.blogcu.com/v2/images/orj/h/a/y/hayvanlaralemi/hayvanlaralemi_13323141966.jpg" alt="main3.png" />
<img src="http://img03.blogcu.com/v2/images/orj/h/a/y/hayvanlaralemi/hayvanlaralemi_1333958876147.jpg" alt="main4.png" />
<img src="http://www.hayvansevgisi.net/resimler/wallpaper/kus-1503.jpg" alt="main5.png" />
<img src="http://ipekbozbay.files.wordpress.com/2011/04/hayvanlar0034qm5.jpg" alt="main6.png" />
<img src="http://g.mynet.com/i/42/122715-hayvanlar-noel---13.jpg" alt="main7.png" />
<img src="http://elmusavvir.files.wordpress.com/2008/10/koala-doga-canli-agac-resim-hayvanlar.jpg" alt="main8.png" />
<img src="http://www.herseyebedel.com/wp-content/uploads/2012/09/Hayvanlar-Duvar-Ka%C4%9F%C4%B1tlar%C4%B1-25.jpg" alt="main9.png" />
<img src="http://www.hayvanresim.com/wp-content/uploads/Memeli-hayvanlar-7.jpeg" alt="main10.png" />
</div>
我如何使用它:
$(document).ready(function () {
$('#slidingmenu').bslider();
});
我的新手功能:
; (function () {
// Main function
$.fn.bslider = function () {
// Static
var i = 0,
img = "",
here = 0,
result = 0,
butwidth = 45,
interval = 5000,
loc = new Array([]),
mywidth = this.width(),
myheight = this.height(),
count = this.children('img').length,
midwidth = mywidth * count,
urlLeft = 'http://img842.imageshack.us/img842/613/arrowleftr.png',
urlRight = 'http://img7.imageshack.us/img7/4593/arrowrightq.png';
// Cache Images and calgulate locations first
for (i = 0; i < count; i++) {
// Cache Images
var elem = this.children('img').eq(i);
img = img + '<img src="' + elem.attr('src') + '" alt="' + elem.attr('alt') + '" />';
// Calgulate locations
loc[i] = result;
result = result - mywidth;
}
// Clean
this.empty();
// Slider
var obj = this.addClass("bslider").css({
padding: 0,
width: mywidth,
height: myheight,
margin: '20px auto',
borderRadius: '20px 20px 20px 20px'
});
// Append Image container
var mid = $('<div class="mid"></div>').appendTo(obj).css({
padding: 0,
width: mywidth,
height: myheight,
overflow: 'hidden',
position: 'absolute',
display: 'inline-block',
zIndex: 0
});
$('<div class="container">' + img + '</div>').appendTo(mid).css({
padding: 0,
width: midwidth,
height: myheight,
position: 'relative',
display: 'inline-block',
zIndex: -1
}).children('img').css({
width: mywidth,
height: myheight,
float: 'left',
clear: 'none'
});
// Append Left button
$('<div class="left"></div>').insertBefore(mid).css({
float: 'left',
clear: 'none',
display: 'block',
position: 'absolute',
zIndex: 1,
margin: 0,
opacity: 0,
width: butwidth,
height: myheight,
cursor: 'pointer',
background: 'url(' + urlLeft + ') no-repeat left center'
}).hover(function () {
$(this).animate({ opacity: 0.6 }, 'fast');
}).mouseleave(function () {
$(this).animate({ opacity: 0 }, 'fast');
}).click(function (e) {
e.preventDefault();
if (here > 0) { here--; } else { here = count - 1; }
$('.mid .container').animate({ left: loc[here] }, 'fast');
});
// Append Right button
$('<div class="right"></div>').insertBefore(mid).css({
float: 'right',
clear: 'none',
display: 'inline',
position: 'relative',
zIndex: 1,
margin: 0,
opacity: 0,
width: butwidth,
height: myheight,
cursor: 'pointer',
background: 'url(' + urlRight + ') no-repeat right center'
}).hover(function () {
$(this).animate({ opacity: 0.6 }, 'fast');
}).mouseleave(function () {
$(this).animate({ opacity: 0 }, 'fast');
}).click(function (e) {
e.preventDefault();
if (here < count - 1) { here++; } else { here = 0; }
$('.mid .container').animate({ left: loc[here] }, 'fast');
});
// Default behavior
function doIt() { obj.find('.right').click(); }
var int = setInterval(doIt, interval);
// Allow chain
return obj;
};
} ());
;(功能(){
//主要功能
$.fn.bslider=函数(){
//静止的
var i=0,
img=“”,
这里=0,
结果=0,
但是宽度=45,
间隔=5000,
loc=新阵列([]),
mywidth=this.width(),
myheight=this.height(),
count=此.children('img')。长度,
中间宽度=我的宽度*计数,
urlLeft=http://img842.imageshack.us/img842/613/arrowleftr.png',
urlRight=http://img7.imageshack.us/img7/4593/arrowrightq.png';
//首先缓存图像和计算位置
对于(i=0;i0){here--;}否则{here=count-1;}
$('.mid.container').animate({left:loc[here]},'fast');
});
//附加右按钮
$('').insertBefore(mid.css({
浮动:'对',
明确:“无”,
显示:“内联”,
位置:'相对',
zIndex:1,
保证金:0,
不透明度:0,
宽度:但是宽度,
身高:我的身高,
光标:“指针”,
背景:“url(“+urlRight+”)不重复右中”
}).hover(函数(){
动画({opacity:0.6},'fast');
}).mouseleave(函数(){
动画({opacity:0},'fast');
})。单击(功能(e){
e、 预防默认值();
if(here
如何停止此字段上的选择
fiddle:我想“黑客”应该是使用合适的回调清除文档选择(例如onSlideAfter)。例如:
编辑-以下是一种更跨浏览器的方式:
function clearSelection() {
var sel;
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
sel = window.getSelection();
if(sel.empty) sel.empty();
if(sel.removeAllRanges) sel.removeAllRanges();
}
}
来源:我想“黑客”应该是使用合适的回调清除文档选择(例如onSlideAfter)。例如:
编辑-以下是一种更跨浏览器的方式:
function clearSelection() {
var sel;
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
sel = window.getSelection();
if(sel.empty) sel.empty();
if(sel.removeAllRanges) sel.removeAllRanges();
}
}
来源:您可以使用css停止选择
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
您可以使用css停止选择
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
我不知道CSS中有这样的规则+1我不知道CSS中有这样的规则+1经过一段时间的测试,我发现javascript解决方案更可靠。虽然CSS解决方案在页面加载时失败,但这并不。。出于这个原因,我接受您的解决方案。经过一段时间的测试,我发现javascript解决方案更可靠。虽然CSS解决方案在页面加载时失败,但这并不。。因此,我接受你的解决方案。