因项目需要，我写了一个鼠标仿手机上的屏幕滑动的效果，本来是基于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>
