jQuery 浮动广告实现代码


Posted in Javascript onDecember 25, 2008

实现方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>浮动广告</title> 
<style type="text/css"> 
#qqonline{ 
background-color:red; 
border: 1px solid #fcc; 
position:absolute; 
top:100px; 
left:16px; 
width:100px; 
height:120px; 
} 
#qqonline1{ 
background-color:red; 
border: 1px solid #fcc; 
position:absolute; 
top:100px; 
right:16px; 
width:100px; 
height:120px; 
} 
</style> 
<script src="../js/jquery-1.2.6.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(this).scroll(function() { // 页面发生scroll事件时触发 
var bodyTop = 0; 
if (typeof window.pageYOffset != 'undefined') { 
bodyTop = window.pageYOffset; 
} 
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') 
{ 
bodyTop = document.documentElement.scrollTop; 
} 
else if (typeof document.body != 'undefined') { 
bodyTop = document.body.scrollTop; 
} 
$("#qqonline").css("top", 100 + bodyTop) // 设置层的CSS样式中的top属性, 注意要是小写,要符合“标准” 
$("#qqonline").text(bodyTop); // 设置层的内容,这里只是显示当前的scrollTop 
$("#qqonline1").css("top", 100 + bodyTop) 
$("#qqonline1").text(bodyTop); 
}); 
</script> 
</head> 
<body style="height:1800px"><!-- 给BODY加个样式,让页面出现滚动条 --> 
<form id="form1" runat="server"> 
</form> 
<div id="qqonline"> 
QQ在线服务 
</div> 
<div id="qqonline1"> 
QQfsdf在线服务 
</div> 
</body> 
</html>

基于jquery的 浮动广告 控制代码 最近接触jquery,学了点皮毛,为了满足boss的需求弄了个相对屏幕静止的浮动层,把代码记在这里,以防自己以后用到

下面是jquery代码,需要jquery类库的支持才能运行,我写文章的时候jquery的版本是1.3.2,不保证其他的版本能完美运行,代码的基本原理写在注释里,如果你看不懂,那么你需要补充javascript和jquery的基本知识,不用太多,因为我写这个的时候也不会什么....

$(document).ready(function(){
$(window).scroll( function() { //这个函数可以监视浏览器滚动条,只要滚动条一移动,此函数就触发
var diffY = $(window).scrollTop();//页面现在的位置和滚动条顶端的距离[scrollTop()]
var diffH = $(window).height()/4;//设计者期望的浮动栏与浏览器顶端的距离[height()],这里是与浏览器顶端保持1/4个页面的高度,如果diffH的值设置成0,浮动栏就会落在屏幕顶端
var percent=diffY+diffH; //percent将被赋值给css中的"top"属性,作为浮动栏的新高度值
if(percent<0){ //判断percent的值是否小于0,小于0就凑整,大于0就忽略小数部分
percent=Math.ceil(percent);
}else{
percent=Math.floor(percent); //取整
var v = percent+"px"; //css的属性需要一个单位,这里是px
$("#adright").css("top",v);//percent被赋值给top属性,浏览器根据这个值动态的调整浮动栏的高度,如果按照上面给的代码,这个高度将正好让浮动栏一直保持在屏幕中央
}
});

///////////////////////////////////////////// JS和HTML 的分割线 /////////////////////////////////////////////////////////////////////

下面是HTML代码,只要把这部分放在HTML页面中就行了,动态页面php,jsp,asp等应该也没问题.....我是放在页面尾部</body>的上方的,想放图片,文字,flash就放在<div>XXXX</div>中的XXXX位置就可以了,如果想浮动在页面左面,就把right:25px;改成left:25px;

<div id="adright" style = "right:25px; position:absolute; top:200px;"><a href="https://3water.com">三水点靠木</a></div>

Javascript 相关文章推荐
jquery isType() 类型判断代码
Feb 14 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
jQuery 操作XML入门
Dec 25 #Javascript
jQuery 动画基础教程
Dec 25 #Javascript
javascript jQuery插件练习
Dec 24 #Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 #Javascript
javascript 网页跳转的方法
Dec 24 #Javascript
javascript prototype,executing,context,closure
Dec 24 #Javascript
JavaScript 事件参考手册
Dec 24 #Javascript
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
jquery 指南/入门基础
2007/11/30 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
javascript操作cookie
2017/01/17 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
浅析TypeScript 命名空间
2020/03/19 Javascript
用JS实现选项卡
2020/03/23 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
在python image 中实现安装中文字体
2020/05/16 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
大学生年度自我鉴定
2013/10/31 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
战友聚会邀请函
2014/01/18 职场文书
护理专业自荐书
2014/06/04 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
小平您好观后感
2015/06/09 职场文书
中秋节随笔
2015/08/15 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
MySQL 原理与优化之Update 优化
2022/08/14 MySQL