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 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
深入探究node之Transform
Jul 20 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 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
php实现网站插件机制的方法
2009/11/10 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
python实现决策树分类算法
2017/12/21 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
详解Python高阶函数
2020/08/15 Python
如何启动时不需输入用户名与密码
2014/05/09 面试题
高中化学教学反思
2014/01/13 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
浅谈JavaScript作用域
2021/12/06 Javascript