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. SUPERVISOR进程管理器配置指南

    SUPERVISOR进程管理器配置指南1. supervisor简介1.1. 官网http://supervisord.org/ 1.2. 介绍Supervisor是一个进程控制系统. 它是一个C/S ...

  2. hosts.deny 和hosts.allow 配置不生效

    需求:需要用hosts.deny限制用户通过ssh登录 在/etc/hosts.deny中加入 sshd: all 在/etc/hosts.allow中加入 sshd:all #拒绝所有的ip链接ss ...

  3. hibernate ——helloWorld程序(XML配置)

    1.项目结构 2.hibernate实现了Java类 和 数据库表的映射(Map) 先看一下Student的Java类和对应的数据库表 package com.pt.hibernate; public ...

  4. ListBox之类控件的Item项显示对象的两个属性

    wpf项目中,ListBox绑定对象集合,ListBoxItem要显示对象的两个属性,例如:显示员工的工号和姓名. 之前我的做法是在Employee员工类中添加一个"NumAndName&q ...

  5. java中的类修饰符、成员变量修饰符、方法修饰符

    类修饰符:  public(访问控制符),将一个类声明为公共类,他可以被任何对象访问,一个程序的主类必须是公共类. abstract,将一个类声明为抽象类,没有实现的方法,需要子类提供方法实现. fi ...

  6. 软件开发常用的linux命令心得(ubuntu为例)

    软件开发过程中难免要经常对主机进行配置或者部署等操作,想到一些就写一些了,以后再更新 解压命令: a.如果是tar文件,则直接用 “tar zxvf 文件名”: b.如果是zip文件,用 “unzip ...

  7. Echarts自适应浏览器大小

    var myChart = echarts.init(document.getElementById('sitesChar')); var option = { title : { text: 'No ...

  8. dedecms 标签的基本用法

    1.关键描述调用标签: <meta name="keywords" content="{:fieldname='keywords'/}"> < ...

  9. oracle 锁表的处理。

    最近系统每天经常锁表,进程杀死后,很快再次锁住这个表. (一)先贴出现场处理死锁的步骤. 另外:有时候通过PL/SQL执行kill session可能仍然无法解锁,此时需要登陆到Oracle服务器将进 ...

  10. lucene3.6.1 经典案例 入门教程 (包含从文件中读取content)

    转载http://liqita.iteye.com/blog/1676664 第一步:下载lucene的核心包 lucene-core-3.6.1-javadoc.jar (3.5 MB) lucen ...