js怎么实现鼠标经过一个div,div自动向右边平滑缓慢的移动50px

JavaScript015

js怎么实现鼠标经过一个div,div自动向右边平滑缓慢的移动50px,第1张

(function($) {

$.fn.huadong = function( obj, obja, time ) {

this.height($(window).height()).css({'position':'absolute', 'top':'0px', 'left' : '0px'})//首先把最外层的标签对象设置为浮动, 上边为0, 左边也为0

var left = $(obj).width()//取得左边栏的宽度

$(obj).height($(window).height()).width(0).hide()//将左边栏的高度设置为浏览器的高度, 宽度为0, 并隐藏掉!这样是为了页面载入的时候初始化

$(obja).click(function(){ //给触发按钮绑定点击事件,也就是鼠标点击触发按钮后执行的动作

$(obj).show().animate({'width':left + 'px'}, time)//把左边栏的宽度设置为原来的宽度并显示出来, 根据设定的时间慢慢展现

})

$(obj).mouseout(function(){ //绑定左边栏鼠标移开事件

$(this).animate({'width':'0px'}, time, function(){ $(this).hide()})//又把左边栏的宽度设置为0, 并且隐藏

})

}

})(jQuery)

主要思路是:鼠标当前点到下一点直接间隔计算出速度。这样就实现了惯性滑动效果。

下面是简单的js代码实现:仅供参考:

<style>    

#div1{ width:100px height:100px background:red position:absolute left:0px top:0}    

</style>    

<script>    

window.onload=function(){    

var oDiv=document.getElementById('div1')    

var iSpeedX=0    

var iSpeedY=0     

var lastX=0    

var lastY=0    

var timer=null     

oDiv.onmousedown=function(ev){    //div的鼠标按下事件,主要计算鼠标当前位置,和移动位置。这样可以计算出鼠标移动速度。

var oEvent=ev || event    

var disX=oEvent.clientX-oDiv.offsetLeft    

var disY=oEvent.clientY-oDiv.offsetTop      

clearInterval(timer)      

document.onmousemove=function(ev){   //鼠标拖动事件。 

var oEvent=ev || event     

oDiv.style.left=oEvent.clientX-disX+'px'    

oDiv.style.top=oEvent.clientY-disY+'px'    

iSpeedX=oEvent.clientX-lastX    

iSpeedY=oEvent.clientY-lastY     

lastX=oEvent.clientX    

lastY=oEvent.clientY

}    

document.onmouseup=function(){    //当鼠标抬起后,清掉移动事件。

document.onmousemove=null    

document.onmouseup=null

oDiv.releaseCapture && oDiv.releaseCapture()      

startMove()    

}    

oDiv.setCapture && oDiv.setCapture()    

return false

}         

function startMove(){    //移动函数,主要操作是计算鼠标移动速度和移动方向。

clearInterval(timer)    

timer=setInterval(function(){    

iSpeedY+=3    

var t=oDiv.offsetTop+iSpeedY    

var l=oDiv.offsetLeft+iSpeedX    

if(t>document.documentElement.clientHeight-oDiv.offsetHeight){    

t=document.documentElement.clientHeight-oDiv.offsetHeight    

iSpeedY*=-0.8    

iSpeedX*=0.8

}     

if(t<0){    

t=0    

iSpeedY*=-0.8    

iSpeedX*=0.8

}    

if(l>document.documentElement.clientWidth-oDiv.offsetWidth){    

l=document.documentElement.clientWidth-oDiv.offsetWidth

    

iSpeedX*=-0.8    

iSpeedY*=0.8    

}    

if(l<0){    

l=0    

iSpeedX*=-0.8    

iSpeedY*=0.8

    

}    

    

oDiv.style.left=l+'px'    

oDiv.style.top=t+'px'    

    

if(Math.abs(iSpeedX)<1)iSpeedX=0    

if(Math.abs(iSpeedY)<1)iSpeedY=0    

if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){    

clearInterval(timer)    

}    

document.title=i++    

},30)

}    

}    

</script>    

</head>    

<body>    

<div id="div1"></div>    

</body>

这是一个叫photoswipe的插件,挺好用的,平滑滑动,上一张下一张,点击放大等功能

这是我自己精简了一下的.里面有Demo,你自己看吧.