手写JS无缝滚动插件
2015-11-19 21:51
561 查看
<!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="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
</ul>
</div>
<div id="div2">
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
</ul>
</div>
<div id="div3">
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
</ul>
</div>
<div id="div4">
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
</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="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
</ul>
</div>
<div id="div2">
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
</ul>
</div>
<div id="div3">
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
</ul>
</div>
<div id="div4">
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
</html>
效果:
相关文章推荐
- 面向对象js瀑布流效果
- JS对象与json字符串格式转换实例
- Ajax与JSON的一些总结
- JavaScript编码风格
- jsp&servlet编码问题解决方法
- 轻量级的将NSDictionary, NSArray, NSString转换为JSON格式字符串的NSString类目
- 笔记:JavaScript高级程序设计(1)
- 习术-JS
- 习术-JS
- 使用jstack分析CPU消耗过高的问题
- 三维坐标系介绍与转换
- [Web前端]梳理JavaScript.1.概念
- hdu1142 dijstra + 记忆化搜索
- js 获取本地IP方法
- 如何用JSON数据来表示“张三的颜值很高”?
- jsoup 获取指定页面的所有链接(需后续完善)
- JavaScript闭包
- JSON数据格式简介
- jsoup入门
- ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据