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 NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
前端如何实现动画过渡效果
Feb 05 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP脚本的10个技巧(4)
2006/10/09 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python通过post提交数据的方法
2015/05/06 Python
Python OS模块常用函数说明
2015/05/23 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
python操作yaml说明
2020/04/08 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
草船借箭教学反思
2014/02/03 职场文书
会计自荐信范文
2014/03/09 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
消费者理赔投诉书
2015/07/02 职场文书
领导离职感言
2015/08/03 职场文书