html网页漂浮广告原理js,JS实现弹性漂浮效果的广告代码

本文实例讲述了JS实现弹性漂浮效果的广告代码。分享给大家供大家参考。具体如下：

这里介绍一款JS弹性漂浮广告代码，碰到网页浏览器的边缘就会顺着弹力的方向自动漂浮下去，不停的在网页上漂来漂去，漂浮广告代码是很早时候就有的代码了，使用广泛，而且做为广告来说，好像效果还不错，因为它在不停的动，让人在视觉上感觉到有一种吸引力。其中的JS代码你可以扣出来保存在一个单独的JS文件中，使用时调用即可。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

Js弹性漂浮广告代码

visibility: visible;">

var xPos = 300;

var yPos = 200;

var step = 1;

var delay = 30;

var height = 0;

var Hoffset = 0;

var Woffset = 0;

var yon = 0;

var xon = 0;

var pause = true;

var interval;

img1.style.top = yPos;

function changePos()

{

width = document.body.clientWidth;

height = document.body.clientHeight;

Hoffset = img1.offsetHeight;

Woffset = img1.offsetWidth;

img1.style.left = xPos + document.body.scrollLeft;

img1.style.top = yPos + document.body.scrollTop;

if (yon)

{yPos = yPos + step;}

else

{yPos = yPos - step;}

if (yPos < 0)

{yon = 1;yPos = 0;}

if (yPos >= (height - Hoffset))

{yon = 0;yPos = (height - Hoffset);}

if (xon)

{xPos = xPos + step;}

else

{xPos = xPos - step;}

if (xPos < 0)

{xon = 1;xPos = 0;}

if (xPos >= (width - Woffset))

{xon = 0;xPos = (width - Woffset); }

}

function start()

{

img1.visibility = "visible";

interval = setInterval('changePos()', delay);

}

function pause_resume()

{

if(pause)

{

clearInterval(interval);

pause = false;}

else

{

interval = setInterval('changePos()',delay);

pause = true;

}

start();

希望本文所述对大家的javascript程序设计有所帮助。

html网页漂浮广告原理js,JS实现弹性漂浮效果的广告代码相关推荐

html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果代码模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
JS让文本以打字效果呈现出来
简单的网页特效:JS让文本以打字效果呈现出来代码如下: <!DOCTYPE HTML> <html lang="en"><head><m ...
html盒子移动动画代码,js实现盒子移动动画效果
本文实例为大家分享了js实现盒子移动动画效果的具体代码,供大家参考,具体内容如下 content="width=device-width, user-scalable=no, initial ...
分别用marquee和div+js实现首尾相连循环滚动效果
分别用marquee和div+js实现首尾相连循环滚动效果,特效代码非常精简,仅3行实现! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
html5 扇形导航效果图,js+css实现扇形导航效果
本文实例为大家分享了js+css实现扇形导航效果的具体代码,供大家参考,具体内容如下\ 扇形导航 *{ margin: 0; padding: 0; } html,body{ height: 100% ...
html仿京东选项卡切换代码,js仿京东轮播效果选项卡套选项卡使用
本文实例为大家分享了js仿京东轮播效果的具体代码,实现选项卡套用选项卡,供大家参考,具体内容如下效果图: 代码: 无标题文档 *{margin:0;padding:0;} ul{list-style ...
Js弹性漂浮广告代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
移动网页广告引入mraid.js使用指南
在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能. 背景: 我开发了移 ...
移动端网页广告引入 mraid.js 使用指南
在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能. 背景我主要负责开 ...

html网页漂浮广告原理js,JS实现弹性漂浮效果的广告代码

html网页漂浮广告原理js,JS实现弹性漂浮效果的广告代码相关推荐

最新文章

热门文章