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 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JS功能代码集锦
May 04 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php jsonp单引号转义
2014/11/23 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php简单实现数组分页的方法
2016/04/30 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python获取网页上图片下载地址的方法
2015/03/11 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
自荐信包含哪些内容
2013/10/30 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
亮剑观后感
2015/06/05 职场文书