本文主要是介绍【javascript】广告随鼠标移动 | 广告飞动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
广告随鼠标移动
<script type="text/javascript">window.onload = function(){ // 广告跟着鼠标移动document.body.onmouseover = function(){var adNode = document.getElementById("ad");adNode.style.left = event.x -10; // event.x 获取鼠标的x坐标adNode.style.top = event.y -10;}}function closead(){ //点击广告后，进行关闭var adNode = document.getElementById("ad");adNode.style.display = "none" ;}
</script><style type="text/css">#bdID{ border:#000000 solid 1px; height:400px; width:600px;}
</style></head>
<body><div id="ad" style="position:absolute; top:0px;left:0px;" οnclick="closead()"><a href="http://www.sina.com" target="_blank"><img src="1.jpg" height="80px" width="100px" /></a></div><div id="bdID">body 区域</div>
</body>
广告飞动
<script type="text/javascript">var x=1, y=1,movex=0,movey=0;function movead(){ var adNode = document.getElementById("ad");movex = movex + x*5; //控制位置的变化movey = movey + y*5;adNode.style.left = movex;adNode.style.top = movey;if(movex+adNode.offsetWidth>=document.body.clientWidth) x = -1 ; //控制广告在body区域内显示else if(movex<=0) x = 1;if(movey+adNode.offsetHeight>=document.body.clientHeight) y = -1 ;else if(movey<=0) y = 1;}var timeid;function over(){clearInterval(timeid);}function out(){fly();}function fly(){timeid = setInterval("movead()",10); //调用movead()方法}window.onload = function(){fly();}function closead(){ //点击广告后，进行关闭var adNode = document.getElementById("ad");adNode.style.display = "none" ;over();}
</script><style type="text/css">#bdID{ border:#000000 solid 1px; height:400px; width:600px;}
</style></head>
<body><input type="button" value="手动广告" οnclick="movead()" /><br /><div id="ad" style="position:absolute; top:0px;left:0px;" οnmοuseοver="over()" οnmοuseοut="out()"><a href="http://www.sina.com" target="_blank"><img src="1.jpg" height="80px" width="100px" /></a><br /><a href="javascript:void(0)" οnclick="closead()">关闭</a></div><img src="2.jpg" height="600px" width="700px" border="1px" />
</body>这篇关于【javascript】广告随鼠标移动 | 广告飞动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
