手写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 ...
- 前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 放弃antd table，基于React手写一个虚拟滚动的表格
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...
- liMarquee – jQuery无缝滚动插件（制作跑马灯效果）
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
- js无缝滚动原理及详解[转自刹那芳华]
刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...
- JS鼠标滚动插件scrollpath使用介绍
JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...
- 一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
随机推荐
- Python 3语法小记（六）条件、循环和assert、pass、del
条件: if 条件: 语句块 elif: 语句块 else: 语句块 elif 表示 else if 这居然是合法的!!!1 < x < 2!!! >> ...
- 【转】Android Studio 的小小配置
这篇博文的内容列表: 1.编辑器的字体设置 2.预览XML布局 3.导入项目 4.显示行号 5.新建Java类和Component的子类 额~~程序猿一般话都不多,嘿嘿,那咱就直接图文吧~ ^_^ ...
- 基于物联网技术和RFID电子客票的铁路自己主动检票机
前言: RFID电子客票具有检阅速度快.信息量大.安全性高和高速物理定位的独特优势,随着标准的统一和成本的减少,它在铁路上有着巨大的应用前景,同一时候鉴于车站对物联网化的需求,我们设想出新一代的检票机 ...
- Java大数类介绍
java能处理大数的类有两个高精度大整数BigInteger 和高精度浮点数BigDecimal,这两个类位于java.math包内,要使用它们必须在类前面引用该包:import java.math. ...
- mysql日期时间函数2
win7可以设定每周从哪一天开始,win2003等不能方便的修改.有的是周日开始,有的是周一开始.而工作中有的时候每周是从周六开始算的,有些数据需要按周统计,那么那种方式比较好呢? 通过下面的研究 ...
- spring注解：@PostConstruct和@PreDestroy
关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...
- burp
http://www.2cto.com/Article/201406/310929.html
- Python实战：Python爬虫学习教程，获取电影排行榜
Python应用现在如火如荼,应用范围很广.因其效率高开发迅速的优势,快速进入编程语言排行榜前几名.本系列文章致力于可以全面系统的介绍Python语言开发知识和相关知识总结.希望大家能够快速入门并学习 ...
- android studio或者IntelliJ代码样式的设置
使用过程中发现了一些与Eclipse不同的地方,在这里提供一些设置方法 1. Backspace会将开头的空格和换行符一并删除,如果要禁用 Settings -> Editor -> ...
- c语言学习之基础知识点介绍（六）：if和switch结构
本节主要说c语言中的分支结构. c语言中分支结构有两大类:一种是if,一种是switch. 一.if结构 //if结构,语法: //第一种: if(表达式){ //语句块 } //第二种: if(表达 ...