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 迁移到Android studio
步骤: 1.安装 android-studio-bundle-143.2915827-windows https://developer.android.com/studio/install.html ...
- POJ 2152 fire / SCU 2977 fire（树型动态规划）
POJ 2152 fire / SCU 2977 fire(树型动态规划) Description Country Z has N cities, which are numbered from 1 ...
- pc端的企业网站（IT修真院test8）详解1-2
今天接着说test8的页面还原. 头部header和尾部footer 我一开始是想直接使用bootstrap的栅格系统来实现的.但是内容的定位出了不少麻烦. 那么就索性用原生html+css来还原页面 ...
- 为何你跟着滴滴D8级前端大神撸代码，技术却依旧原地踏步？
引子 听说最近有很多小伙伴,热衷于在慕课网上学习各种前端实战教程,并以完成项目为奋斗目标.比如本文接下来要提到的<Vue2.0高级实战之开发移动端音乐App>,这门课程的传授者是来自滴滴D ...
- WIN10下设置惠普HP1050等打印机打印颜色，只打黑白或彩色
今天同事问了一个问题,如何在WIN10下,设置惠普打印机只打印黑白, 上网搜了下,没有找到任何信息,只有在WIN8前系统设置的内容,经过几番折腾,得出此文. WIN10下设置惠普HP1050等打印机打 ...
- Android-重新包装Toast，自定义背景
Android-重新包装Toast,自定义背景 2016-4-27 Android L 算是包装了一个自己使用的小工具. 使用Toast的目的是弹一个提示框.先看一下Toast.makeText方法. ...
- 富文本编辑器UEditor自定义工具栏（一、基础配置与字体、背景色、行间距、超链接实现）
导读:UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,功能强大,可定制,是一款优秀的国产在线富文本编辑器,编辑器内可插入图片.音频.视频等. 一.UEditor自定义 ...
- 计时器C#
用于测某一方法执行所用的时间: Stopwatch sw = new Stopwatch(); sw.Start(); //功能代码块 sw.Stop(); long totalTime = sw.E ...
- centos中安装mysql
一.首先输入指令 rpm -qa|grep mysql 检查操作系统中是否已经安装了MySQL 可以通过 yum list | grep mysql 命令来查看yum上提供的mysql数据库可下载的版 ...
- css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）
1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...