JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码)

时间:2022-01-09 来源:未知网络 作者:996建站网

JS实现网站图片飘窗效果,Java悬浮广告,丁光辉博客提供以下代码,仅供参考:

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<title>飘窗效果-丁光辉博客(dingguanghui.com)</title>

<style type=”text/css”>

*{margin:0px;padding:0px}

#ad{position:absolute;left:0px;top:0px;}

</style>

</head>

<body>

<div id=”ad”><img src=”haha.jpg” /></div>

</body>

< type=”text/java”>

//通过ID获取img

ad=document.getElementById(“ad”);

//定义横纵坐标

x=0;

y=0;

//设置初始速度

xv=1.5;

yv=1.5;

//根据img横纵坐标位置,设置反方向速度

function fun(){

if(x<0||x>window.innerWidth-ad.offsetWidth){

xv=-xv;

}

if(y<0||y>window.innerHeight-ad.offsetHeight){

yv=-yv;

}

x+=xv;

y+=yv;

//将xy坐标值赋予img css样式中的left与top

ad.style.left=x+”px”;

ad.style.top=y+”px”;

}

//定时器调用

mytime=setInterval(fun,100);

//ad绑定鼠标悬停事件

ad.onmouseover=function(){

//清除定时器

clearInterval(mytime);

}

//鼠标离开,重新触发定时器

ad.onmouseout=function(){

mytime=setInterval(fun,100);

}

</>

</html>

推荐阅读:

html是什么?html与html5有什么区别?

CSS3中em与px怎么换算?rem、em与px的区别是什么?

以上,就是丁光辉博客,针对“JS实现网站图片飘窗效果,Java悬浮广告”问题的解答,欢迎大家加入交流学习群:428773129

本文由鬼叔说运营原创所有,转载请保留此处:(鬼叔说运营)

免责声明:图片来源网络,如有侵权请联系作者及时删除!

JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码)插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序