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高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
Python import与from import使用及区别介绍
2018/09/06 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python PIL图片添加字体的例子
2019/08/22 Python
解决Python3下map函数的显示问题
2019/12/04 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
教师工作失职检讨书
2014/09/18 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js