Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you how to write sample code to achieve flexible floating advertising based on JS. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Effect picture

1. Functions (mouse move in and out events, click events, timer control movement)

Div realizes the movement on the page, and judges that when the page frame bounces, the mouse moves into the div to stop moving, the mouse moves out of the div to move, click div to let it disappear from the page, and the timer controls its movement.

2.div initial styling / / div (Advertising) get node var div1 = document.getElementById ("div1"); / / div (Advertising) initial position var offsetx = 0; var offsety = 0; / / div (Advertising) distance var stepx = 10; var stepy = 10 / / div (advertisement) size div1.style.width= "100px" div1.style.height= "100px" / / set location div1.style.position= "absolute" div1.style.top = offsetx; div1.style.left = offsety; / / Advertising picture div1.style.backgroundImage= "url (. / img/ggao.webp)" div1.style.backgroundSize= "cover" 3. Get the page size / / visual width and height that can be moved by div-- the area where div (advertising) can move var seeWidth = document.documentElement.clientWidth; var seeHeight = document.documentElement.clientHeight; / / div (advertising) the maximum movable width and height var maxLeft = seeWidth-100; var maxTop = seeHeight-100 × 4. The timer controls the movement, the mouse moves in and stops moving, and the mouse moves out and continues to move. / / start the timer var t = setInterval (move,30); / / move the mouse in and clear the timer div1.onmouseenter = function () {clearInterval (t);} / / move the mouse out to recover div1.onmouseleave = function () {t = setInterval (move,30);} 5. Click event Click to make div disappear / / Click event, click to disappear div1.onclick = function () {div1.style.display = "none"} 6. Complete code / / div (advertisement) get node var div1 = document.getElementById ("div1"); / / div (advertisement) initial position var offsetx = 0; var offsety = 0; / / div (advertisement) distance of each move var stepx = 10; var stepy = 10 / / div (advertisement) size div1.style.width= "100px" div1.style.height= "100px" / / set location div1.style.position= "absolute" div1.style.top = offsetx; div1.style.left = offsety / / div1.style.backgroundColor= "black" div1.style.backgroundImage= "url (. / img/ggao.webp)" div1.style.backgroundSize= "cover" / / Web page visualization width and height-the area where div (advertising) can be moved var seeWidth = document.documentElement.clientWidth; var seeHeight = document.documentElement.clientHeight / / div (advertising) maximum movable width and height var maxLeft = seeWidth-100; var maxTop = seeHeight-100; function move () {offsetx+=stepx; offsety+=stepy; console.log (offsetx) Console.log (offsety) / / is greater than the movable height or reaches the top so that the moving distance becomes its negative if (offsety > = maxTop | | offsety=maxLeft | | offsetx

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.