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中实现简单Formatter函数示例代码
Aug 19 Javascript
javascript截取字符串小结
Apr 28 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 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函数和特点
2013/08/08 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
动态表格Table类的实现
2009/08/26 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JsDom 编程小结
2011/08/09 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
python实现计算器简易版
2020/12/17 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
供电工程专业求职信
2014/08/09 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
python开发飞机大战游戏
2021/07/15 Python