原生JS实现跑马灯效果


Posted in Javascript onFebruary 20, 2017

效果如下:(动态效果可复制代码查看,案例中的图片可自行选择添加)

原生JS实现跑马灯效果

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
 margin:0;
 padding:0;
 list-style: none;
 }
 div{
 position: relative;
 width: 800px;
 height: 200px;
 border: 5px solid lightgreen;
 margin:10px auto;
 overflow: hidden;
 }
 div ul{
 position: absolute;
 left:0;
 top:0;
 }
 div ul li{
 width: 200px;
 height: 200px;
 float: left;
 }
 div ul li img{
 width:100%;
 height: 100%;
 }
 </style>
</head>
<body>
<div id="div1">
 <ul>
 <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b4251f00ef925cba01ed49ca117e14a7" alt=""/></li>
 <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d38403825519770211acbf49459ae7d7" alt=""/></li>
 <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=53c83d39c62af65db998f4945bacaec2" alt=""/></li>
 <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5509f1a642644b40c8aa98c9e2c77a83" alt=""/></li>
 </ul>
</div>
<script>
 var oUl=document.getElementsByTagName('ul')[0];
 var lis=oUl.getElementsByTagName('li');
 oUl.innerHTML+=oUl.innerHTML;
 oUl.style.width=lis.length*lis[0].offsetWidth+'px';
 var left=null;
 var timer=setInterval(function(){
 left-=3;
 if(left<-oUl.offsetWidth/2){
 left=0;
 }
 oUl.style.left=left+'px'
 },10)
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
JavaScript的目的分析
Jan 05 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
jquery等待效果示例
May 01 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
js 实现省市区三级联动菜单效果
Feb 20 #Javascript
js事件冒泡与事件捕获详解
Feb 20 #Javascript
关于ES6的六个小特性(二)
Feb 20 #Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 #Javascript
JS批量替换内容中关键词为超链接
Feb 20 #Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 #Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
python实现的简单文本类游戏实例
2015/04/28 Python
python实现线程池的方法
2015/06/30 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
安踏广告词改编版
2014/03/21 职场文书
中学生操行评语
2014/04/24 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
起诉意见书范文
2015/05/19 职场文书
未婚证明格式
2015/06/15 职场文书
在职证明书模板
2015/06/15 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
配置nginx负载均衡
2022/05/06 Servers