<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>随鼠标滚动的广告图片</title> <style type="text/css"> #main { text-align: center; width: 1014px; margin: 0 auto; } #adver { position: absolute; /* position:fixed; */ left: 10px; top: 30px; z-index: 2; } </style> </head> <body> <div id="adver"><img src="images/adv.jpg" alt=""/></div> <div id="main"><img src="images/main1.JPG" alt=""/><img src="images/main2.JPG" alt=""/><img src="images/main3.JPG" alt=""/></div> </body> <script src="js/jquery-1.12.4.js"></script> <script> $(function (){ //获取id的高度用parseInt()去px let top = parseInt($("#adver").css("top")); let left = parseInt($("#adver").css("left")); $(window).scroll(function (){ //获取样式的元素中滚动条的垂直偏移:scrollTop() let scrollTop=parseInt($(this).scrollTop()) //获取样式的元素中滚动条的左偏移:scrollTop() let scrollLeft=parseInt($(this).scrollLeft()) console.log("滚动条距离最顶部的距离"+scrollTop) console.log("滚动条距离最左侧的距离"+scrollLeft) //offset:规定以像素计的 top 和 left 坐标。 $("#adver").offset({top:top+scrollTop}) $("#adver").offset({left:left+scrollLeft}) }) }) </script> </html>
随鼠标滚动的广告图片 JavaScript
最新推荐文章于 2022-03-07 03:29:25 发布