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传值 判断
Oct 26 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
Vue实现简单的留言板
Oct 23 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
zf框架db类的分页示例分享
2014/03/14 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
Python3实现生成随机密码的方法
2014/08/23 Python
python中的字典详细介绍
2014/09/18 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python判断有效的数独算法示例
2019/02/23 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
pytorch中index_select()的用法详解
2021/01/06 Python
css3 transform属性详解
2014/09/30 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
我的求职择业计划书
2014/04/04 职场文书
作风转变心得体会
2014/09/02 职场文书
个人合伙协议书范本
2014/10/14 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
法定授权委托证明书
2015/06/18 职场文书