重新整理頁面，圖檔從中間向兩邊展開到特定位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.banner{
width: 100%;
height: 400px;
background-image: url(../img/banner.jpg);
position: relative;
}
.img_r{
position: absolute;
}
.img_l{
position: absolute;
}
</style>
</head>
<body onload="img_play()">
<div class="banner" >
<!-- 圖檔 -->
<div class="img">
<div class="img-1">
<div class="img_r" style="left: 800px;">
<img src="../img/關于一諾.png" >
</div>
</div>
<div class="img-2">
<div class="img_l" style="left: 800px;">
<img src="../img/關于一諾.png" >
</div>
</div>
</div>
</div>
<script type="text/javascript">
var pont_r = document.querySelector('.img_r');
// 設定右邊圖檔最終位置
function next_r(){
if (pont_r.style.left === '700px') {
} else{
var r = parseInt(pont_r.style.left) - 10;
pont_r.style.left = r+'px';
}
}
var pont_l = document.querySelector('.img_l');
// 設定右邊圖檔最終位置
function next_l(){
if (pont_l.style.left === '900px') {
} else{
var r = parseInt(pont_l.style.left) + 10;
pont_l.style.left = r+'px';
}
}
// 随時間移動而播放
var time_2 = null;
function img_play(){
time_2 = setInterval(function(){
next_r();
next_l();
},100)
}
</script>
</body>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)