Jquery实现广告滚动

向右看齐 2022-08-18 02:45 290阅读 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 条评论，290人围观）

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

相关阅读

相关对联广告（jQuery）

对联广告（jQuery）上代码！！！ <!DOCTYPE html> <html lang="en"> <head>

╰半橙微兮°/ 2023年10月04日 10:29/ 0 赞/ 36 阅读

相关 jQuery实现轮播图广告

轮播图广告实例描述本实例将实现一个轮播图广告的动画效果。HTML5中实现动画轮播的方法有很多，这里将使用一种非常简便的JavaScript框架：jQuery框架

超、凢脫俗/ 2023年07月03日 15:29/ 0 赞/ 104 阅读

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

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

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

相关滚动广告php,【代码】随滚动条移动的层可以做成广告!

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="\_blank">http://www.w3.o

柔情只为你懂/ 2023年01月18日 15:23/ 0 赞/ 67 阅读

相关 jQ广告横向滚动

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

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

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

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

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

相关 jquery实现滚动监听实例

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

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

相关 Jquery实现广告滚动

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

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

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

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

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

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

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

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