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. Ckeditor配置

    配置参考文档,主要将ckeditor中的(adapters.images.lang.plugins.skins.themes.ckeditor.js.config.js.contents.css)解压 ...

  2. ajax学习之post请求步骤

    ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...

  3. js跨域访问，No ‘Access-Control-Allow-Origin‘ header is present on

    在本地用ajax跨域访问请求时报错: XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origi ...

  4. cmd命令行查看当前系统版本和版本是32位还是64位

  5. centos7与centos6区别

    CentOS 7 vs CentOS 6的不同   (1)桌面系统[CentOS6] GNOME 2.x[CentOS7] GNOME 3.x(GNOME Shell)(2)文件系统[CentOS6] ...

  6. overlay

    http://dockone.io/article/237 http://blog.cloud66.com/docker-with-overlayfs-first-impression/ http:/ ...

  7. Sublime console installation instructions install Package Control

    instructions: import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1 ...

  8. Mysql-左连接查询条件失效的解决办法

    on 后面不能 接and 要接where 这个条件才能判断成功 判断条件先后顺序,先判断主条件where,再判断条件on 如果是左连接on限制的就是右表,如果不为真则那一行的值为null,where限 ...

  9. Mybatis 一对一，一对多，多对一，多对多的理解

    First (一对一) 首先我来说下一对一的理解,就是一个班主任只属于一个班级,一个班级也只能有一个班主任.好吧这就是对于一对一的理解 怎么来实现呢? 这里我介绍了两种方式: 一种是:使用嵌套结果映射 ...

  10. c++绘图软件<一>

    准备写一个绘图软件,参考了三层架构(表现层.业务逻辑层.数据访问层). //////////////////////////////////////////////////////////////// ...