To achieve the following effect, generally used in advertising,
This is achieved through movement, you can write your own first, and then look at and small, I write is not the same idea
<style> #div1 { width:100px; height:100px; background:red; Position:absolute; bottom:0; right:0; } </style><body style= "height:2000px;" > <div id= "Div1" ></div></body>JS Code section
<script> window.onscroll=function () {var Div=document.getelementbyid ("Div1"); var Scrolltop=document.documentelement.scrolltop | | Document.body.scrollTop; div.style.top=document.documentelement.clientheight-div.offsetheight+scrolltop+ ' px '; Startmove (parseint ((document.documentelement.clientheight-div.offsetheight)/2+scrolltop))//offsetHeigh T is the height of the Div//document.documentelement.clientheight is to the top of the window}; var timer=null; function Startmove (itarget) {var Div=document.getelementbyid (' Div1 '); Clearinterval (timer); Timer=setinterval (function () {var speed = (itarget-div.offsettop)/4; Speed=speed>0? Math.ceil (Speed): Math.floor (speed); if (div.offsettop==itarget) {clearinterval (timer); } else {div.style.top=div.offsettop+speed+ ' px '; } } ,}</script>)
JS Add ad module, move with the page move
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
