В этой статье описывается простой эффект с плавающим изображением, реализованный JS. Поделитесь этим для вашей ссылки, следующим образом:
Использование оконных объектов для достижения плавающего эффекта изображения
1. Существует рекламный див, который мы хотим контролировать, его отправная точка (0,0)
2. Установите горизонтальные и вертикальные скорости
3. Control Ad Div Mobile
1) Достигнет ли AD DIV границей
2) Если мы достигнем границы, мы установим скорость, чтобы двигаться в обратном направлении
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt witch witch witch </title> <style> div {position: absolute;} img {position: {position: {position: {position: {position: {position: {position: {position: {position: {position {position: {position {position: Absolute; Фильтр: Альфа (непрозрачность = 100);/* т.е.*/-моз -топость: 1;/* moz + ff*/opacity: 1;/* Браузеры, которые поддерживают CSS3 (FF 1.5 также поддерживает)*/} </style> </head> <body> <div id = "divimg"> <img src = "123.jpg"> </script labrice> <vip> </src = "123.jpg"> </script> </src = ". type = "text/javascript"> // Получить объект DIV, где изображение var Img = document.getElementById ("divimg"); // Установить координаты верхнего левого угла DIV, координаты начальной точки var x = 10, y = 10; // Установить скорость перемещения изображения var xspeed = 2, yspeed = 1; // Установить максимальную плавуческую высоту и ширину изображения var w = document.documentelement.clientwidth-110, h = document.documentelement.clientHeight-160; function floatimg () {// сравнить, достигает ли диск изображения границу // Если мы достигнем границы, мы контролируем изображение, чтобы изменить направление, если (x> w || x <0) {xspeed = -xspeed; } if (y> h || y <0) {yspeed = -yspeed; } // Если граница не достигнута, установите координаты верхнего левого угла изображения // Установите начальную координату координаты + скорость x + = xspeed; y+= yspeed; img.style.top = y+"px"; img.style.left = x+"px"; // задержка вызовы функции floatimg () и вызовов SetTimeout ("floatImg ()"), 40); } floatimg (); </script> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Алгоритмы и методы обхода JavaScript »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.