js或css实现滚动广告的几种方案


Posted in Javascript onJanuary 28, 2010

在触发js的scroll事件啊,可是我遇到的是真正不动的,我开始以为是FF上面才会这样,没想到IE6和IE7都有如此效果,不得不惊叹神奇了。
如是我就找出了如下神奇的代码:仅用CSS实现滚动效果~~
#fixed{position:fixed;}

<div id="fixed">滚动</div>

完了,就这个属性就搞定滚动了,真想骂人了。不过还没完呢,这个只支持火狐和IE7,我刚才说过IE6也可以的,只是IE6要实现就有点复杂了,

<!--[if IE]> 
<style type="text/css"> 
* html #fixed{position:absolute;right:1px;top:expression_r(eval_r(document.body.height + 500));} 
* html{overflow:hidden;} 
* html body{height:100%;overflow:auto;} 
* html #fixed{right:17px;top:5em;} 
* html #fixed{right :1px;top :expression_r(eval_r(document.body.height + 500));} 
</style> 
<![endif]-->

这个我也没太看是什么意思。也好像是CSS,不过应该也算有脚本了吧!?也许有人知道可以告诉大家,分享一下。
既然我的标题是实现滚动的N种方法的话,肯定不只是这两种了。好像CSS的还有其他写法,我就不一一列举了,我主要是想告诉大家比较常用的JS实现方式,我的网站有用到一段代码,也是网上找的,不过有个不好的地方就是它是相对顶部的,也就是你的网页高度不够就会出现拉不到底的情况,其实百度留言也会出现这种状况的,我就不多说了,先贴出来大家看看:
lastScrollY=0; 
function heartBeat(){ 
var diffY; 
if (document.documentElement && document.documentElement.scrollTop) 
diffY = document.documentElement.scrollTop; 
else if (document.body) 
diffY = document.body.scrollTop 
else 
{} 
percent=.1*(diffY-lastScrollY); 
if(percent>0)percent=Math.ceil(percent); 
else percent=Math.floor(percent); 
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px"; 
(document.getElementById("lovexin12").style.top)+percent+"px"; lastScrollY=lastScrollY+percent; 
} 
window.setInterval("heartBeat()",1);

有兴趣的话大家可以把上面的改成相对于底部,这样会好很多。
最近一直在看js库,比较感兴趣的jquery还是很不错的,所以呢~,现在再来贴一个用jquery来实现滚动的代码,比上面这个感觉要好很多。不过也只是个选择,没有必要可以不用,必竟jquery的代码也有几十KB的。
$(document).ready(function(){ if($.browser.msie && $.browser.version == 6) { 
FollowDiv.follow(); 
} 
}); 
FollowDiv = { 
follow : function(){ 
$('#cssrain').css('position','absolute'); 
$(window).scroll(function(){ 
var f_top = $(window).scrollTop() + $(window).height() - $("#cssrain").height() - parseFloat($("#cssrain").css("borderTopWidth")) - parseFloat($("#cssrain").css("borderBottomWidth")); 
$('#cssrain').css( 'top' , f_top ); 
}); 
} 
}

好了,就说到这吧!!有什么不明白的可以提出来!讨论才会有进步~!欢迎大家加入我的QQ群,大家共同学习进步.群号:5678537
Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
js实现返回顶部效果
Mar 10 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
node实现基于token的身份验证
Apr 09 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 #Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 #Javascript
jquery 常用操作方法
Jan 28 #Javascript
jquery 经典动画菜单效果代码
Jan 26 #Javascript
使用JQuery进行跨域请求
Jan 25 #Javascript
javascript 的Document属性和方法集合
Jan 25 #Javascript
起点页面传值js,有空研究学习下
Jan 25 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
犀利的js 函数集合
2009/06/11 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
javascript制作2048游戏
2015/03/30 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue实现评论列表功能
2019/10/25 Javascript
Python描述器descriptor详解
2015/02/03 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
销售人员个人求职信
2013/09/26 职场文书
领班岗位职责范文
2014/02/06 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
社区国庆节活动总结
2015/03/23 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
golang slice元素去重操作
2021/04/30 Golang
php png失真的原因及解决办法
2021/10/24 PHP
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers