手写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 ...
随机推荐
- I2C和SCCB协议的小区别和误区
I2C采用的是7位地址数据,首字节最低位代表读写位,第二字节SUB寄存器高位为1表示自动加subaddress SCCB采用的是8位地址数据,比如0x42,B01000010 使用I2C协议时,第一次 ...
- asp.net mvc 两级分类联动方法示例
前台视图代码 <%:Html.DropDownList("AwardClassMainID","请选择")%> <%:Html.DropDow ...
- C# 动态创建出来的窗体间的通讯 delegate2
附件:http://files.cnblogs.com/xe2011/CSharp_WindowsForms_delegate02.rar 窗体2 和窗体3 都是动态创建出来的 现在 FORM3.TE ...
- Linux Kernel 排程機制介紹
http://loda.hala01.com/2011/12/linux-kernel-%E6%8E%92%E7%A8%8B%E6%A9%9F%E5%88%B6%E4%BB%8B%E7%B4%B9/ ...
- WIN32 根据程序名(映像名称)终止外部程序
场景: 1.有时候需要调用外部程序,但是外部程序有可能崩溃挂起,这样这个进程就没法结束,所以再在下次调用前需要先结束之前调用的. 2.没考虑到权限问题,应该是只能终止当前用户启动的进程. #inclu ...
- 我的 ubuntu 12.04.2修复Grub
网上有很多…… 首先我做了U盘启动,然后进入LiveCD模式. 输入grub,提示说要重新安装,好了,那就安装吧,连好网,sudo apt-get install grub 安装成功后,sudo -i ...
- Cracking the coding interview
写在开头 最近忙于论文的开题等工作,还有阿里的实习笔试,被虐的还行,说还行是因为自己的水平或者说是自己准备的还没有达到他们所需要人才的水平,所以就想找一本面试的书<Cracking the co ...
- Linux下安装并破解StarUML
下载 官网地址: http://starumlreleases-7a0.kxcdn.com/v2.7.0/StarUML-v2.7.0-64-bit.deb CSDN: http://download ...
- 防御SQL注入的方法总结
这篇文章主要讲解了防御SQL注入的方法,介绍了什么是注入,注入的原因是什么,以及如何防御,需要的朋友可以参考下 SQL 注入是一类危害极大的攻击形式.虽然危害很大,但是防御却远远没有XSS那么困难 ...
- Unity5.0 手动激活
提供Unity5.0.1.f1(32-bit)下载http://pan.baidu.com/s/1bg5sDK 密码 ns75 有时候会发现,用激活工具是激活不了的,这个时候就要手动激活,其实个人觉得 ...