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列举css中所有图标的实现代码
Jul 04 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
Javascript执行上下文顺序的深入讲解
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
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
Python中static相关知识小结
2018/01/02 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
优秀党支部书记事迹材料
2014/05/29 职场文书
鼓舞士气的口号
2014/06/16 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
个人维稳承诺书
2015/05/04 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
《植树问题》教学反思
2016/03/03 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Python实战之OpenCV实现猫脸检测
2021/06/26 Python