![jquery制作的图层根据鼠标滚动平滑移动效果](/upload/202407/31/202407311022230654.jpg)
文章内容
分享一个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>