鼠标滑过小图显示大图和标题

技术文章

鼠标滑过小图显示大图和标题

时间：2009-03-16 点击：1855

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#hovShow{border:1px solid #000000;position:absolute;visibility:hidden;background-color:#FFFFFF;overflow:hidden;}
#hovShowBg{position:absolute;visibility:hidden;background-color:#0C3E74;filter:Alpha(Opacity=40);Opacity:0.4;}
#hovShow #loadimg{height:20px;width:100px;margin-top:-11px;margin-left:0px;position:absolute;left:0px;top:50%;background-color:#FFFFFF;line-height:20px;background-image:url(http://www.hwj123.com/img/loading.gif);background-repeat:no-repeat;background-position:5px center;text-indent:28px;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:none;border-bottom-style:solid;border-left-style:none;border-top-color:#000000;border-right-color:#000000;border-bottom-color:#000000;border-left-color:#000000;}
#sTit{position:absolute;overflow:hidden;z-index:9999;}
#sTit div{line-height:30px;background-color:#000000;height:30px;color:#FFFFFF;text-align:center;}
body {
	font-size: 12px;
}
</style>
<script language="javascript">
function $(d){return document.getElementById(d);}
String.prototype.trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");}
var isIE = (document.all) ? true : false;
function _g(box){var xy={"x":box.offsetLeft,"y":box.offsetTop};while(box=box.offsetParent){xy.x+=box.offsetLeft;xy.y+=box.offsetTop;}return xy;}
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}
function addEventHandler(oTarget, sEventType, fnHandler) {
	if (oTarget.addEventListener) {oTarget.addEventListener(sEventType, fnHandler, false);} 
	else if (oTarget.attachEvent) {oTarget.attachEvent("on" + sEventType, fnHandler);} 
	else {oTarget["on" + sEventType] = fnHandler;}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {oTarget.removeEventListener(sEventType, fnHandler, false);} 
	else if (oTarget.detachEvent) {oTarget.detachEvent("on" + sEventType, fnHandler);} 
	else { oTarget["on" + sEventType] = null;}
};
var hovShow = Class.create();
hovShow.prototype = {
  initialize: function(id,name) {
    this.name = name;
	this.alpha = 0;
	this.titM = 30;
    var menu = $(id);
	this.d = new Object();
    this.box = document.createElement('div');
	this.box.setAttribute("id","hovShow");
	this.bg = document.createElement('div');
	this.bg.setAttribute("id","hovShowBg");
	this.tit = document.createElement('div');
	this.tit.setAttribute("id","sTit");
	this.tit.appendChild(document.createElement('div'));
	this.tit.style.height = this.titM+"px";
	this.loadimg = document.createElement('div');
	this.loadimg.setAttribute("id","loadimg");
	this.loadimg.appendChild(document.createTextNode("正在加载..."));
	this.box.appendChild(this.loadimg);
	document.body.appendChild(this.bg);
	document.body.appendChild(this.box);
	document.body.appendChild(this.tit);
	if(isIE)this.box.style.filter=this.bg.style.filter=this.tit.style.filter="Alpha(Opacity=0)";
	else this.box.style.opacity=this.bg.style.opacity=this.tit.style.opacity = 0;
	var as = menu.getElementsByTagName("img");
	for(i=as.length-1;i>=0;i--){
		this.addHovFun(as[i].parentNode);
		addEventHandler(as[i].parentNode,"click",function (e){if(isIE)e.returnValue=false;else e.preventDefault();});
	}
  },
  addHovFun:function (ele){
    addEventHandler(ele,"mouseover",Bind(this,this.show,[ele,ele.href]));
	addEventHandler(ele,"mouseout",Bind(this,this.close,arguments));
  },
  show:function (ele,src){
	clearInterval(this.interval);
	this.loadimg.style.visibility="visible";
	this.d = ele;
	this.img = new Image();
	this.img.style.margin = "10px";
	this.img.src = src;
	this.box.appendChild(this.img);
	addEventHandler(this.img,"load",Bind(this,this.dw,arguments));
	this.box.style.visibility="visible";
	this.bg.style.visibility="visible";
	this.box.style.width = this.box.style.height =  "100px";
	this.box.style.top = this.bg.style.top = "50%";
	this.box.style.marginTop = document.documentElement.scrollTop-50+"px";
	this.bg.style.width = this.bg.style.height = "110px";
	this.bg.style.marginTop = document.documentElement.scrollTop -54+"px";
	this.tit.style.width = "102px"
	this.tit.style.top = "50%";
	this.tit.style.marginTop = document.documentElement.scrollTop + 50 -(this.titM-2)+"px"; 
	var xy = _g(this.d);
	this.box.style.left = xy.x+this.d.offsetWidth+"px";
	this.tit.style.left = xy.x+this.d.offsetWidth+"px";
	this.bg.style.left = xy.x+this.d.offsetWidth-4+"px";
	this.alpha = 0;
	this.interval = window.setInterval(this.name+".Alpha()",10);
  },
  dw:function (){
	this.loadimg.style.visibility="hidden";
	var w = this.img.offsetWidth+20,h = this.img.offsetHeight+20;
	if(h>document.documentElement.clientHeight){
	 w = (document.documentElement.clientHeight/h)*w;
	 h=document.documentElement.clientHeight;
	 this.img.style.height = h-20+"px";
	 this.img.style.width =  w-20+"px"
	}
	var ele = this.d;
	this.box.style.width =  w+"px";
	this.box.style.height = h +"px";
	this.bg.style.width =  w+10+"px";
	this.bg.style.height = h +10 +"px";
	this.tit.style.width = w+2+"px";
	this.box.style.top = this.bg.style.top = "50%";
	var _x = _g(ele).x - w-20;
	_x = _x<0?_x+w+ele.offsetWidth+30:_x;
	this.box.style.left = this.tit.style.left= _x+"px";
	this.tit.style.top = "50%";
	this.tit.style.marginTop = document.documentElement.scrollTop + h/2 -(this.titM-2)+"px"; 
	this.bg.style.left =  _x-4+"px";
	this.box.style.marginTop = document.documentElement.scrollTop -h/2 +"px";
	this.bg.style.marginTop =document.documentElement.scrollTop -(h+8)/2 +"px";
  },
  Alpha:function (){
    this.alpha+=10;
	if(isIE){
      this.box.style.filter="Alpha(Opacity="+this.alpha+")";
	  this.bg.style.filter="Alpha(Opacity="+parseInt(this.alpha/3)+")";
	}else{
	  this.box.style.opacity=this.alpha/100;
	  this.bg.style.opacity=parseInt(this.alpha/3)/100;
	}
	if(this.alpha>=100){
	 clearInterval(this.interval);
	 this.tit.style.visibility="visible";
	 if(isIE)this.tit.style.filter="Alpha(Opacity=0)";
	 else this.tit.style.opacity = 0;
	 this.tit.firstChild.innerHTML = this.d.firstChild.alt;
	 this.tit.firstChild.style.marginTop = this.titM+"px";
	 this.interval = window.setInterval(this.name+".titFun()",10);
	}
  },
  close:function (){
   clearInterval(this.interval);
   this.box.removeChild(this.img);
   this.box.style.visibility="hidden";
   this.bg.style.visibility="hidden";
   this.tit.style.visibility="hidden";
   this.loadimg.style.visibility="hidden";
   this.img.src="about:blank";
   if(isIE)this.box.style.filter=this.bg.style.filter=this.tit.style.filter="Alpha(Opacity=0)";
   else this.box.style.opacity = this.bg.style.opacity = this.tit.style.opacity = 0;
  },
  titFun:function (){
	var _el = this.tit.firstChild;
	var _mt = parseInt(_el.style.marginTop);
	var tw = _mt+(-_mt)/5;
	tw = Math.floor(tw);
	_el.style.marginTop = tw+"px";
	if(isIE)this.tit.style.filter="Alpha(Opacity="+(this.titM-tw)*60/this.titM+")";
	else this.tit.style.opacity = (this.titM-tw)*0.6/this.titM;
	if(tw<=0){
		_el.style.marginTop ="0px";
		clearInterval(this.interval);
	}
  }
};
addEventHandler(window,"load",function (){
 show = new hovShow("tui","show");
});
</script>
</head>
<body>
<div id="tui">
  <div><a href="http://www.it214.net/picture/133/01.jpg" target="_blank"><img src="http://www.it214.net/picture/133/04.jpg" alt="图片一" border="0" width="100" height="100" /></a><br />
    图片一 </div>
  <div><a href="http://www.it214.net/picture/133/02.jpg" target="_blank"><img src="http://www.it214.net/picture/133/05.jpg" alt="图片2" width="100" border="0" height="100" /></a><br />
    图片2 </div>
  <div><a href="http://www.it214.net/picture/133/03.jpg" target="_blank"><img src="http://www.it214.net/picture/133/06.jpg" alt="图片3" border="0" width="100" height="100"/></a><br />
    图片3 </div>
  
  <div> </div>
</div>
</body>
</html>

javascript 判断图片显示完成

模拟select下拉框

你最近浏览的记录

javscript滑动条特效

焦点图片轮番切换

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：