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两行代码按指定格式输出日期时间
Oct 21 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
jQuery中的select操作详解
Nov 29 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
d3.js实现立体柱图的方法详解
Apr 28 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP学习资料汇总与网址
2007/03/16 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
电视节目策划方案
2014/05/16 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
政工师工作总结2015
2015/05/26 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android