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. Linux查看CPU和内存使用情况 【转】

    Linux查看CPU和内存使用情况 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 ...

  2. http & json

    TCP(传输层协议) (1) 面向连接  (2) 可靠的  (3) 基于字节流的   连接建立阶段: 客户端 ------->SYN                 服务端(服务器被动打开) 客 ...

  3. OpenGL ES 详解纹理生成和纹理映射步骤以及函数

    通常一个纹理映射的步骤是: 创建纹理对象.就是获得一个新的纹理句柄 ID. 指定纹理.就是将数据赋值给 ID 的纹理对象,在这一步,图像数据正式加载到了 ID 的纹理对象中. 设定过滤器.定义了ope ...

  4. js 弹层 提示

    <!DOCTYPE html><html style="height: 100%;"><head lang="en"> &l ...

  5. ACE_Time_Value

    头文件“Time_Value.h” 为了兼容各个平台的时间特性,ACE Reactor框架提供了ACE_Time_Value类.ACE_Time_Value的关键方法见下图3.2和表3.2.3.3: ...

  6. ubuntu12.04的NFS配置

    安装nfs: #sudo apt-get install nfs-kernel-server ubuntu12.04中的已经是最新版本了,无需安装 打开/etc/exports文件,在末尾加入: /h ...

  7. selenium和pythond的区别

    selenium和pythond的区别 天宇6169 | 浏览 137 次 2016-03-18 10:25 2016-03-18 12:24 最佳答案   selenium ide是用来录制的!大概 ...

  8. Android中自定义veiw使用Java中的回调方法

    //------------------MainActivity----中---------------------------------- import android.os.Bundle;imp ...

  9. android apk jarsigner 签名打包

    cmd 命令符打包: 规则:  jarsigner -verbose -keystore 签名路径 -signedjar 签名后的apk存放路径  未签名的apk 签名文件的别名 项目如我的项目是: ...

  10. 转：jmeter性能测试---登录百度进行搜索

    在做web程序性能测试时,loadrunner和jmeter是两款常用的工具,两者比较起来,jmeter非常轻巧,且开源免费,上手快.这里简单介绍下jmeter的使用,以登录百度进行搜索为例. jme ...