jquery相对浮动层 | 旁门左道

jquery相对浮动层

<Date: 2010-07-29> <Author: medcl> <Category: Web, 资源分享> 查看评论

jquery相对浮动层，需要这样的效果，网上找了下，没找到，自己写的一个。

float div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
 </HEAD>
 
 <BODY>
  <div id="DivID" style="background:#0F0;  width:200px;height:200px;"></div>
  <div id="float" style="width:40px;height:20px;position:absolute;color:#f0f;background:#000">删除</div>
 
<script type="text/javascript">
 
var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
 
var xoffset=X+jQuery('#DivID').outerHeight()-jQuery('#float').outerHeight();
var yoffset=Y+jQuery('#DivID').outerWidth()-jQuery('#float').outerWidth();
 
$('#float').css("top",xoffset+ "px"); 
$('#float').css("left",yoffset+ "px"); 
</script>
 </BODY>
</HTML>

继续改良之后。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
 
 
 
 $(document).ready(function(){ 
	var X = $('#DivID').offset().top;
	var Y = $('#DivID').offset().left;
 
	var xoffset=X+jQuery('#DivID').outerHeight()-jQuery('#float').outerHeight();
	var yoffset=Y+jQuery('#DivID').outerWidth()-jQuery('#float').outerWidth();
 
	$('#float').css("top",xoffset+ "px"); 
	$('#float').css("left",yoffset+ "px");
 
 
	$("img").mousemove(function(e){
 
		 //$(this).parent().attr('href','http://www.google.cn');
		 $(this).parent().attr('title','谷歌');
		 //alert($(this).attr('id'));
		 var id= $(this).attr('id')
		 $(this).parent().attr('href','http://www.google.com.hk/search?q='+id);
	 });
 
 
   });
 
 
</script>
 </HEAD>
 
 <BODY>
 <div> <div id="DivID" style="background:#0F0;  width:200px;height:200px;"></div>
  <div id="float" style="width:40px;height:20px;position:absolute;color:#f0f;background:#000">删除</div>
</div>
 
<div><a href="#"><img id="1001" src="http://bbs.bg68.com/avatars/upload/0/5/1161.jpg" /></a></div>
 
 </BODY>
</HTML>

今天继续改造了下，实现了通过定义css即可控制div的相对浮动，更加灵活。
float div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="MEDCl">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
 
 
 
 $(document).ready(function(){ 
 
	//定义id来进行定位
	var X = $('#DivID').offset().top;
	var Y = $('#DivID').offset().left;
 
	var xoffset=X+jQuery('#DivID').outerHeight()-jQuery('#float').outerHeight();
	var yoffset=Y+jQuery('#DivID').outerWidth()-jQuery('#float').outerWidth();
 
	$('#float').css("top",xoffset+ "px"); 
	$('#float').css("left",yoffset+ "px");
 
 
	//属性动态定义测试
	$("img").mousemove(function(e){
 
		 //$(this).parent().attr('href','http://www.google.cn');
		 $(this).parent().attr('title','谷歌');
		 //alert($(this).attr('id'));
		 var id= $(this).attr('id')
		 $(this).parent().attr('href','http://www.google.com.hk/search?q='+id);
	 });
 
 
 
	//css class 定义相对浮点，更加灵活
 
	 $('.myLink').each(function(i) {           
 
			var X = $(this).offset().top;
			var Y = $(this).offset().left;	
 
			var relativeobj=$(this).find(".myRelative");
 
			//alert(relativeobj.html());
 
			var xoffset=X+$(this).outerHeight()-relativeobj.outerHeight();
			var yoffset=Y+$(this).outerWidth()-relativeobj.outerWidth();
			//alert(xoffset);
 
//			$(this).find(".myRelative").css("position","absolute"); 
			$(this).find(".myRelative").css("top",xoffset+ "px"); 
			$(this).find(".myRelative").css("left",yoffset+ "px");
 
			alert($(this,".myRelative").html());
 
			//alert($(this).find(".myRelative").html());
        });
 
 
   });
 
 
</script>
 </HEAD>
 
 <BODY>
 <div> <div id="DivID" style="background:#0F0;  width:200px;height:200px;"></div>
  <div id="float" style="width:40px;height:20px;position:absolute;color:#f0f;background:#000">删除</div>
</div>
 
 
<br/>
 
<div class="myLink" style="background:#0F0;  width:200px;height:200px;">
 <div class="myRelative" style="width:40px;height:20px;position:absolute;color:#f0f;background:#c00">
 <a  href="#">删除</a>
 </div>
</div>
 
<br/>
 
<div class="myLink" style="background:#0F0;  width:200px;height:200px;">
 <div class="myRelative" style="width:40px;height:20px;position:absolute;color:#f0f;background:#c00">
 <a  href="#">删除2</a>
 </div>
</div>
 
<!--此处为远程图片，如果未指定大小，并且放的位置在mylink定义的div之前，在ie下会造成定位不准-->
<div><a href="#"><img id="1001" src="http://bbs.bg68.com/avatars/upload/0/5/1161.jpg" /></a></div>
 
 
<!-- 其他的实验 p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p-->
<script>
	//alert($("p").next().html());
	//alert($(".m").next(".myRelative").hide());
</script>
 </BODY>
</HTML>

相关文章 (Related posts)

本文来自: jquery相对浮动层

jquery, relative float div

本页面链接地址（或者引用地址 Trackback）

只有 1 条评论订阅该文评论 RSS

wpm
# 2010年08月24日 Tuesday (3 weeks ago)

好酷啊，支持支持！

发表评论