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 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
用JQUERY增删元素的代码
Feb 14 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 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
JavaScript触发器详解
2007/03/10 Javascript
日期 时间js控件
2009/05/07 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
js 编写规范
2010/03/03 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
python连接MySQL数据库实例分析
2015/05/12 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
星球大战与Python之间的那些事
2016/01/07 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
python代码实现猜拳小游戏
2020/11/30 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
保险公司早会主持词
2014/03/22 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
yolov5返回坐标的方法实例
2022/03/17 Python
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技