[jQuery]仿IPhone的滑动操作效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> New Document </title>

<style>

img{border:0px; cursor:pointer;}

</style>

$(document).ready(function(){

var $mouseX = 0; //鼠标X轴坐标

var $scrollLeft = 0; //滑动位置标记

var $width = 0;

//初始化

(function init(){

$("#play_list").scrollLeft($scrollLeft); //回到第一帧

$("#play_list a").click(function(){return false;}) //取消所有click

})();

//开始工作，记录鼠标位置

$("#play_list img").mousedown(function(e){$mouseX = e.pageX;return false; });

$("#play_list img").mouseup(function(e){

if($mouseX > 0){

var $move = $mouseX-e.pageX;//滑动偏移量

//点击处理

if($move==0){

window.location = $(this).parent().attr("href");

return false;

}

$mouseX = 0;$width = 0; //还原设置值

$(this).parent().prevAll().each(function() {$width += $(this).width(); }); //前面元素宽度累加

$scrollLeft = $width+$(this).width() * (($move > 0)?1:-1); //1为向左滑动 -1这向右滑动

$("#play_list").animate({ scrollLeft: $scrollLeft },500); //设置滑动位置及动画效果

}

return false;

});

//图片跟随鼠标滑动

$("#play_list img").mousemove(function(e){

if($mouseX > 0){

var $move = $scrollLeft + $mouseX-e.pageX;

$("#play_list").scrollLeft($move);

}

return false;

});

</script>

</head>

<body>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</div>

</body>

</html>