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. JavaWeb 后端 <十二> 之 过滤器 filter 乱码、不缓存、脏话、标记、自动登录、全站压缩过滤器

    一.过滤器是什么?有什么? 1.过滤器属于Servlet规范,从2.3版本就开始有了. 2.过滤器就是对访问的内容进行筛选(拦截).利用过滤器对请求和响应进行过滤

  2. 利用Python实现一个感知机学习算法

    本文主要参考英文教材Python Machine Learning第二章.pdf文档下载链接: https://pan.baidu.com/s/1nuS07Qp 密码: gcb9. 本文主要内容包括利 ...

  3. Azkaban使用简单笔记

    官方文档:http://azkaban.github.io/ Azkaban主要的组成:1. 关系型数据库--MySQL2. AzkabanWebServer3. AzkabanExcutorServ ...

  4. 51nod_1265:四点共面（计算几何）

    题目链接 设四点为a_0~3,若共面则 (a1a0*a2a0)·a3a0=0 #include<iostream> #include<cstdio> #include<c ...

  5. iOS图解多线程

    前言 多线程一直是iOS开发中重中之重的话题,无论是面试还是真正在公司中进行业务开发,都会经常使用到多线程来开发.笔者在简书上看到一张图,记录的是多线程的相关知识,笔者认为这是非常好的,推荐给大家: ...

  6. jmeter断言：断言条件之间是“或”的关系

    有时,我们在做断言时,需要同时满足一系列条件,这在jmeter自带响应断言中已经实现: 有时,同一请求在不同时间,返回的响应是不同的,而这都是正确的响应,也就是说,我们判断的条件之间是或的关系,此时, ...

  7. python开发部署时新增数据库中表的方法

    在项目版本让运维部署时,涉及到数据库表的增加问题,想了一下,可以有四种方法 1.使用SQLAlchemy的db.create_all()方法 # -*- coding:utf-8 -*- from f ...

  8. Android性能测试——Allocation Tracker(Device Monitor)

    Android性能测试--Allocation Tracker(Device Monitor) Allocation Tracker 能做什么? 追踪内存分配信息,按顺序排列,这样我们就能清晰看出来某 ...

  9. JAVA二维数组的复制

    JAVA二维数组的复制 笔者今天做一道ccf题目时,遇到要将二维数组拷贝复制时,没有用常规的那种一个一个数的复制,用的是System.arraycopy()来进行复制,下面介绍这个函数的一些注意点: ...

  10. 小程序server-实现会话层

    小程序server-实现会话层开发教程: 1.安装MongoDB #安装 MongoDB及其客户端命令行工具 yum install mongodb-server mongodb -y #查看版本 m ...