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. LCS 算法实现

    动态规划算法 #include <iostream> #include <string.h> #include <algorithm> #include <m ...

  2. 通过ALM OTA API获取test case的信息，并上传测试结果到test set中

    ALM提供了OTA接口,可以用来获取和上传测试数据到ALM.比如获取Test case的step信息.上传测试结果到test instance. 在ALM的Help中可以下载相关文档,这里以ALM11 ...

  3. JS内置对象学习总结

    日期对象: 创建日期对象: var date=new Date();//创建日期对象 设置/返回年份方法: date.getFullYear(); date.setFullYear(); 返回星期的方 ...

  4. # .NET切面编程——PostSharp

    目录 概念 实现方式 .Net平台的切面实现 PostSharp示例 概念 Aspect-Oriented Programming(AOP):想想OOP是不是有些熟悉,AOP翻译过来的意思就是面向切面 ...

  5. Laravel安装及环境的配置（XAMPP集成开发环境下）

    Laravel 使用 Composer 来管理代码依赖.所以,在使用 Laravel 之前,请先确认你的电脑上安装了 Composer. 操作系统为win7: 集成开发环境XAMPP: 第一步:安装C ...

  6. Java List Remove时要注意的细节

    1.如果你是在遍历的时候去remove一个对象 for(int i = 0, length = list.size(); i<length; i++){} 这种遍历需要每次remove时,对i- ...

  7. Android之IPC（aidl）

    IPC(Inter-Process Conmunication) 进程间通讯 在同一进程中,各个组件进行通信是十分方便的,普通的函数调用就可以解决:但是,对于处于不同进程中的组件来说,要进行通信,就需 ...

  8. Ubuntu16.04修改内核启动

    写这篇文章一是为了对遇到同样问题的人提供一个参考,二来也是为了自己便于总结和查阅.希望大神勿喷. 好了,废话不多说了,转入正题. 前几天给自己的电脑装了个Ubuntu16.04LTS,自己顺手就把里边 ...

  9. 【转载】CANoe 入门 Step by step系列（二）CAPL编程

    来源:http://www.cnblogs.com/dongdonghuihui/archive/2012/09/26/2704619.html CAPL就是Communication Applica ...

  10. (转)AJax跨域：No 'Access-Control-Allow-Origin' header is present on the requested resource

    在本地用ajax跨域访问请求时报错: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ori ...