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实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
javascript if条件判断方法小结
May 17 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
react使用CSS实现react动画功能示例
May 18 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
单位速度在实战中的运用
2020/03/04 星际争霸
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php使用GeoIP库实例
2014/06/27 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
Js sort排序使用方法
2011/10/17 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
python中threading超线程用法实例分析
2015/05/16 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
利用python实现逐步回归
2020/02/24 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
幸福家庭标语
2014/06/27 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
索赔员岗位职责
2015/02/15 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python