在门户首页需要添加一个跑马灯要实现，图片进行展示匀速向左，移入暂停，移出继续。左右按钮可以进行点击。
- función de realización html
<marquee behavior="behavior" width="200" loop="2">文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</marquee>
- Esta etiqueta no está registrada en la especificación W3C, y considerando que el efecto de pantalla está en blanco y no se puede conectar sin problemas, decidí renunciar
- función de implementación de css (nuevas características de css3)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>跑马灯效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#move {
position: relative;
width: 230px;
height: 20px;
background: grey;
color: white;
overflow: hidden;
}
#cont {
width: 200%;
height: 20px;
position: absolute;
left: 0;
top: 0;
animation: 5s move infinite linear;
}
#cont .text {
display: inline-block;
float: left;
width: 50%;
height: 20px;
}
@keyframes move {
0% {
left: 0;
}
100% {
left: -100%;
}
}
</style>
</head>
<body>
<div id="move">
<div id="cont">
<div class="text">1 滚动吧，就这样滚动，就是这种效果</div>
<div class="text">2 滚动吧，就这样滚动，就是这种效果</div>
</div>
</div>
</body>
</html>
- De hecho, se utilizan dos datos duplicados para conectarse, pero el requisito es ser compatible con ie8, por lo que este método también se abandona.
- Entonces, para los repugnantes js nativos de ie8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>game1</title>
<style type="text/css">
.tt {
width: 145px;
height: 106px;
margin-left: 16px;
margin-right: 16px;
margin-top: 10px;
display: block;
float: ;
}
</style>
</head>
<body>
<div
id="colee_left"
style="
width: 1050px;
height: 150px;
border: 1px solid #e8e8e8;
margin-top: 10px;
overflow: hidden;
background-color: yellow;
"
>
<table cellpadding="0">
<tbody id="box">
<tr>
<td id="colee_left1" valign="top">
<table>
<tbody>
<tr align="center">
<td>
<a href="#">
<img class="tt" src="1.jpg" />
</a>
</td>
<td>
<a href="#">
<img class="tt" src="1.jpg" />
</a>
</td>
<td>
<a href="#">
<img class="tt" src="1.jpg" />
</a>
</td>
<td>
<a href="#">
<img class="tt" src="1.jpg" />
</a>
</td>
<td>
<a href="#">
<img class="tt" src="1.jpg" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
var speed = 30;
//速度数值越大速度越慢
var colee_left2 = document.getElementById("colee_left2");
var colee_left1 = document.getElementById("colee_left1");
var colee_left = document.getElementById("colee_left");
var box = document.getElementById("box");
colee_left2.innerHTML = colee_left1.innerHTML;
function Marquee3() {
if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0) {
//offsetWidth 是对象的可见宽度
colee_left.scrollLeft -= colee_left1.offsetWidth; //scrollWidth 是对象的实际内容的宽，不包边线宽度
} else {
colee_left.scrollLeft++;
}
}
var MyMar3 = setInterval(Marquee3, speed);
// 移入清除定时器
box.onmouseover = function () {
clearTimeout(MyMar3);
};
// 移出打开定时器
box.onmouseout = function () {
MyMar3 = setInterval(Marquee3, speed);
};
</script>
</html>
- Esta idea se puede lograr haciendo clic en los botones izquierdo y derecho para mover el ancho de una imagen.
- El único defecto es que Google no se mueve el 90% del tiempo