js或css实现滚动广告的几种方案
更新时间：2010年01月28日 22:09:32 作者：
今天无事逛网，突然发现了一个很有趣的事情，（也许只有我觉得有趣）.我看到一图片竟然在我拖动滚动条的时候没有动，也许你会说我少见多怪，不信你去找个这样的我看看，很少有的，一般的都是一拖动图片就在那跳得厉害。
在触发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
如是我就找出了如下神奇的代码：仅用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 for in的缺陷总结的相关资料,需要的朋友可以参考下2017-02-02
如何快速的呈现我们的网页的技巧整理...2007-07-07
Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。本文给大家介绍BootStrap轮播插件使用详解，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
点击a标签的时候给其换背景的方法有很多，在本文将为大家介绍下js是如何实现的，感兴趣的朋友不要错过2013-10-10
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
这篇文章主要介绍了JavaScript(js)处理的HTML事件、键盘事件、鼠标事件,结合实例形式分析了JavaScript针对HTML事件、键盘事件及鼠标事件的简单处理方法,需要的朋友可以参考下2019-11-11
由于各浏览器的js实现不同，因此各浏览器的原生对象（这里不涉及DOM实现，当然这也有区别）的原生方法也不尽相同，采用原生方法的好处显而易见，使用兼有效率，而且其中有些方法可能包含在以后的ECMAscript规范中2011-11-11
本文主要介绍了提高数据访问速度的方法，具有很好的参考作用，需要的朋友一起来看下吧2016-12-12
这篇文章主要为大家详细介绍了JavaScript canvas实现字符雨效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了JS实现点击按钮获取页面高度的方法,涉及JavaScript针对页面元素高度的各种常见运算,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要为大家详细介绍了JavaScript实现页面无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论