Js特效--模仿滚动条(兼容IE8+,FF,Google)
2016-03-15 17:01
246 查看
<html>
<head>
<style>
*{margin:0px;padding:0px;}
#box{width:200px;height:500px;position:fixed;top:50px;left:200px;border:1px solid #000; overflow:hidden; }
#box2{position:absolute;left:0px;top:0px;width:200px;height:720px;border:1px solid #000;}
</style>
</head>
<body>
<div id="box">
<div id="box2">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
</div>
</div>
<script>
var box2=document.getElementById("box2");
var box=document.getElementById("box");
//非火狐
var scrollFn=function(e){
var e=e||window.event;
var down=true;
down=e.wheelDelta?e.wheelDelta<0:e.detail>0;
if(down){ //不管ff还是其他浏览器,确定方向向下
if(box2.offsetTop<0){
box2.style.top=box2.offsetTop+10+"px";
}else{ box2.style.top=0+"px";}
}else{ //方向向上
if(box.offsetTop-box2.offsetTop<220){
box2.style.top=box2.offsetTop-10+"px";
}else{
box2.style.top=-220+"px";
}
}
}
//为指定dom对象指定事件响应类型并绑定函数
function addEvent(obj,xEvent,fn) {
if(obj.attachEvent){
obj.attachEvent('on'+xEvent,fn);
}else{
obj.addEventListener(xEvent,fn,false);
}
}
addEvent(box,'mousewheel',scrollFn);
addEvent(box,'DOMMouseScroll',scrollFn); //兼容火狐语句
</script>
</body>
</html>
<head>
<style>
*{margin:0px;padding:0px;}
#box{width:200px;height:500px;position:fixed;top:50px;left:200px;border:1px solid #000; overflow:hidden; }
#box2{position:absolute;left:0px;top:0px;width:200px;height:720px;border:1px solid #000;}
</style>
</head>
<body>
<div id="box">
<div id="box2">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
</div>
</div>
<script>
var box2=document.getElementById("box2");
var box=document.getElementById("box");
//非火狐
var scrollFn=function(e){
var e=e||window.event;
var down=true;
down=e.wheelDelta?e.wheelDelta<0:e.detail>0;
if(down){ //不管ff还是其他浏览器,确定方向向下
if(box2.offsetTop<0){
box2.style.top=box2.offsetTop+10+"px";
}else{ box2.style.top=0+"px";}
}else{ //方向向上
if(box.offsetTop-box2.offsetTop<220){
box2.style.top=box2.offsetTop-10+"px";
}else{
box2.style.top=-220+"px";
}
}
}
//为指定dom对象指定事件响应类型并绑定函数
function addEvent(obj,xEvent,fn) {
if(obj.attachEvent){
obj.attachEvent('on'+xEvent,fn);
}else{
obj.addEventListener(xEvent,fn,false);
}
}
addEvent(box,'mousewheel',scrollFn);
addEvent(box,'DOMMouseScroll',scrollFn); //兼容火狐语句
</script>
</body>
</html>
相关文章推荐
- Ext两个jsp页面共享设置对象,属性
- js获取随机数
- js原型链的理解
- JavaScript原型学习笔记
- js封常用类
- JSP自定义标签案例分析
- JS中offsetTopclientTop、scrollTop、offsetTop
- Hibernate+JSP+Servlet应用(OpenSessionInView模式)
- seaJS 简单上手
- JSP自定义标签基础知识学习
- JavaScript中的关键字之prototype的使用
- JavaScript EXT 创建一个 form 表单并提交
- megapix-image插件 使用Canvas压缩图片上传 MegaPixImage.js下载
- 最简单的JSP 文件
- js自定义函数时间显示(重构时间函数)
- js遍历拼接list集合对象,JSONArray数组
- js 截取某个字符前面或者后面的字符串
- JSP的九大内置对象
- javascript实现html延时按钮
- doT.js 爱好者