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 Flash插入函数免激活代码
Mar 31 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
AngularJS内置指令
Feb 04 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php三元运算符知识汇总
2015/07/02 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
js实现批量删除功能
2020/08/27 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python3实现高效的端口扫描
2019/08/31 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
Python阶乘求和的代码详解
2020/02/14 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
两年的个人工作自我评价
2014/01/10 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
环保小标语
2014/06/13 职场文书