jquery获得元素高度宽度和坐标

$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
});

 

css

 

/*--Tooltip Styles--*/
.tip {
	color: #fff;
	background:#1d1d1d;
	display:none; /*--Hides by default--*/
	padding:10px;
	position:absolute;	z-index:1000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}

 

 

javascript

 

jQuery.fn.selectCity = function(targetId) {

	var _seft = this;

	var targetId = $(targetId);



	this.click(function(){

		var A_top = $(this).offset().top + $(this).outerHeight(true);  //  1

		var A_left =  $(this).offset().left;

		targetId.bgiframe();

		targetId.show().css({"position":"absolute","top":A_top+"px" ,"left":A_left+"px"});

	});



	targetId.find("#selectItemClose").click(function(){

		targetId.hide();

	});



	targetId.find("#selectSub :checkbox").click(function(){		

		targetId.find(":checkbox").attr("checked",false);

		$(this).attr("checked",true);	

		_seft.val( $(this).val() );

		targetId.hide();

	});



	$(document).click(function(event){

		if(event.target.id!=_seft.selector.substring(1)){

			targetId.hide();	

		}

	});



	targetId.click(function(e){

		e.stopPropagation(); //  2

	});



    return this;

}

 

$(function(){

	//test1:

	$("#address").selectCity("#selectItem");

	//test2：

	$("#address2").selectCity("#selectItem2");

});

 </script>