因項目需要，我寫了一個鼠標仿手機上的屏幕滑動的效果，本來是基於zepto.js寫的（注：這是一個基於jquery的應用於手機開發的庫，比jquery更小，更輕便，但jquery的很多方法，它都不支持），后來拿到jquery上試效果，發現出問題了，原來zepto.js獲取一個元素的寬度的時候，把padding也算進去了，但jquery只算本身的寬度；所以出了點小問題。我把例子傳上來，感興趣的童鞋們幫忙看看，我這是初級的代碼水平；
望大家多多指點。
注：jquery我用的是1.10.1版，沒試其他版本效果怎么樣。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>焦點輪換示例</title>
<style type="text/css">
*{margin:0;padding:0;}
#ad_box{position: relative; width: 552px; height: 140px; border: 1px solid #ccc; overflow: hidden;}
#ads{position: absolute; top: 0; left: 0;}
#ads li{width: 136px; height:136px;list-style: none;float: left; border: 1px solid #333;}
</style>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
</head>
<body>
<div id="ad_box">
<ul id="ads">
<li style="background: url(../images/9weico114.png) no-repeat center center;" title="1111111"></li>
<li style="background: url(../images/9weico114.png) no-repeat center center;"></li>
<li style="background: url(../images/9weico114.png) no-repeat center center;"></li>
<li style="background: url(../images/9weico114.png) no-repeat center center;"></li>
<li style="background:url(../images/91.jpg) no-repeat center center" title="222"></li>
<li style="background: url(../images/aiqiyi114.png) no-repeat center center" title="333"></li>
<li style="background: url(../images/alipay-zt.png) no-repeat center center" title="444"></li>
<li style="background: url(../images/dianshixinwen114.jpg) no-repeat center center" title="555"></li>
<li style="background: url(../images/fushi114.png) no-repeat center center" title="666"></li>
<li style="background: url(../images/9weico114.png) no-repeat center center;"></li>
<li style="background: url(../images/hangban114.png) no-repeat center center" title="777"></li>
<li style="background: url(../images/jianfei114.png) no-repeat center center" title="888"></li>
<li style="background: url(../images/jinshan114.png) no-repeat center center" title="999"></li>
<li style="background: url(../images/jumeiyoupin114.png) no-repeat center center" title="1010"></li>
<li style="background: url(../images/qingnian114.png) no-repeat center center" title="1111"></li>
<li style="background: url(../images/qiyi114.png) no-repeat center center" title="1212"></li>
<li style="background: url(../images/9weico114.png) no-repeat center center;"></li>
<li style="background: url(../images/dianshixinwen114.jpg) no-repeat center center" title="555"></li>
<li style="background: url(../images/fushi114.png) no-repeat center center" title="666"></li>
<li style="background: url(../images/alipay-zt.png) no-repeat center center" title="444"></li>
<li style="background: url(../images/hangban114.png) no-repeat center center" title="777"></li>
<li style="background:url(../images/91.jpg) no-repeat center center" title="222"></li>
<li style="background: url(../images/jinshan114.png) no-repeat center center" title="999"></li>
<li style="background: url(../images/jumeiyoupin114.png) no-repeat center center" title="1010"></li>
<li style="background: url(../images/qingnian114.png) no-repeat center center" title="1111"></li>
<li style="background: url(../images/aiqiyi114.png) no-repeat center center" title="333"></li>
<li style="background:url(../images/91.jpg) no-repeat center center" title="222"></li>
<li style="background: url(../images/fushi114.png) no-repeat center center" title="666"></li>
<li style="background: url(../images/hangban114.png) no-repeat center center" title="777"></li>
<li style="background:url(../images/91.jpg) no-repeat center center" title="222"></li>
<li style="background: url(../images/jinshan114.png) no-repeat center center" title="999"></li>
<li style="background: url(../images/jumeiyoupin114.png) no-repeat center center" title="1010"></li>
<li style="background: url(../images/qingnian114.png) no-repeat center center" title="1111"></li>
<li style="background: url(../images/qiyi114.png) no-repeat center center" title="2222222222"></li>
<li style="background: url(../images/qiyi114.png) no-repeat center center" title="2222222222"></li>
<li style="background: url(../images/qiyi114.png) no-repeat center center" title="2222222222"></li>
<li style="background: url(../images/qiyi114.png) no-repeat center center" title="2222222222"></li>
<li style="background: url(../images/qiyi114.png) no-repeat center center" title="2222222222"></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var obj_box=$("#ad_box"); //獲取ul元素的外部div
var obj_ads=$("#ads"); //獲取圖片所在ul元素
var li_lens=$("#ads li").length;
var li_w=$("#ads li").width()+2; //獲取li元素的寬度
//alert(li_w);
var d_x,m_x,u_x,iNow=0;
var flag = false;
//一次能夠顯示的圖片個數
var d_lis = parseInt(obj_box.width()/li_w , 10);
obj_box.mousedown(function(event){
flag = true;
d_x = event.pageX; //獲取鼠標點擊下去時的橫坐
});
obj_box.mousemove(function(event){
if(flag == true){
m_x = event.pageX;
var _x = m_x - d_x;
if(Math.abs(_x)>=50){
if(_x>0){
iNow--;
if(iNow<0){
iNow=0;
}
} else if(_x<0){
iNow++;
if(iNow>=Math.ceil(li_lens/d_lis)){
iNow=Math.ceil(li_lens/d_lis)-1;
}
}
obj_ads.animate({
"left" : -iNow*d_lis*li_w
},1000);
flag = false;
}
}
});
obj_box.mouseup(function(){
flag = false;
});
});
</script>
</body>
</html>