Javascript--跑马灯代码

最新推荐文章于 2023-03-01 19:37:31 发布

SelonLiao

最新推荐文章于 2023-03-01 19:37:31 发布

阅读量592

点赞数

分类专栏：技术文章标签： javascript

本文链接：https://blog.csdn.net/SelonLiao/article/details/39994515

版权

技术专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
<title>图片滚动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">

#demo {
background: #FFF;
overflow:scroll;
width: 1500px;
}

#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
margin: 10px;
float: left;
width: 330%;
height: 200%;;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}

</style>
<body>
<div id="bd">
<div id="demo" οnmοusemοve="ynL(event)">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/1.jpg"></a>
<a href="#"><img src="images/2.jpg"></a>
<a href="#"><img src="images/3.jpg"></a>
<a href="#"><img src="images/4.jpg"></a>
<a href="#"><img src="images/5.jpg"></a>
<a href="#"><img src="images/6.jpg"></a>
</div>
<div id="demo2">
<a href="#"><img src="images/1.jpg"></a>
<a href="#"><img src="images/2.jpg"></a>
<a href="#"><img src="images/3.jpg"></a>
<a href="#"><img src="images/4.jpg"></a>
<a href="#"><img src="images/5.jpg"></a>
<a href="#"><img src="images/6.jpg"></a>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function $e(id){
return document.getElementById(id);
}
var tab = $e('demo');
var tab1 = $e('demo1');
var tab2 = $e('demo2');
tab2.innerHTML = tab1.innerHTML;

var yn = 0;
var wd = document.documentElement.clientWidth;
function Marquee(){
if(x>wd/2){
if(tab.scrollLeft-tab2.offsetWidth<=-1500){
tab.scrollLeft +=tab1.offsetWidth;
}
else{
tab.scrollLeft--;
}
}else{
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
}

var MyMar = setInterval("Marquee()",1);
var x;
var y;
function ynL(event){

x = event.clientX;
y = event.clientY;
document.title =x+"--"+y;
}

</script>
</html>

SelonLiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript--跑马灯代码

图片滚动 #demo { background: #FFF; overflow:scroll; width: 1500px; } #demo img { border: 3px solid #F2F2F2; } #indemo {
复制链接

扫一扫