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

原创 新起点博客  2018-11-06 10:32 
【上云必备】上云仅?102/年

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获取imgad=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与topad.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>

 

本文地址:https://www.henenseo.com/archives/842
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情