手写js面向对象选项卡插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul{margin: 0;padding: 0;}
li{list-style: none;}
body{background: url("images/bg.jpg");}
#div1,#div4{width: 520px;background: rgba(0,255,255,0.6);height: 160px;overflow: hidden;
position: absolute;left: 200px;}
#div1 ul,#div4 ul{position: absolute;left: 10px;top: 10px;}
#div1 ul li,#div4 ul li{float: left;margin-right: 10px;width: 160px;height: 140px;
overflow: hidden;margin-bottom: 10px;}
#div2,#div3{width: 180px;background: rgba(0,255,255,0.6);height: 460px;overflow: hidden;
position: absolute;top:0px;left: 0px;}
#div2 ul,#div3 ul{position: absolute;left: 10px;top: 10px;}
#div2 ul li,#div3 ul li{width: 160px;height: 140px;
overflow: hidden;margin-bottom: 10px;}
#div4{bottom: 0;}
#div3{left: 740px;}
#scroll{width: 920px;height: 460px;position: relative;top: 130px;left: 50%;margin-left: -460px;}
#scroll h3{font-size: 50px;text-shadow:2px 2px 4px #f00,-2px -2px 4px #f0f,6px 6px 5px #ff0;
position: absolute;top: 50%;left: 50%;line-height:100px;height: 100px;
margin:-50px 0 0 -260px;color: rgba(255,255,255,0.6);
background: rgba(255,255,255,0.6);width: 520px;text-align: center;}
</style>
<script type="text/javascript">
function startScroll(id,dir,iSpeed){
var oUl=document.getElementById(id).getElementsByTagName('ul')[0];
oUl.innerHTML+=oUl.innerHTML;
if (dir=="left"||dir=="right") {
oUl.style.width=oUl.offsetWidth*2+"px";
}
else if(dir=="top"||dir=="bottom"){
oUl.style.top=oUl.offsetHeight*2+"px";
};
var oTimer=null;
oTimer=setInterval(fnScroll,30);
oUl.onmouseover=function(){
clearInterval(oTimer);
}
oUl.onmouseout=function(){
oTimer=setInterval(fnScroll,30);
}
function fnScroll(){
if (dir=="left"||dir=="right") {
if (oUl.offsetLeft<-oUl.offsetWidth/2) {
oUl.style.left=0;
};
if (oUl.offsetLeft>0) {
oUl.style.left=-oUl.offsetWidth/2+"px";
};
if (dir=="left") {
oUl.style.left=oUl.offsetLeft-Math.abs(iSpeed)+"px";
}else{
oUl.style.left=oUl.offsetLeft+Math.abs(iSpeed)+"px";
}
}
else if(dir=="top"||dir=="bottom"){
if (oUl.offsetTop<-oUl.offsetHeight/2) {
oUl.style.top=0;
};
if (oUl.offsetTop>0) {
oUl.style.top=-oUl.offsetHeight/2+"px";
};
if (dir=="top") {
oUl.style.top=oUl.offsetTop-Math.abs(iSpeed)+"px";
}else{
oUl.style.top=oUl.offsetTop+Math.abs(iSpeed)+"px";
}
}
}
}
window.onload=function(){
startScroll("div1","right",1);
startScroll("div2","top",1);
startScroll("div3","bottom",1);
startScroll("div4","left",1);
}
</script>
</head>
<body>
<div id="scroll">
<h3>手写JS无缝滚动插件</h3>
<div id="div1">
<ul>
<li><a href="javascript:;"><img src="data:images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="data:images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="data:images/3.jpg" alt=""></a></li>
</ul>
</div>
<div id="div2">
<ul>
<li><a href="javascript:;"><img src="data:images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="data:images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="data:images/3.jpg" alt=""></a></li>
</ul>
</div>
<div id="div3">
<ul>
<li><a href="javascript:;"><img src="data:images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="data:images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="data:images/3.jpg" alt=""></a></li>
</ul>
</div>
<div id="div4">
<ul>
<li><a href="javascript:;"><img src="data:images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="data:images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="data:images/3.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
</html>
效果图：
手写js面向对象选项卡插件的更多相关文章
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- cocos2dx手写js绑定C++
这两天连续查阅了js绑定c++的非常多文章 , 有手动与自己主动两种方式 . 本来想用自己主动绑定的 , 可是NDK一直下载不下来.....就给算了 . 以下总结一下手动绑定的实现过程 : 一共三步 ...
- 前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
- 手写js代码（一）javascript数组循环遍历之forEach
注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...
- js面向对象选项卡
window.onload=function() //面向对象 { var tab=new tabSwitch("div1"); var tab=new tabSwitch(&qu ...
- js 面向对象选项卡
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" conte ...
- 原生js面向对象编程-选项卡(点击)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS面向对象（1）——构造函数模式和原型模式
1.构造函数模式 构造函数用来创建特定的类型的对象.如下所示: function Person(name,age,job){ this.name=name; this.job=job; this.ag ...
随机推荐
- JGit与远程仓库链接使用的两种验证方式（ssh和https）
JGit是使用JAVA的API来操控Git仓库的库,由Eclipse公司维护.他提供的API分成两个层次,底层命令和高层命令.底层API是直接作用于低级的仓库对象,高层的API是一个面向普通用户级别功 ...
- [D3] 13. Cleaner D3 code with selection.call()
selection.call() method in D3 can aid in code organization and flexibility by eliminating the need t ...
- mongodb 学习笔记 09 -- shard分片
概述 shard 分片 就是 把不同的数据分在不同的server 模型 当中: 用户对mongodb的操作都是向mongs请求的 configsvr 用于保存,某条数据保存在哪个sha ...
- CSS hack常用方案（摘选）
邮箱因为默认了line-height?:170%,导致采用table元素时继承问题,可以采用line-height:50% 很好解决. 常 在使用float时,后面的显示不正常,因为继承了float了 ...
- 第八篇：web之前端踩的一些坑
前端踩的一些坑 前端踩的一些坑 本节内容 事件代理 清除标签的所有事件 bootstrap的模态框自定义方法 ajax在django里面实现post提交 ajax提交数据嵌套 1.事件代理 之前写 ...
- PS之放射背景
效果图 素材 新建图层,填充颜色 新建图层,矩形工具画条形 滤镜-扭曲-极坐标 合并图层,效果如下 新建图层,画一个适当的圆 滤镜-模糊-高斯模糊 将素材人物抠出来放在中间
- 关于try和finaly 里面return的问题
首先,下面这个方法调用: public int bbb(){ if(true){ return 3; } if(true){ return 4; } return 0; } 返回的结果是 :3 可见r ...
- 日文“表” php 会报错
php遇到很奇怪的问题,文字“表”会报错,并且是属于编译错误的问题. 单纯的输出: echo " 表 "; 会直接报错. 可是只要在中间加点东西,就可以解决这个问题,就算是空格都可 ...
- (转)asp.net基础-HttpModule
HttpModule是向实现类提供模块初始化和处置事件.当一个HTTP请求到达HttpModule时,整个ASP.NET Framework系统还并没有对这个HTTP请求做任何处理,也就是说此时对于H ...
- 面向报文（UDP）和面向字节流（TCP）的区别
转载:http://blog.csdn.net/wanghaobo920/article/details/11877589 面向报文(UDP)和面向字节流(TCP)的区别 面向报文的传输方式是应用层交 ...