JQuery对联广告
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对联广告的更多相关文章
- 自己写的一个jQuery对联广告插件
效果图: 文件的位置摆放: 插件的代码: ;(function($){ $.extend({ dLAdv:function(options){ var defaults={ leftType:0,// ...
- JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...
- [转]javascript对联广告、漂浮广告封装类，多浏览器兼容
封装的JS方法: function $$(element){ if(arguments.length>1){ for(var i=0,elements=[],length=arguments.l ...
- jQuery手风琴广告展示插件
效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...
- jQuery实现广告弹窗
首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...
- javascript 完美解决对联广告
javascript 完美解决对联广告 // function couplet(){ if(arguments.length>=1) this.objID = document.getEleme ...
- JQuery漂浮广告代码
<!doctype html><html><head><meta charset="utf-8"><title>jque ...
- jquery.cookie广告弹窗点击关闭后一天弹一次
jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- 10款jquery图片广告特效的预览及源码下载 改自[帅的相对论]
原文格式有问题,我来排版了一下,分享给大家. 1.jQuery仿海尔官网全屏焦点图特效代码 Query仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效.当焦点图切换时,下方的三块 ...
随机推荐
- Eclipse添加struts2
参照:http://jingyan.baidu.com/article/915fc414fd94fb51394b208e.html 一.插件下载:http://struts.apache.org/do ...
- vue2.0设置proxyTable使用axios进行跨域请求
这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vue ...
- mysql表生成JavaBean
MySQLToBean.java package org.just.util; import java.io.File; import java.io.FileInputStream; import ...
- js&jquery跨域详解jsonp，jquery并发大量请求丢失回调bug
URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...
- FineBI如何在web页面中嵌入式集成
1. API嵌入集成 1.1 描述 FineBI是基于B/S架构的浏览器/服务器模式,现在用户开发的系统基本上趋向于B/S架构的浏览器/服务器模式,因此有些页面完全可以直接采用web页面嵌入式集成的简 ...
- 简单好用用js就可以保存文本文件到本地
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Ubuntu安装桌面环境
1.安装Ubuntu默认的Gnome桌面: sudo apt-get install ubuntu-desktop 2.不安装默认组件,例如Evolution和OpenOffice: sudo apt ...
- 玲珑杯 Round #11 （1001 1004 1007）
比赛链接 直接贴代码.. #include<bits/stdc++.h> using namespace std; typedef long long LL; int main() { L ...
- (转)Java多线程编程总结
------------------------------------------------------------------------------------------------- ...
- Java 期末考试
一: 题目:打印出100-999之间所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身. 例如:153是一个"水仙花 ...