1、描述

　　两侧浮动显示广告

2、要点

　　其实就是一直在变浮动广告距顶部的值。

3、代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{margin: 0;padding: 0;}

            .left{

                position: absolute;

                left: 0;

                top:80px;

            }

            .right{

                position: absolute;

                right:0;

                top:80px;

            }

            p{

                height: 10000000px;

            }

        </style>

        <script src="js/jquery-1.11.1.min.js"></script>

        <script type="text/javascript">

            $(function(){

                $(window).scroll(function(){

                    var docHeight=$(document).scrollTop();

                    $(".left,.right").animate({"top":docHeight+80},30);

                });

            });

        </script>

    </head>

    <body>

        <div class="left">

            <img src="img/1.gif"/>

        </div>

        <div class="right">

            <img src="img/2.gif"/>

        </div>

        <p></p>

    </body>

</html>

JQuery实现两侧浮动广告的更多相关文章

  1. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  2. 笨办法用js屏蔽被http劫持的浮动广告

    最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...

  3. Js浮动广告效果实现

    第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...

  4. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  5. jQuery防京东浮动网站楼层导航代码

    jQuery防京东浮动网站楼层导航代码   <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...

  6. jQuery实现的浮动层div浏览器居中显示效果

    本文实例讲述了jQuery实现的浮动层div浏览器居中显示效果.分享给大家供大家参考,具体如下: 1.在页面的head中引入jQuery <script type="text/java ...

  7. JS-特效 ～ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎

    ceil 向上取整 floor 向下取整 round 四舍五入 缓动动画 动画原理 = 盒子位置 + 步长 清除定时器 步长越来越小 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为 ...

  8. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. 自己写的jQuery浮动广告插件

    效果图: 文件位置摆放: 插件的js代码: $.extend({ pfAdv:function(options){ var defaults={ count:1, startTop:200, star ...

随机推荐

  1. js css优化-- 合并和压缩

    在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Reque ...

  2. vb6 控件未注册问题解决

    打开项目时弹出如题错误. 另附一个帖子:http://bbs.csdn.net/topics/390580540,这个帖子讨论的不错,可以提供很多思路. 解决办法:http://rewwensoftw ...

  3. 连接SQLServer ＯＬＥＤＢ数据库（ACCESS） ODBC Oracle

    web.Config文件中的连接字符串 <configuration> <system.web> <compilation debug="true" ...

  4. slf4j(simple logging facade for java)

    http://www.tuicool.com/articles/IfeUfq   slf4j(simple logging facade for java)是Java的简单的日志门面,它 不是具体的日 ...

  5. A New Change Problem

    题目链接 /* 给定两个互质的数,a,b,求这两个数不能表示的数的最大值和个数. 最大值=a*b-a-b; 个数 =(a-1)*(b-1)/2; */ #include <set> #in ...

  6. sql server 2005导出数据

    */ EXEC sp_configure 'show advanced options', 1 GO */     配置选项 'show advanced options' 已从 0 更改为 1.请运 ...

  7. CodeForces 678B The Same Calendar

    暴力.一年一年判断过去.如果某一年与输入的年份闰年性质相同,并且1月1日是星期几相同,那么输出. #include<cstdio> #include<cstring> #inc ...

  8. CodeForces 678A Johny Likes Numbers

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> ...

  9. HDU 2668 Daydream

    用一个队列来维护 每次加入一个字符,如果字符没有在队列里,那么直接入队,并且检查更新队列大小. 如果加入的字符在队列里了,那么要一直弹出队首,直到弹出的字符和当前要插入的一样. #include< ...

  10. leetcode371

    我这道题目真的是划水的,因为弄了很长时间发现,我可能对于位操作不是特别喜欢吧. 确实为了最求速度,位操作确实快一些. 单独从题目意思来说,用别的方式实现加法,我觉得吧,真的有点醉了...就这样. 下面 ...