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 相关文章推荐
js里怎么取select标签里的值并修改
Dec 10 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 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常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
chrome调试javascript详解
2015/10/21 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
pandas重新生成索引的方法
2018/11/06 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python常用运维脚本实例小结
2020/02/14 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
县级文明单位申报材料
2014/05/23 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
教师个人培训总结
2015/02/11 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android