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

This article shows you how to write the code for JavaScript implementation to follow the advertisement, the content is concise and easy to understand, and it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Floating advertising is a very common form of advertising on the website at present, floating advertising can follow users' browsing in real time, effectively convey the meaning of the product to express, and achieve a good communication effect. So how does floating advertising come true? in fact, it is not difficult to achieve floating advertising, as follows:

* {margin: 0; padding: 0;} img {position: absolute; left: 0;} p {text-align: center; line-height: 40px;}

I am text 1

I am text 2

I am text 3

I am text 4

I am text 5

I am text 6

I am body 7.

I am text 8

I am text 9.

I am text 10

I am text 11.

I am text 12.

I am text 13.

I am text 14.

I am text 15.

I am text 16.

I am text 17.

I am text 18.

I am text 19.

I am text 20

I am text 21.

I am text 22.

I am text 23

I am text 24.

I am text 25.

I am text 26

I am text 27.

I am text 28.

I am text 29

I am text 30.

I am text 31.

I am text 32

I am text 33.

I am text 34

I am text 35

I am text 36

I am text 37.

I am text 38

I am text 39

I am text 40

I am text 41

I am text 42

I am text 43

I am text 44

I am text 45

I am text 46

I am text 47.

I am text 48

I am text 49

I am the text 50

/ / 1. Get the element const oAdImg = document.querySelector ("img") that needs to be operated; / / 2. Calculate the value of the advertisement picture top = (viewport height-advertisement height) / 2 const screenHeight = getScreen (). Height; const imgHeight = oAdImg.offsetHeight; const offsetY = (screenHeight-imgHeight) / 2; / / console.log (offsetY); / / 3. Set the calculated top value to the advertising image / / oAdImg.style.top = offsetY + 'px'; easeAnimation (oAdImg, {"top": offsetY}); / / 4. Monitor the scrolling event of the web page _ window.onscroll = function () {/ / get the distance to the scrolling of the web page / / the value of the ad image top + the distance of the scrolling of the web page let pageOffsetY = getPageScroll (). Y; easeAnimation (oAdImg, {"top": offsetY + pageOffsetY});} / / browser viewport width and height function getScreen () {let width, height; if (window.innerWidth) {width = window.innerWidth; height = window.innerHeight;} else if (document.compatMode = = "BackCompat") {width = document.body.clientWidth; height = document.body.clientHeight } else {width = document.documentElement.clientWidth; height = document.documentElement.clientHeight;} return {width: width, height: height}} / / ease animation function easeAnimation (ele, obj, fn) {clearInterval (ele.timerId) Ele.timerId = setInterval (function () {/ / flag variable is used to mark whether all attributes have been animated let flag = true; for (let key in obj) {let target = obj [key]; / / 1. Get the current position of the element let style = getComputedStyle (ele); let begin = parseInt (style [key]) | | 0; / / 2. Define variable recording step size / / formula: (end position-start position) * retardation coefficient (0 ~ 1) let step = (target-begin) * 0.3; / / 3. Calculate the new location begin + = step; if (Math.abs (Math.floor (step)) > 1) {flag = false;} else {begin = target;} / / 4. Reset the position of the element ele.style [key] = begin + "px";} / / determine whether the animation has finished if (flag) {/ / turn off the timer clearInterval (ele.timerId) after the animation / / determine whether to pass the fn function, otherwise do not execute fn & & fn ();}}, 100);} / / Page scrolling distance function getPageScroll () {let x, y If (window.pageXOffset) {x = window.pageXOffset; y = window.pageYOffset;} else if (document.compatMode = "BackCompat") {x = document.body.scrollLeft; y = document.body.scrollTop;} else {x = document.documentElement.scrollLeft Y = document.documentElement.scrollTop;} return {x: X, y: y}}

Effect picture

The above is how to write the code for JavaScript implementation to follow the advertisement. have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.