Home > Developer > Web Develop
The buffer movement and the uniform motion are a bit different, see the picture can know that the buffer movement speed is getting slower.
1 <style>2 *{3 padding:0;4 margin:10px 0;5 }6 #div1{7 Height:100px;8 width:100px;9 background:Green;Ten float: Left; One position:relative; A Left:1000px; - } - #div2{ the Border-left:1px solid Black; - position:Absolute; - Height:200px; - Left:600px; + float: Left; - } + </style> A at - <Body> - <DivID= "Div1"></Div> - <DivID= "Div2"></Div> - </Body>
First define two Div, one div only see one side, the other one does the movement
JS code is as follows, with comments
<script>varI=setinterval (functionStartmove () {varDiv1=document.getelementbyid ("Div1"); varSpeed= (600-div1.offsetleft)/30; First get the speed because DIV1. offsetleft=1000, so this speed is negative speed=speed>0? Math.ceil (Speed): Math.floor (speed);//take speed up and down, pixel no decimaldiv1.style.left=div1.offsetleft+speed+ ' px ';//because the speed is negative, so the offsetleft is getting smaller and moving to the left if(div1.offsetleft==600)//stop motion when the edge of Div2 is reached{clearinterval (i); } }, 30)</script>
JS implementation buffer movement, and uniform motion a little different
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
