87,910
社区成员
发帖
与我相关
我的任务
分享实现鼠标点击页面上下滑动的效果
(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");
direction=0;
draging=false;
}
}
//初始化事件
return this.each(function(){
var obj = $(this);
obj.bind("mousemove",function(e){
point.X = e.pageX;
point.Y = e.pageY;
}).bind("mouseup",endDrag);
$(touchPageWrapper).bind("mousedown",startDrag)
.bind("click",clearEvent)
.bind("mouseup",endDrag).bind("mouseout",endDrag);
});
};
})(jQuery);
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.ui.touch.js"></script>
<script type="text/javascript">
$(function(){
$('#slidePage').lyhucTouchPad({align:'center',pager:'#pager',showmousePoint:false});
});
</script>
</head>
<body onselectstart="return false" onselect="return false" oncontextmenu="return false"
ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty() onselect=document.selection.empty()
>
<div id="mousePoint"></div>
<div class="pageWrapper">
<div align="center" id="slidePage">
<div id="slidePageWrapper">
<div class="slidePageContent bgcolor1" style="background-image:url(img/nr4a.png)">
</div>
<div class="slidePageContent bgcolor2" style="background-image:url(img/nr4b.png)">
</div>
<div class="slidePageContent bgcolor3" style="background-image:url(img/nr4b.png)">
</div>
<div class="slidePageContent bgcolor4" style="background-image:url(img/nr4a.png)">
</div>
</div>
</div>
<div id="pager"><div></div></div>
</div>
</body>
</html>
上面JS实现的是div翻页一样的效果，我想要的是像手机网页无缝的效果
求各位大神指导
$.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");
direction=0;
draging=false;
}
}
//初始化事件
return this.each(function(){
var obj = $(this);
obj.bind("mousemove",function(e){
point.X = e.pageX;
point.Y = e.pageY;
}).bind("mouseup",endDrag);
$(touchPageWrapper).bind("mousedown",startDrag)
.bind("click",clearEvent)
.bind("mouseup",endDrag).bind("mouseout",endDrag);
});
};
})(jQuery);
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.ui.touch.js"></script>
<script type="text/javascript">
$(function(){
$('#slidePage').lyhucTouchPad({align:'center',pager:'#pager',showmousePoint:false});
});
</script>
</head>
<body onselectstart="return false" onselect="return false" oncontextmenu="return false"
ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty() onselect=document.selection.empty()
>
<div id="mousePoint"></div>
<div class="pageWrapper">
<div align="center" id="slidePage">
<div id="slidePageWrapper">
<div class="slidePageContent bgcolor1" style="background-image:url(img/nr4a.png)">
</div>
<div class="slidePageContent bgcolor2" style="background-image:url(img/nr4b.png)">
</div>
<div class="slidePageContent bgcolor3" style="background-image:url(img/nr4b.png)">
</div>
<div class="slidePageContent bgcolor4" style="background-image:url(img/nr4a.png)">
</div>
</div>
</div>
<div id="pager"><div></div></div>
</div>
</body>
</html>
上面JS实现的是div翻页一样的效果，我想要的是像手机网页无缝的效果
求各位大神指导
...全文
请发表友善的回复…
发表回复
chailangd1 2013-02-28
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html {
width:700px;
height:700px;
}
body {
background-repeat:no-repeat;
background-position:center;
margin:0px;
padding:0px;
}
#overflow {
width: 650px;
height: 650px;
overflow: hidden;
position: absolute;
left:-4px;
top:29px;
-webkit-transform: translateZ(0);
}
#overflow .content {
position: relative;
top: 0;
left: 0;
padding: 10px;
width: 650px;
}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="hammer.js" type="text/javascript"></script>
<title>上下滑动</title>
<script>
function sss(){
//alert(document.getElementById("overflow").scrollHeight);
}
</script>
</head>
<body onload="sss();" oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>
<div id="overflow" >
<div class="content">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul id="ddddddd">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</div>
</div>
<div id="debug" style="white-space:pre;"></div>
<script src="jquery.ui.touch.js" type="text/javascript"></script>
</body>
</html>
function debug(str) {
$("#debug").prepend(str+"\n");
}
/**
* super simple slideshow
* animation between slides happens with css transitions
动画幻灯片之间发生在css转换
*/
function TouchScroll(container, options)
{
container = $(container);
var content = $(">.content", container);
// var scrollbar = $(">.scrollbar div", container);
var self = this;
var hammer = new Hammer(container.get(0), {
drag: true,
drag_vertical: true,//垂直拖动
drag_horizontal: false,//水平拖动
drag_min_distance: 0,//最小距离在拖动事件开始
transform: false, //top: parseInt/*取整*/(content.css('top'), 10)<0?0:(parseInt/*取整*/(content.css('top'), 10)>2013?2013:parseInt/*取整*/(content.css('top'), 10)),
tap: false,
tap_double: false,
hold: false
});
function getScrollPosition() {
return {
top: parseInt/*取整*/(content.css('top'), 10),
left: parseInt(content.css('left'), 10)
};
}
/**
* get the dimensions of a element 得到一个元素的尺寸
* @param jQuery el
* @return object { width: int, height: int }
*/
function getDimensions( el ) {
return {
width: el.outerWidth(),
height: el.outerHeight()
};
}
/**
* scroll to given x and y
* @param int x
* @param int y
*/
this.scrollTo = function(x, y)
{
};
var scroll_start = {};
var scroll_dim = {};
var content_dim = {};
hammer.ondragstart = function() {
scroll_start = getScrollPosition();
scroll_start.time = new Date().getTime();
scroll_dim = getDimensions( container );
content_dim = getDimensions( content );
// scrollbar.css({
// height: (100 / content_dim.height * scroll_dim.height) * (scroll_dim.height/100)
// }).stop().fadeTo(80, 1);
};
hammer.ondrag = function( ev ) {
if(ev.direction == 'up' || ev.direction == 'left') {
ev.distance = 0-ev.distance;
}
var delta = 1;
var top = scroll_start.top + ev.distance * delta;
//就加这句话判定上下封顶，至于-1363怎么来的，你慢慢琢磨吧
top=top>0?0:(top<-1148?-1148:top);
content.css({ top: top });
// scrollbar.css({
// top: (100 / content_dim.height) * (0 - top) +"%"
// });
};
hammer.ondragend = function( ev ) {
var scroll = getScrollPosition();
var corrections = {};
if(scroll.top > 0) {
corrections.top = 0;
}
else if(scroll.top < -(content_dim.height - scroll_dim.height) ) {
corrections.top = -(content_dim.height - scroll_dim.height);
}
content.animate(corrections, 400);
// scrollbar.stop().animate({
// top: (100 / content_dim.height) * (0 - corrections.top) +"%"
// }, 400);
// scrollbar.stop().fadeTo(80, 0);
};
}
var scroll = new TouchScroll("#overflow");
scroll.scrollTo(0,200);
