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 相关文章推荐
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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
深入了解php4(2)--重访过去
2006/10/09 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
loading动画特效小结
2017/01/22 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
numpy自动生成数组详解
2017/12/15 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
Python中new方法的详解
2019/01/15 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
详解Python流程控制语句
2020/10/28 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
几个SQL的面试题
2014/03/08 面试题
拾金不昧的表扬信
2014/01/16 职场文书
幼儿园门卫制度
2014/01/29 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
Java实现简单小画板
2022/06/10 Java/Android