当页面不够的时候，鼠标滑动特效

最新推荐文章于 2019-09-12 15:05:17 发布

你是我的绝笔

最新推荐文章于 2019-09-12 15:05:17 发布

阅读量622

点赞数

分类专栏： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(function(){

   $(window).load(function(){

       var $gal   = $("#propertyThumbnails"),
           galW   = $gal.outerWidth(true),
           galSW = $gal[0].scrollWidth,
           wDiff = (galSW/galW)-1, // widths difference ratio
           mPadd = 60, // Mousemove Padding
           damp   = 20, // Mousemove response softness
           mX     = 0,   // Real mouse position
           mX2    = 0,   // Modified mouse position
           posX   = 0,
           mmAA   = galW-(mPadd*2), // The mousemove available area
           mmAAr = (galW/mmAA);    // get available mousemove fidderence ratio

       $gal.mousemove(function(e) {
           mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
           mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
       });

       setInterval(function(){
           posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
           $gal.scrollLeft(posX*wDiff);
       }, 10);

   });

});
</script>
</head>
<style>
#parent{
position:relative;
margin:0 auto;
height: 260px;
width: 100%;
background: #ddd;
}
#propertyThumbnails{
position:relative;
overflow:hidden;
background:#444;
width:100%;
height:262px;
white-space:nowrap;
}
#propertyThumbnails img{
vertical-align: middle;
height: 260px;
display:inline;
margin-left:-4px;
}
</style>
<body>
<div id="parent">
    <div id="propertyThumbnails">

        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />
        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />
        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />
        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />
        <img src="http://www.millport.org/wp-content/uploads/2013/05/Flower-festival.jpg" />

    </div>
</div>

</body>
</html>

http://jsbin.com/peqaniqire/1/edit