欢迎来访河南SEO,感谢您的支持!QQ:1449585010。

JS实现网站图片飘窗效果,JavaScript悬浮广告(源文件代码)

网页特效 河南SEO 710℃ 0评论

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>郑州网站建设,河南SEO,郑州网站优化</title>
<style>
*{margin:0px;padding:0px}
#ad{position:absolute;left:0px;top:0px;}
</style>
</head>

<body>
<div id=”ad”>
<img src=”http://www.hugekj.com/e/data/images/notimg.gif” />
<div id=”GB”><span onclick=”fun()”>X</span></div>
</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>

转载请注明:SEO教程自学网_郑州网站优化_网站建设_关键词快排 » JS实现网站图片飘窗效果,JavaScript悬浮广告(源文件代码)

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

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

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