随滚动条滚动广告图片
Posted taoist123
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了随滚动条滚动广告图片相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随滚动条滚动广告图片</title> <style> bodymargin: 0; .wrap height: 3000px; background: #ccc; .ad position: absolute; z-index: 1000; left:50px; top:100px; </style> </head> <body> <div class="wrap"> <div class="ad"> <img src="winter.jpg" width="300" height="280"> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () //offset获取当前元素的位移 let x = $(".ad").offset().left; let y = $(".ad").offset().top; //console.log("x=" + x + ",y=" + y); $(document).scroll(function () //获取滚动条当前滚动产生的x y位移量 let sTop = $(document).scrollTop(); let sLeft = $(document).scrollLeft(); //前滚动产生的x y位移量 与原图片的位置 相加 $(".ad").offset( top: y + sTop, left: x+sLeft ); ); ); </script> </body> </html>
以上是关于随滚动条滚动广告图片的主要内容,如果未能解决你的问题,请参考以下文章
在Dreamweaver 8里实现背景图片不随滚动条滚动(背景图片固定)..
css Div在页面中纵向固定,不随滚动条滚动,横向随滚动条滚动
如何固定table的第一行,不随纵向滚动条滚动,但能横向滚动