Many are inseparable from the front scroll effects, call the plug cumbersome, trouble late changes, taking into account these factors, he wrote out a small scroll an infinite loop effects.
First scroll effects well written, using css can be completed, following a base css write cycle upward scroll effects
html
< Div class = "wrap" > < div class = "Content" > < P > first row </ P > < P > second row of data </ P > </ div > </ div >
css
.wrap{height:30px;overflow: hidden;position: absolute;top:30;left: 100;width: 100%} p{margin:0;height: 30px;width: 100%} .content p{ position: absolute; } @-webkit-keyframes anim1{ 0% {top: 30px;opacity: 1} 50% {top: -30px;opacity: 1} 75% {top: -30px ;opacity: 0} 100%{top:30px;opacity: 0} } @-webkit-keyframes anim2{ 0% {top: -30px;opacity: 0} 25% {top: 30px;opacity: 0} 50% {top: 30px;opacity: 1} 100%{top: -30px;opacity: 1} } .content p:nth-child(1){background-color: red;} .content p:nth-child(2){background-color: yellow;} .content p:nth-child(1){ -webkit-animation: anim1 3s linear infinite; } .content p:nth-child(2){ -webkit-animation: anim2 3s linear infinite; }
The above html + css scrolling can be achieved, but if we think about rolling, rolling picture, and you want to scroll on the need to complete the cycle by js, the focus of this feature is rolling cycle, how to make it a nice picture scroll from the end when out of it, which I thought of a solution, that is, the same picture appears two groups, so that the two picture end to end, the local head of two groups of pictures to scroll to the position of the first group of the head, let the two groups of pictures reduction position, so quietly exchange position, fast speed is not apparent with the naked eye to ado, hanging below the code
html
< Div class = "xiangshang" > < div class = "box1" ID = "box1" > < div class = "xiangxiao" style = "background: URL (__ the STATIC __ / Web / IMG / xiangmu1.png) NO-REPEAT;" > construction of three Olympic Xi'an </ div > < div class = "xiangxiao" style = "background: url (STATIC __ __ / Web / img / xiangmu2.png) NO-REPEAT;" > Xi'an international Conference in eight innings in the construction center </ div > <div class="xiangxiao" style= "background: url (__ STATIC __ / Web / img / xiangmu3.png) NO-REPEAT;" > Beijing Urban Construction Beijing Daxing International Airport </ div > < div class = "xiangxiao" style = "background: url (__ STATIC __ / Web / img / xiangmu4.png) NO-REPEAT; " > Baju built in Shandong Science and Technology Museum </ div > < div class =" xiangxiao " style =" background: url (STATIC __ __ / Web / img / xiangmu5.png) NO -repeat; " > construction First Division Ali cloud Valley Park </ div > < div class ="xiangxiao " style= "background: url (STATIC __ __ / Web / img / xiangmu6.png) NO-REPEAT;" > Baju built in the Guangxi branch of Kunming Plaza </ div > < div class = "xiangxiao" style = "background: url ( __STATIC __ / Web / img / xiangmu7.png) NO-REPEAT; " > construction First Division, three games Shenzhen convention & Exhibition Center </ div > < div class =" xiangxiao " style =" background: url (__ STATIC __ / Web / img /xiangmu8.png)no-repeat; " > Baju built in Xi'an Silk Road international Center will be laid on the table </ div > <div class="xiangxiao" style= "background: url (__ STATIC __ / Web / img / xiangmu9.png) NO-REPEAT;" > Construction First Bureau, the city sub-center </ div > < div class = "xiangxiao" style = "background: url (__ STATIC __ / Web /img/xiangmu10.png)no-repeat; " > three built in Ningbo Guohua financial Tower project </ div > </ div > < div class =" BOX2 " the above mentioned id =" BOX2 " > < div class =" xiangxiao " style =" background: URL (the STATIC __ __ / Web / IMG / xiangmu1.png) NO-REPEAT; "> Construction of three Olympic Xi'an </ div > < div class = "xiangxiao" style = "background: url (STATIC __ __ / Web / img / xiangmu2.png) NO-REPEAT;" > built in eight innings Xi'an International Conference Center </ div > < div class = "xiangxiao" style = "background: url (__ STATIC __ / Web / img / xiangmu3.png) NO-REPEAT;" > Beijing Urban Construction Beijing Daxing international Airport </ div > < div class = "xiangxiao " style =" background: URL (the STATIC __ __ / Web / IMG / xiangmu4.png)no-repeat;"> Baju built in Shandong Province Science and Technology Museum </ div > < div class = "xiangxiao" style = "background: url (STATIC __ __ / Web / img / xiangmu5.png) NO-REPEAT;" > Construction First Division Ali Cloud Valley Park </ div > < div class = "xiangxiao" style = "background: url (STATIC __ __ / Web / img / xiangmu6.png) NO-REPEAT;" > Baju built in the Guangxi branch of Kunming Plaza </ div > < div class = "xiangxiao" style = "background: url (STATIC __ __ / Web / img / xiangmu7.png)no-repeat;"> Construction First Division, three games Shenzhen Convention & Exhibition Center </ div > < div class = "xiangxiao" style = "background: url (STATIC __ __ / Web / img / xiangmu8.png) NO-REPEAT;" > Baju built in Xi'an Silk Road international Center will be laid on the table </ div > < div class = "xiangxiao" style = "background: url (STATIC __ __ / Web / img / xiangmu9.png) NO-REPEAT;" > construction First Deputy central city </ div > < div class = "xiangxiao" style = "background: URL (the STATIC __ __ / Web / IMG / xiangmu10.png)no-repeat;"> Three built in Ningbo Guohua Financial Tower project </ div > </ div > </ div >
css
.xiangshang { height: 48%; width: 100%; overflow: hidden; position: relative; } .box1, .box2{ width: 3530px; height: 100%; position: absolute; } .box2{ left: 3530px; }
js
// 项目滚动特效 var _box1 = document.getElementById("box1"); var _box2 = document.getElementById("box2"); var _box3 = document.getElementById("box3"); var _box4 = document.getElementById("box4"); var x = 0; var y = 0; var fun = function() { _box1.style.left = x + 'px'; _box2.style.left = (x + 3530) + 'px'; _box3.style.right = y + 'px'; _box4.style.right = (y + 3530) + 'px'; x--; y--; if ((x + 3530) == 0) { x = 0; } if ((y + 3530) == 0) { y = 0; } } $(".xiangxiao").mouseover(function() { $(this).css("background-size", "120% 120%"); }); $(".xiangxiao").mouseout(function() { $(this).css("background-size", "100% 100%"); }); setInterval(fun, 10);
Here is the box1 and box2 two groups mentioned above picture, you can see what they are exactly the same, we can see by his js computing and mobile process, then this box3 and box4 is moving in the opposite direction of computing, in html and css Lane did not show it, and in order to show the hover effect when the mouse passes plus a larger background image effects. This scroll style special effects on the well.