<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>漂浮广告</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
height:2000px;
}
#hd{
width:200px;
height:160px;
background:#000;
position:fixed;
left:0;
top:0;
}
#close{
width:50px;height:50px;
background:#f0f;
}
</style>
</head>
<body>
<script type="text/javascript">
window.οnlοad=function(){
var hd=document.getElementById("hd");
var close=document.getElementById("close");
var x=3,y=3;
// 可视区域宽高
var w_height=document.documentElement.clientHeight;
var w_width=document.documentElement.clientWidth;
// 计算出最大范围宽高
var maxW=w_width-hd.offsetWidth;
var maxH=w_height-hd.offsetHeight;
function run(){
var new_left=hd.offsetLeft;
var new_top=hd.offsetTop;
var old_left=new_left+x;
var old_top=new_top+y;
if(old_top>maxH){
old_top=maxH;
}
if(old_top<0){
old_top=0;
}
if(old_left>maxW){
old_left=maxW;
}
if(old_left<0){
old_left=0;
}
hd.style.left=old_left+"px";
hd.style.top=old_top+"px";
if(old_top==maxH){
y = -3;
}
if(old_top==0){
y=3;
}
if(old_left==maxW){
x=-3;
}
if(old_left==0){
x=3;
}
}
var timer= setInterval(run,10);
hd.οnmοuseοver=function(){
clearInterval(timer);
close.style.cursor="pointer"
}
hd.οnmοuseοut=function(){
timer= setInterval(run,10);
}
close.οnclick=function(){
hd.style.display="none";
}
window.οnresize=function(){
hd.style.left=0;
hd.style.top=0;
var w_height=document.documentElement.clientHeight;
var w_width=document.documentElement.clientWidth;
// 计算出最大范围宽高
maxW=w_width-hd.offsetWidth;
maxH=w_height-hd.offsetHeight;
}
}
</script>
<div id="hd">
<div id="close"></div>
</div>
</body>
</html>
将上面代码复制到自己的编译器中，即可实现左右撞击摆动的广告位效果图！
原文链接地址： http://www.sjzl618.com/a/zhike/qianduanzhuanqu/2017/1027/321.html
将上面代码复制到自己的编译器中，即可实现左右撞击摆动的广告位效果图！
原文链接地址： http://www.sjzl618.com/a/zhike/qianduanzhuanqu/2017/1027/321.html
1653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
