当前位置：首页 > 脚本 > 广告代码 > 焦点图 > JS实现鼠标滑过图片慢慢变清晰离开依然留下残影

JS实现鼠标滑过图片慢慢变清晰离开依然留下残影
日期：2013-05-20 15:41:17 来源：网络收集

图标滑过图片慢慢变清晰，当鼠标离开图片依然留下残影，点击后慢慢放大，其它图片会很乖巧的自动排列
第一步：
下全部源代码及演示图片

第二步：
在网页<head>区添加以下代码
[code]
<styletype="text/css">
html{
overflow:hidden;
}
body{
margin:0px;
padding:0px;
background:#000;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
#screen{
position:absolute;
top:1%;
left:1%;
width:98%;
height:98%;
background:#000;
color:#fff;
}
#screendiv{
position:absolute;
overflow:hidden;
cursor:pointer;
}
#screenimg{
position:absolute;
width:100%;
height:100%;
}
#screen.label{
position:absolute;
color:#FFF;
background:#000;
font-family:arial;
white-space:no-wrap;
}
</style>

<scripttype="text/javascript"src="dhteumeuleu.js"></script>
<scripttype="text/javascript">
/*****************************************************
*ShareJavaScript(//www.ShareJS.com)
*使用此脚本程序，请保留此声明
*获取此脚本以及更多的JavaScript程序，请访问//www.ShareJS.com
******************************************************/
//========================================================
//======JavascriptSlideshow======
//scriptwrittenbyGerardFerrandez-December31,2006
////www.dhteumeuleu.com/
//========================================================
vardiap={
/////////////////////////////////
BR:3,//bordersizeinpx
ZR:.75,//zoomratio
SP:.1,//speed
/////////////////////////////////
V:false,
S:false,
G:true,
resize:function(){
/*====windowresizeevent====*/
diap.nw=diap.scr.offsetWidth;
diap.nh=diap.scr.offsetHeight;
diap.nwu=(diap.nw*diap.ZR);
diap.nhu=(diap.nh*diap.ZR);
diap.nwt=Math.floor((diap.nw*(1-diap.ZR)*.5)/(diap.NX-1))-diap.BR;
diap.nht=Math.floor((diap.nh*(1-diap.ZR)*.5)/(diap.NY-1))-diap.BR;
diap.rc=255/((diap.nw/diap.NX)-diap.nwt);
if(diap.N){
diap.setPosition();
if(!diap.G)diap.delLabels();
}
},
setPosition:function(){
/*====calculateimagetargetposition====*/
vark=0;
vary=this.S?this.BR+Math.floor((this.NY-this.Y-1)*(this.nht+this.BR)):0;
for(varj=0;j<this.NY;j++){
varx=this.S?this.BR+Math.floor((this.NX-this.X-1)*(this.nwt+this.BR)):0;
for(vari=0;i<this.NX;i++){
varo=this.spa[k++];
o.y1=y;
o.x1=x;
o.w1=this.S?(o==this.S?this.nwu-this.BR:this.nwt):Math.ceil(this.nw/this.NX)-this.BR;
o.h1=this.S?(o==this.S?this.nhu-this.BR:this.nht):Math.ceil(this.nh/this.NY)-this.BR;
x+=this.S?((this.X==i)?this.nwu:this.nwt+this.BR):Math.ceil(this.nw/this.NX);
}
y+=this.S?((this.Y==j)?this.nhu:this.nht+this.BR):Math.ceil(this.nh/this.NY);
}
},
delLabels:function(){
/*====removetexts====*/
for(vari=0;i<diap.N;i++){
varo=diap.spa[i];
if(o.T)diap.scr.removeChild(o.T);
o.T=false;
}
},
run:function(){
/*====mainloop====*/
for(vari=0;i<diap.N;i++)diap.spa[i].move();
setTimeout(diap.run,16);
},
init:function(container,NX,NY,path,images){
/*====initializescript====*/
this.scr=id(container);
if(!this.scr||NX*NY!=images.length){alert('ID-10-Terror...');returnfalse;}
this.NX=NX;
this.NY=NY;
this.spa={};
this.resize();
vark=0;
for(vary=0;y<this.NY;y++){
for(varx=0;x<this.NX;x++){
/*====createHTMLelements====*/
vars=this.spa[k]=document.createElement('div');
s.img=document.createElement('img');
/*====opacityoptimizedfunction====*/
s.img.setOpacity=function(alpha){
if(alpha<0)alpha=0;elseif(alpha>100)alpha=100;
if(alpha==100){
/*====speedopt-removeIEfilter====*/
this.style.visibility='visible';
this.style.filter='';
this.style.opacity=1;
return100;
}elseif(alpha==0){
/*====hideimage,removeopacity====*/
this.style.visibility='hidden';
this.style.filter='';
this.style.opacity=0;
return0;
}
if(this.filters){
/*====IEfilter====*/
if(!this.filters.alpha)this.style.filter='alpha(opacity='+alpha+')';
elsethis.filters.alpha.opacity=alpha;
/*====CSSopacity====*/
}elsethis.style.opacity=alpha*.01;
returnalpha;
}
s.img.src=id('loading').src;
s.appendChild(s.img);
this.scr.appendChild(s);
/*====pre-loadimage====*/
s.pre=newImage();
s.pre.obj=s;
s.pre.onload=function(){this.obj.img.src=this.src;}
s.pre.src=path+images[k][0];
/*====setimagevariables====*/
s.x=x;
s.y=y;
s.x0=x*(this.nw/this.NX)+(this.nw/this.NX)/2;
s.y0=y*(this.nh/this.NY)+(this.nh/this.NY)/2;;
s.x1=x*(this.nw/this.NX);
s.y1=y*(this.nh/this.NY);
s.w0=0;
s.h0=0;
s.w1=0;
s.h1=0;
s.V=0;
s.t=images[k][1];
s.T=false;
/*====functionmoveimage====*/
s.move=function(){
/*====positionimages====*/
this.style.left=px(this.x0+=(this.x1-this.x0)*diap.SP);
this.style.top=px(this.y0+=(this.y1-this.y0)*diap.SP);
this.style.width=px(this.w0+=(this.w1-this.w0)*diap.SP);
this.style.height=px(this.h0+=(this.h1-this.h0)*diap.SP);
if(this!=diap.S){
/*====setimagebackgroundcolor====*/
if(Math.abs(this.w1-this.w0)>1){
varc=(!diap.G&&this.V>0)?255:16+Math.round(255-diap.rc*(this.w0-diap.nwt));
this.style.background='RGB('.concat(c,',',c,',',c,')');
}
if(this==diap.V){
/*====onmouseover:fadein====*/
if(this.V<100)this.img.setOpacity(this.V+=5);
}else{
/*====fadeout====*/
if(this.V>=0&&diap.G!=this)this.img.setOpacity(this.V-=2);
}
}
/*====texteffect====*/
if(this.T)this.dispLabel();
}
/*====displaytextfunction(typewriterFX)====*/
s.dispLabel=function(){
if(diap.G||diap.S==this){
/*====zoomedimage====*/
this.T.style.left=px(this.x0);
this.T.style.top=px(this.y0);
this.T.style.width=px(this.w0);
}else{
/*====calculatetextposition====*/
varxt=diap.S.x0+this.w0+diap.BR;
if(this.y==diap.Y){
this.T.style.top=px(this.y0-this.f-diap.BR);
if(this.y==0)varxt=diap.S.x0;
}elsethis.T.style.top=px(this.y0-(this.y<=diap.Y?diap.BR:0));
if(this.x>diap.X)this.T.style.left=px(diap.S.w0+diap.S.x0-diap.nwu*.5);
elsethis.T.style.left=px(xt);
if(this!=diap.V){
/*====texttypeout====*/
this.Tp--;
this.T.innerHTML=this.t.substring(0,this.Tp);
if(this.Tp<1){
diap.scr.removeChild(this.T);
this.T=false;
}
}else{
if(this.Tp<this.t.length){
/*====texttypein====*/
this.Tp++;
this.T.innerHTML=this.t.substring(0,this.Tp);
}
}
}
}
/*====createtextfunction====*/
s.createLabel=function(){
this.T=document.createElement('div');
this.T.className='label';
if(!diap.G&&this.x>diap.X)this.T.style.textAlign='right';
this.f=4+Math.round(Math.sqrt(diap.nht*2));
if(this==diap.S){
this.f*=2;
this.T.style.background='none';
this.T.style.textAlign='center';
}
this.T.style.fontSize=''.concat(this.f,'px');
this.T.innerHTML=this.t;
this.T.style.left=px(-1000);
this.T.style.width=px(diap.nwu*.5);
this.T.style.height=px(this.f+3);
this.Tp=0;
diap.scr.appendChild(this.T);
}
/*====onmouseoverevent====*/
s.onmouseover=function(){
if(diap.S!=this&&diap.G!=this){
/*====displayimage====*/
this.img.setOpacity(100);
this.V=this.img.setOpacity(20);
}
/*====createtext====*/
if(!this.T)this.createLabel();
diap.V=this;
}
/*====onclickevent====*/
s.onclick=function(){
/*====memorizeselectedimage====*/
diap.X=this.x;
diap.Y=this.y;
diap.V=false;
diap.G=false;
this.V=this.img.setOpacity(100);
diap.delLabels();
if(diap.S==this){
/*====zoomout-gridmodeon====*/
diap.S=false;
diap.G=this;
for(vari=0;i<diap.N;i++)diap.spa[i].createLabel();
}else{
/*====zoomin====*/
diap.S=this;
this.createLabel();
}
diap.setPosition();
}
s.createLabel();
s.ondblclick=s.onclick;
s.ondrag=function(){returnfalse;}
k++;
}
}
this.N=NX*NY;
/*====addresizeevent====*/
this.resize();
addEvent(window,'resize',diap.resize);
/*====startmainloop====*/
this.run();
}
}
/*====creatediaporama====*/
onload=function(){
/*====container,X,T,path,[image.src,text]====*/
diap.init("screen",4,4,"",[
["or8.jpg","Hislittlevoodoowasasuccess"],
["or46.jpg","Shearrivedfromnowhere"],
["or10.jpg","ascuteasshecouldbe"],
["or4.jpg","Itwasanightoffullmoon"],
["or16.jpg","Itdidn'ttakehimanytimetofallinlove"],
["or9.jpg","Hehadbeencertainofhissuccess"],
["or6.jpg","Inafewdaysafter"],
["or27.jpg","Allthetoolswereinplace"],
["or14.jpg","Thegirlleftanote..."],
["or30.jpg","...sayingshehadlefthome"],
["or1.jpg","揝owhat抯withthepanic??"],
["or2.jpg","Tearsforfears"],
["or12.jpg","Alightinthedark"],
["or44.jpg","Flashesofpainandhope"],
["or39.jpg","Ifonlywecouldcapture..."],
["or33.jpg","...thebeautyofautumn"]
]);
}
</script>
[/code]

立即下载

鼠标滑过图片墙

上一篇：jQuery实现的焦点图全屏背景幻灯动态切换效果

下一篇：jQuery实现多图片不同风格的幻灯展示效果