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. 使用C#在VS中开发：未处理AccessViolationException “System.AccessViolationException”类型的未经处理的异常

    未处理AccessViolationException: “System.AccessViolationException”类型的未经处理的异常在System.Data.dll中发生 其他信息:尝试读 ...

  2. 性能百万/s：腾讯轻量级全局流控方案详解

    WeTest 导读 全新的全局流控实现方案,既解决了目前流控的实现难点,同时保证运行稳定且流控准确的前提下,实现更简单,部署成本更低,容灾能力更强. 该方案组件化之后,可以推广到别的有需要的部门使用, ...

  3. Socket通信中的 BeginReceive与EndReceive

    BeginReceive 与endReceive 必须成对出现,如果BeginReceive没有及时调用endReceive,可能会出现数据被从buffer中读取二次,如果在下面这行代码下面加入别的代 ...

  4. Vue2.0 生产环境部署

    简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一. ...

  5. CentOS7.3虚拟机双网卡配置

    笔者在学习和工作中经常要用到linux,专门装一个linux主机固然可以,但是毕竟还要用到windows,解决的办法就是用vmware来搭建linux虚拟机.关于linux虚拟机上网的问题,笔者写过很 ...

  6. maven-编译速度优化

    故障描述: 公司搭建了一个新jenkins持续集成环境,jenkins构建job时间越来越长. 原因分析: 系统CPU限制:判断依据,构建中查看日志 tail -f /var/log/messages ...

  7. 设计模式的征途—16.访问者（Visitor）模式

    在患者就医时,医生会根据病情开具处方单,很多医院都会存在以下这个流程:划价人员拿到处方单之后根据药品名称和数量计算总价,而药房工作人员根据药品名称和数量准备药品,如下图所示. 在软件开发中,有时候也需 ...

  8. 转载：vs2010 问题 >LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    原文链接:http://www.cnblogs.com/newpanderking/articles/3372969.html >LINK : fatal error LNK1123: 转换到 ...

  9. Redis-误操作尝试恢复

    如果不小心使用了flushall把全部数据清楚怎么办 127.0.0.1:6379> set site www.google.com OK 127.0.0.1:6379> set addr ...

  10. 消息队列中间件 RocketMQ 源码分析 —— Message 存储