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 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
jQuery 联动日历实现代码
May 31 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
7个jQuery最佳实践
Jan 12 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
JS实现select选中option触发事件操作示例
Jul 13 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学习教程之第1天
2008/06/15 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
python中尾递归用法实例详解
2015/04/28 Python
python 读入多行数据的实例
2018/04/19 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
采购部岗位职责
2013/11/24 职场文书
syb养殖创业计划书
2014/01/09 职场文书
yy结婚证婚词
2014/01/10 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
保密工作整改报告
2014/11/06 职场文书
2014年团委工作总结
2014/11/13 职场文书
小学英语复习计划
2015/01/19 职场文书
大足石刻导游词
2015/02/02 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
如何在C++中调用Python
2021/05/21 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis