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. 打造属于自己的支持版本迭代的Asp.Net Web Api Route

    在目前的主流架构中,我们越来越多的看到web Api的存在,小巧,灵活,基于Http协议,使它在越来越多的微服务项目或者移动项目充当很好的service endpoint. 问题 以Asp.Net W ...

  2. Java并发编程深入学习

    上周的面试中,被问及了几个并发开发的问题,自己回答的都不是很系统和全面,可以说是"头皮发麻",哈哈.因此果断购入<Java并发编程的艺术>一书,该书内容主要是对ifev ...

  3. HelloGitHub.com 网站开源了

    简介 随着 HelloGitHub 月刊持续更新了一年多,内容变的越来越多.因为内容数据没有结构化,如果还是使用之前的编辑文本的方式编辑月刊内容,会对后面的继续发刊和维护带来了很多问题和多余的工作,例 ...

  4. springmvc 前端 发ajax请求的几种方式

    一.传json单值或对象 1.前端 var data = {'id':id,'name':name}; $.ajax({ type:"POST", url:"user/s ...

  5. JavaScript中的设计模式：策略模式

    无论学习前端还是后端设计模式是作为一名程序员不可缺少的知识,就像下底传中对于一个边锋来说. 一.策略模式 策略模式给人的第一感觉就是在代码里面消除了很多if-else分支语句,比如一个求员工奖金的程序 ...

  6. Hadoop的配置过程（虚拟机中的伪分布模式）

    1引言 hadoop如今已经成为大数据处理中不可缺少的关键技术,在如今大数据爆炸的时代,hadoop给我们处理海量数据提供了强有力的技术支撑.因此,了解hadoop的原理与应用方法是必要的技术知识. ...

  7. Java设计模式学习笔记，一：单例模式

    开始学习Java的设计模式,因为做了很多年C语言,所以语言基础的学习很快,但是面向过程向面向对象的编程思想的转变还是需要耗费很多的代码量的.所有希望通过设计模式的学习,能更深入的学习. 把学习过程中的 ...

  8. 最近任务 && react文章列表

    最近任务 读书 数据分析 react深入学习 可视化大图 移动端入门 [React学习] 入门学习-文本渲染 http://www.cnblogs.com/huxiaoyun90/p/4783663. ...

  9. phpunit实践笔记

    phpunit成为单元测试的代名词已成为共识, 但很多在实际编写测试过程中遇到的很多问题通过手册.网上搜索都很难找到相关资料, 大部分都得通过查看源代码和实践的代码经验解决.欢迎大家拍砖.(在此之前请 ...

  10. [补档][Tvyj 1729]文艺平衡树

    [Tvyj 1729]文艺平衡树 题目 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结 ...