javascript广告漂浮效果代码

最新推荐文章于 2022-01-02 12:55:05 发布

kk_Deephug

最新推荐文章于 2022-01-02 12:55:05 发布

阅读量3.8k

点赞数 3

分类专栏： javascript 文章标签： javascript 广告代码

本文链接：https://blog.csdn.net/kk_Deephug/article/details/48198767

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

javascript广告漂浮效果代码

本例主要是网页漂浮广告代码，就是一个小框框在网页里漂浮。这个网页漂浮广告的实现也很简单，在网页中通过javascript寻找id为img1的div，然后通过js代码来实现网页内的漂浮广告。
很简单的一个div，然后调用js.js去控制这个div

看网页漂浮广告代码里js.js的代码

<script type="text/javascript">

var x=0;

var y=0;

var vx=1;

var vy=1;//每次移动距离

function move(){

var pic=document.getElementById("pic");

x=x+vx;

y=y+vy;

pic.style.left=x+"px";

pic.style.top=y+"px";

//如果x+图片宽度大于窗口宽度或者x<0，反方向移动 

if((x+pic.offsetWidth)>document.body.clientWidth||x<0){

vx=-vx};

if((y+pic.offsetHeight)>document.body.clientHeight||y<0){

vy=-vy};

}

setInterval("move()",10);

function shut(){

document.body.removeChild(document.getElementById("pic"))

}

</script>

请看html中的代码

<body style="padding:0px;margin:0px;">

<div id="pic" style="position:absolute"><img src="pc1.jpg" />

<input type="button" value="关闭" style="position:absolute" onClick="shut()">

</div>

</body>

新手请大神多指导

Deephug

kk_Deephug

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
javascript广告漂浮效果代码

javascript广告漂浮效果代码本例主要是网页漂浮广告代码，就是一个小框框在网页里漂浮。这个网页漂浮广告的实现也很简单，在网页中通过javascript寻找id为img1的div，然后通过js代码来实现网页内的漂浮广告。很简单的一个div，然后调用js.js去控制这个div看网页漂浮广告代码里js.js的代码<script type="text/javascript">var x=0;var
复制链接

扫一扫