Jquery实现广告滚动

向右看齐 2022-08-18 02:45 191阅读 0赞

当页面的滚动条上下移动时，飘浮广告随着滚动条的滚动而上移或者下移，要明白两点，第一：放广告的层最好采用绝对定位，它的位置应该随着滚动条的改变而上下移动，滚动条的滚动促发的是onscroll事件，广告条所在的层的top值就是滚动条的高度，具体代码如下：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var vtop=$(document).scrollTop(); var vv=eval_r(vtop+200)+"px"; $("#tv").css('left',$(document.body).width()+"px") $("#tv").css('top',vv); //$("#tv").animate({top:}); })； } ) </script>
    </head>
    <body>
     <form method="post" action=""> 
     <div id="tv" style="position:absolute;top:60px;">我爱中国</div>  
    <div id="nn">
      <button class="int">sdfdsfds</button> <label for="username">用户名:</label> <input type="text" id="username" class="required"/>  
       sdsdfsdsdfsdfsdfdsf
    </div>
    <div></div>
    </form>
    </body>
    </html>

$(window).height();获取浏览器显示区域的高度；
    
    $(window).width();获取浏览器显示区域的宽度；
    
    $(document.body).height();获取页面文档的高度；
    
    $(document.body).width();获取页面文档的宽度；
    
    $(document).scrollTop();获取滚动条到顶部的高度；
    
    $(document).scrollLeft();获取滚动条到左边的宽度；

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关基于jQuery实现内容向上滚动

基于jQuery实现内容向上滚动，效果如下图所示 ![在这里插入图片描述][20210714121935389.gif] 1，页面需要引入jquery.liMarquee.

我不是女神ヾ/ 2023年01月23日 10:47/ 0 赞/ 114 阅读

相关 jquery定时显示广告

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

深碍√TFBOYSˉ_/ 2023年01月01日 04:53/ 0 赞/ 105 阅读

相关 jQuery实现消息滚动播放的效果

场景需求：在大屏幕上，消息会进行一个实时滚动播报的效果，将现有的内容进行一个来回滚动的播放~~ 代码： <!DOCTYPE HTML> <html x

野性酷女/ 2022年12月24日 01:00/ 0 赞/ 152 阅读

相关 jQ广告横向滚动

{ box-sizing: border-box; } .gunDong{ background-color: F4F4F

以你之姓@/ 2022年11月13日 04:20/ 0 赞/ 152 阅读

相关 JS+CSS 实现悬浮滚动广告

效果图思路代码效果图： ![这里写图片描述][20160728100844900] 思路：布局一个绝对布局的di

川长思鸟来/ 2022年09月24日 07:25/ 0 赞/ 174 阅读

相关 jquery实现滚动监听实例

css: <style> { list-style: none; }

素颜马尾好姑娘i/ 2022年09月14日 09:10/ 0 赞/ 105 阅读

相关 Jquery实现广告滚动

当页面的滚动条上下移动时，飘浮广告随着滚动条的滚动而上移或者下移，要明白两点，第一：放广告的层最好采用绝对定位，它的位置应该随着滚动条的改变而上下移动，滚动条的滚动促发的是on

向右看齐/ 2022年08月18日 02:45/ 0 赞/ 192 阅读

相关 jquery实现浏览器滚动加载

var totalheight = 0; $(function(){ $(window).bind("sc

女爷i/ 2022年08月07日 03:41/ 0 赞/ 206 阅读

相关 JQuery实现导航效果、新闻滚动、广告效果、横向滚动

1、导航效果 2、新闻滚动（跑马灯） 3、广告效果 4、新款上市模块横向滚动 1、导航效果 ![1333441380_1207.png][]

迷南。/ 2021年09月12日 08:42/ 0 赞/ 409 阅读

相关 Android ViewFlipper实现淘宝垂直滚动广告条

下面是我们今天要实现的效果，图片是Gif，运行效果是很流畅的，由于这个图片反应有点慢，会浪费大家点时间，所以我把它调快了，大家可以掏出手机打开淘宝看，一模一样的 ![So

Myth丶恋晨/ 2021年09月12日 02:50/ 0 赞/ 308 阅读