原生JS实现跑马灯效果
作者:前端工程师_钱成 发布时间:2024-04-19 09:53:11
标签: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>
来源:http://www.qdfuns.com/notes/40901/affe7f52585df77350e24e08bc6fb2a2.html


猜你喜欢
- 最近遇到了一个下载静态html报表的需求,需要以提供压缩包的形式完成下载功能,实现的过程中发现相关文档非常杂,故总结一下自己的实现。开发环境
- 本文中介绍的系统优化,主要针对前端和后台这两方面(后台方面主要对SQL语句和数据存储进行了优化),下文中我们将介绍一些优化技巧和经验。技巧:
- 迭代是Python最强大的功能之一,是访问集合元素的一种方式。迭代器是一个可以记住遍历的位置的对象。迭代器对象从集合的第一个元素开始访问,直
- 学习器在测试集上的误差我们通常称作“泛化误差”。要想得到“泛化误差”首先得将数据集划分为训练集和测试集。那么怎么划分呢?常用的方法有两种,k
- 本文实例为大家分享了Python实现猜拳游戏的具体代码,供大家参考,具体内容如下分析1.玩家从控制台输入内容2.电脑随机输出石头剪刀布3.判
- 这篇文章给大家介绍Django中使用 Closure Table 储存无限分级数据,具体内容如下所述:起步对于数据量大的情况(比如用户之间有
- set 是一个无序的元素集合,支持并、交、差及对称差等数学运算, 但由于 set 不记录元素位置,因此不支持索引、分片等类序列的操作。初始化
- 手动安装python3.6只需要将其ppa源加入apt仓库列表即可,但是最近常用的一个源 ppa:jonathonf/python
- 前言Pillow库有很多用途,本文使用Pillow来生成随机的验证码图片。Pillow的用法参考:https://www.jb51.net/
- 一、启动与退出1、进入MySQL:启动MySQL Command Line Client(MySQL的DOS界面),直接输入安装时的密码即可
- 本文介绍了深入理解ES6中let和闭包,分享给大家,具体如下:在开始本文之前我们先来看一段代码for(var i=0;i<10;i++
- 一. 视图集与路由的使用使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中:list() 提供一组数据retrieve() 提
- DOM遍历基于ID、元素类型、类名查找元素非常有用,但是如果你想基于它在DOM树中的位置来查找元素该怎么办?换句话说,你有一个给定的元素,你
- 首先,来看每次处理一个字符的情况,可以有如下方法去实现:方法一: >>> a='
- 简介使用 Python 进行数据分析时,比较常用的库有 Numpy、Pandas、Matplotlib,本篇文章就来说一下 Numpy 的使
- pandas是什么?是它吗?。。。。很显然pandas没有这个家伙那么可爱。。。。我们来看看pandas的官网是怎么来定义自己的:panda
- 一、生成二维码二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编
- PHP使用星号替代用户名手机和邮箱这个在许多的活动界面会看到如淘宝的购物界面中的一些客户的支付宝号都是隐藏掉的哦,下面我们来看一下它的使用方
- SQL查询某字段的值为空sql中字段的默认有NULL和另一种空白的形式如何取查询这两种存在的记录呢?空白值查询:SELECT * FROM
- 如下所示:file->settings->Editor->General->Console里面的console co