网络编程 
首页 > 网络编程 > 浏览文章

原生JS实现跑马灯效果

(编辑:jimmy 日期: 2024/11/17 浏览:3 次 )

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

原生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="/UploadFiles/2021-04-02/misc.php">

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

上一篇:分享一道关于闭包、bind和this的面试题
下一篇:js 实现省市区三级联动菜单效果
Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap