新乡SEO（JS实现网站图片飘窗效果代码）

用户投稿 • 2021-08-28 12:32 星期六 • 阅读 193

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

<!DOCTYPE HTML>

<html>

<head>

<title>飘窗效果-丁光辉博客（www.dingguanghui.com）</title>

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

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

</style>

</head>

<body>

</body>

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

本文《新乡SEO（JS实现网站图片飘窗效果代码）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

SEO小小课堂网
SEO教程
友情链接交换
搜素引擎算法
GEO培训
SEO小小课堂网
站长导航
友情链接交换

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：用户投稿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/11690.html