jquery制作的图层根据鼠标滚动平滑移动效果
  • 分享到微信朋友圈
    X
查看演示

文章内容

分享一个jquery制作的图层根据鼠标滚动平滑移动效果

引入必要文件

<link href="css/common.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="jquery/2.1.1/jquery.min.js"></script>

html代码

<div id="menu" style="position: absolute; top: 50px; left: 0; width: 130px; height: 325px;
    z-index: 999;">
    <a href="javascript:void(0);">
        <img src="images/1.jpg" /></a>
</div>

引用js代码

<script type="text/javascript">
    $(document).ready(function () {
        var menuYloc = $("#menu").offset().top;
        $(window).scroll(function () {
            var offsetTop = menuYloc + $(window).scrollTop() + "px";
            $("#menu").animate({ top: offsetTop }, { duration: 500, queue: false });
        });
    });
</script>