从老外网站上的javascript图片效果-Javascript-技术教程-asp编程网

在老外的网站上看到了这个效果：鼠标移动到图片上去，图片的上，下出现两个半透明的层，这个层写上图片的效果，说明等文字。点击下面的运行按纽就可以看到效果了
[code]
<!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" lang="gb2312">
<base href="http://www.aspprogram.cn/test/" />
<head>
<title>从老外网站上的javascript图片效果--asprogram.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.udTip{border:5px solid #aaa;width:620px;position:relative;overflow:hidden;}
.up,.down{position:absolute;width:100%;left:0;height:60px;background:#000;color:#fff;z-index:999999;filter:alpha(opacity=70);opacity:0.7;}
.up{top:-75px}
.down{bottom:-75px;background:#000 url(graphics/icon_comments_ondark.png) no-repeat 10px 30px;padding-left:20px;}
p{margin:0px;padding:20px;font-family:Arial;font-size:12px;}
p strong{font-size:18px;display:block;color:#CC0000;}
</style>
<script type="text/javascript">
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};//for IE6
ldh={
$:function(o){return typeof o=="string"?document.getElementById(o):o},
$$:function (o,p){return (p==undefined?document:this.$(p)).getElementsByTagName(o)},
on:function(o,type,fn){o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false);return this},
css:function(who,key){
  if(who.style[key]!='')return who.style[key];
  if(!!window.ActiveXObject)return who.currentStyle[key];
  return document.defaultView.getComputedStyle(who,"")
  .getPropertyValue(key.replace(/([A-Z])/g,"-$1").toLowerCase());
},
move:function(who,attr,val,s,fn){
  var who=this.$(who);
  var fm=parseInt(this.css(who,attr))||0;
  var iFx=this.fx(fm,val,s);
  clearInterval(who.moveTimer);
  who.moveTimer=setInterval(function (){
   var v=iFx();
   who.style[attr]=v+'px';
   if(v==val){ fn&&fn.call(who);clearInterval(who.moveTimer);};
  },13);return this;
},
fx:function(form,to,s){
  var m=Math[form<to?'ceil':'floor'];
  return function (){return form+=m((to-form)*(s||0.2))};
}
};
ldh.on(window,'load',function (){
var shell=ldh.$('udTip1'),tip=ldh.$$('div',shell),up=tip[0],down=tip[1];
ldh.on(shell,'mouseout',function (){ldh.move(up,'top',-120,0.05).move(down,'bottom',-120,0.05);})
.on(shell,'mouseover',function (){ldh.move(up,'top',0).move(down,'bottom',0);});
}).on(window,'load',function (){
var shell=ldh.$('udTip2'),tip=ldh.$$('div',shell),up=tip[0],down=tip[1];
ldh.on(shell,'mouseout',function (){ldh.move(up,'top',-120,0.05).move(down,'bottom',-120,0.05);})
.on(shell,'mouseover',function (){ldh.move(up,'top',0).move(down,'bottom',0);});
}).on(window,'load',function (){
var shell=ldh.$('udTip3'),tip=ldh.$$('div',shell),up=tip[0],down=tip[1];
ldh.on(shell,'mouseout',function (){ldh.move(up,'top',-120,0.05).move(down,'bottom',-120,0.05);})
.on(shell,'mouseover',function (){ldh.move(up,'top',0).move(down,'bottom',0);});
})
</script>
</head>
<body>
<div id="udTip1" class="udTip"><img src="timthumb.jpg" width=620 height=290 border=0 alt="" title=""><div class="up"><p><strong>Imax Speakers - Stereo Speakers Icons</strong>
Category: Music May 21, 2009
View Details</p></div><div class="down"><p>Includes: 5 icons File Types: .png Icon Sizes: around 512×512 Download size: 904 KB Author/Source: MX-Steel Set of 5 stereo ... More Details </p></div></div>
<div id="udTip2" class="udTip"><img src="timthumb.jpg" width=620 height=290 border=0 alt="" title=""><div class="up"><p><strong>Imax Speakers - Stereo Speakers Icons</strong>
Category: Music May 21, 2009
View Details</p></div><div class="down"><p>Includes: 5 icons File Types: .png Icon Sizes: around 512×512 Download size: 904 KB Author/Source: MX-Steel Set of 5 stereo ... More Details </p></div></div>
<div id="udTip3" class="udTip"><img src="timthumb.jpg" width=620 height=290 border=0 alt="" title=""><div class="up"><p><strong>Imax Speakers - Stereo Speakers Icons</strong>
Category: Music May 21, 2009
View Details</p></div><div class="down"><p>Includes: 5 icons File Types: .png Icon Sizes: around 512×512 Download size: 904 KB Author/Source: MX-Steel Set of 5 stereo ... More Details </p></div></div>
</body>
</html>
[/code]

从老外网站上的javascript图片效果

最新相关教程

热门教程

推荐教程