zoukankan      html  css  js  c++  java
  • js 广告 网页漂浮

    <style type="text/css">
    	*{margin: 0; padding: 0;}
    	#f {position: absolute;}
    	#btn{position: absolute;left: 186px;}
    </style>
    
    <body style="height: 2000px;">
    	<div id="f">
    		<img src="img/banner.jpg"  width="200px"height="100px"/>
    		<button id="btn">×</button>
    	</div>
    	
    	
    </body>
    <script type="text/javascript">
    	var w=document.body.clientWidth-200;//自身宽度减去图片本身的宽度
    	var h=document.documentElement.clientHeight-100;//自身高度减去图片本身的高度
    	var x=0,y=0;//原点
    	var xs=2,ys=1;//移动的坐标(2,1)
    	var d=document.getElementById("f");
    	var timer;
    	//定义移动函数,实现图片移动
    	function fly(){
    		if (x<0 || x>w) xs=-xs;
    		if (y<0 || y>h) ys=-ys;
    		x=x+xs;
    		y=y+ys;
    		d.style.left=x+'px';
    		d.style.top=y+'px';
    		timer= setTimeout("fly()",10);
    	}
    	 fly();
    	
    	
    	//叉号按钮
    	var btn=document.getElementById("btn");
    	btn.onclick=function(){
    		d.style.display="none";
    	}
    	
    	//鼠标放上图片
    	d.onmouseover=function(){
    		clearTimeout(timer);
    	}
    	//鼠标离开图片
    	d.onmouseout=function(){
    		fly();
    	}
    	
    </script>
    

      

  • 相关阅读:
    hyper-v使用wifi链接网络
    windows下批量换程序——运维常用
    redis多端口,多实例。
    vs2017 本地IP地址调试 局域网调试
    自动备份
    ipv6无网络访问权限怎么办
    缓存
    学习php
    DateTimeOffset DateTime
    C# 集合
  • 原文地址:https://www.cnblogs.com/aomeng/p/11736181.html
Copyright © 2011-2022 走看看