实现鼠标点击页面上下滑动的效果
(function($) {
$.fn.lyhucTouchPad = function(options) {
//鼠标X位置
var element=$(this);
var draging = false;
var touchPageWrapper=$("#" + element[0].id + "Wrapper");
var touchPageContent=$("#"+element[0].id+" ."+element[0].id+"Content");
var marginleft=0;//父面板位置
var touchPageContentHeight=touchPageContent.height();
var startTop,startTop;
var startX,startY;
var point={X:0,Y:0};
var currentIndex=0;
var direction=0;
var pageCount=touchPageContent.size();
touchPageWrapper.height((pageCount+1)*touchPageContentHeight);
var defaults = {
align:'center',
pager:'#pager',
showmousePoint:true
};
var options = $.extend(defaults, options);
//初始化
(function init(){
if(options.align=='center')
{
marginleft=($(window).width()-element.width())/2;
element.css("left",marginleft);
$(options.pager).css("width",marginleft);
}
if(options.align=='right')element.css("right",0);
startLeft=0;
for(var i=0;i<pageCount;i++)
{
if(i==0)
$(options.pager+">div").before("<a href='#' class='current'> </a>");
else
$(options.pager+">div").before("<a href='#' class='point'> </a>");
}
})();
clearEvent = function(){
}
startDrag = function(event)
{
var offset = $(this).offset();
startTop = offset.top;
startY = event.pageY;
$(this)
.stop(true, false)
.mousemove(moveDrag)
.css('cursor','move');
;
draging=true;
}
/*
* div随鼠标移动,由startDrag开启,由enddrag结束
*/
var moveDrag = function(event){
var offset = $(this).offset();
var movepx=event.pageY-startY;
endTop= startTop+movepx;
direction=0;
if(movepx>0 && movepx>=(touchPageContentHeight))
direction=1;
else if (movepx<0 && Math.abs(movepx)>=(touchPageContentHeight))
direction=-1; /*+" direction="+direction*/
if(options.showmousePoint)$("#mousePoint").text("X="+point.X+" Y="+point.Y+ " offset.top="+movepx);
$(this).css("top", endTop-marginleft );
return true;
}
var endDrag = function(event){
if(draging){
$(touchPageWrapper)
.unbind("mousemove",moveDrag)
.css('cursor','auto');
if(direction==1)
currentIndex++
else if(direction==-1)
currentIndex--;
if(currentIndex==1 && (direction==1)) currentIndex=0;
if((Math.abs(currentIndex)+1)>=pageCount && (direction==-1)){currentIndex=(-pageCount+1);}
$(touchPageWrapper).animate({ top: currentIndex*touchPageContentHeight }, "slow");
var currentA=$(options.pager+" a");
$(currentA).attr("class","");
$(currentA).eq(Math.abs(currentIndex)).attr("class","current");
<