JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码)-丁光辉博客
丁光辉博客,致力郑州SEO培训外包及河南SEO顾问服务,8年SEO优化经验,帮您的网站轻松上排名!开设郑州SEO线下培训班,以及网络培训线上课程等SEO服务

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

JavaScript教程 894℃ 0评论

JS实现网站图片飘窗效果,JavaScript悬浮广告,郑州SEO提供以下代码,仅供参考:

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<title>飘窗效果-丁光辉博客(www.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>

<script type=”text/javascript”>

//通过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);

}

</script>

</html>

推荐阅读:

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

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

以上,就是丁光辉博客,针对“JS实现网站图片飘窗效果,JavaScript悬浮广告”问题的解答,欢迎大家加入交流学习群:428773129
本文由鬼叔说运营原创所有,转载请保留此处:(鬼叔说运营www.17seo8.cn)
免责声明:图片来源网络,如有侵权请联系作者及时删除!

转载请注明:郑州SEO优化 » JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码)

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址