html
——————————————————————————————————————————————————————————————————————————————————————
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../css/JQ08_24_02.css">
    <title>对联广告</title>
</head>
<body>
<div class="adsOnTheLeft"></div>
<div class="adsOnTheRight"></div>
<script src="../js/JQ08_24_02.js"></script>
</body>
</html>

css
——————————————————————————————————————————————————————————————————————————————
*{margin: 0;padding: 0}
body{
    height: 2000px;
}
body>div{
    width: 100px;
    height: 300px;
    border: 1px solid #666;
    background: #ccc;
    margin: 0 20px;
    position: absolute;
    top:60px;
    transition: top .6s ease;
}
.adsOnTheLeft{
    left: 20px;
}
.adsOnTheRight{
    right: 20px;
}

js
——————————————————————————————————————————————————————————————————————————————
$(function () {
    function move() {
        //保存当前滚动条高度
        var adsHeight = $(window).scrollTop();
        // 设置高度
        $(".adsOnTheLeft").offset({top:100+adsHeight});
        $(".adsOnTheRight").offset({top:100+adsHeight});
    }
    var setIn = window.setInterval(move,100)
});

JQuery对联广告的更多相关文章

  1. 自己写的一个jQuery对联广告插件

    效果图: 文件的位置摆放: 插件的代码: ;(function($){ $.extend({ dLAdv:function(options){ var defaults={ leftType:0,// ...

  2. JQuery实现广告效果（滚动切换）

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  3. [转]javascript对联广告、漂浮广告封装类，多浏览器兼容

    封装的JS方法: function $$(element){ if(arguments.length>1){ for(var i=0,elements=[],length=arguments.l ...

  4. jQuery手风琴广告展示插件

    效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...

  5. jQuery实现广告弹窗

    首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...

  6. javascript　完美解决对联广告

    javascript 完美解决对联广告 // function couplet(){ if(arguments.length>=1) this.objID = document.getEleme ...

  7. JQuery漂浮广告代码

    <!doctype html><html><head><meta charset="utf-8"><title>jque ...

  8. jquery.cookie广告弹窗点击关闭后一天弹一次

    jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  9. 10款jquery图片广告特效的预览及源码下载 改自[帅的相对论]

    原文格式有问题,我来排版了一下,分享给大家. 1.jQuery仿海尔官网全屏焦点图特效代码 Query仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效.当焦点图切换时,下方的三块 ...

随机推荐

  1. java constructor 在构造子类时，一定会调用到父类的构造方法 “ 私有属性被继承了？”问题

    ” Error:Implicit super constructor Pet() is undefined. Must explicitly invoke another constructor “ ...

  2. 集合用法笔记-Map用法

    一.Map遍历 Map<String, String> map = new HashMap<String, String>(); map.put("1", ...

  3. Centos 6.5 安装python3.6

    废话不多说,直接上步骤 wget https://www.python.org/ftp/python/3.6.2/Python-3.6.2rc1.tgz 进入 https://www.python.o ...

  4. docker~通过vs2017的Dockerfile来生成镜像

    回到目录 Dockerfile这个东西我们之前是介绍过,它方便,快捷,易用,而在vs2017中也对docker进行了支持,而生成docker image的方式就是有用Dockerfile为基础的,在添 ...

  5. CentOS7 搭建Ambari-Server，安装Hadoop集群（一）

    2017-07-05:修正几处拼写错误,之前没发现,抱歉! 第一次在cnblogs上发表文章,效果肯定不会好,希望各位多包涵. 编写这个文档的背景是月中的时候,部门老大希望我们能够抽时间学习一下Had ...

  6. Oozie时出现Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure？

    不多说,直接上干货! 问题详情 [hadoop@bigdatamaster oozie--cdh5.5.4]$ bin/ooziedb.sh create -sqlfile oozie.sql -ru ...

  7. 中国剩余定理（CRT）与欧拉函数[数论]

    中国剩余定理 ——!x^n+y^n=z^n 想必大家都听过同余方程这种玩意,但是可能对于中国剩余定理有诸多不解,作为一个MOer&OIer,在此具体说明. 对于同余方程: x≡c1(mod m ...

  8. guava缓存底层实现

    摘要 guava的缓存相信很多人都有用到, Cache<String, String> cache = CacheBuilder.newBuilder() .expireAfterWrit ...

  9. 【HTML】DocType

    一.docType是什么 <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 在 HTML 4.01 中,<!D ...

  10. 关于ALTERA生成IP核卡住

    最近搞fft,用的quartus13.1版本,发现quartus和modelism存在各种各样的坑啊,fftIP核大家可能也遇到过ip核 生成到一半就卡住的问题,之前我是通过换系统解决的,但是好景不长 ...