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 相关文章推荐
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
使用vue-cli导入Element UI组件的方法
May 16 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
PHP教程 预定义变量
2009/10/23 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
python绘制动态曲线教程
2020/02/24 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
中学教师管理制度
2014/01/14 职场文书
回门宴父母答谢词
2014/01/26 职场文书
2014国培学习感言
2014/03/05 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
导游词之山海关
2019/12/10 职场文书