首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 > Js图片浏览

来自国外的一款Js图片浏览效果

2010-07-06 08:49:23 作者：

国外的Js图片浏览效果，在国外的一些网站见到的比较多，国内人都喜允左右箭头控制，用缩略图控制其它更合理呢，因此本代码重新优化一下还是很适合使用的呢。

效果图:

测试代码:

<!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> 
<title>Js图片浏览器</title> 
</head> 
<body> 
<button onclick="Slider.next()">play</button> 
<script type="text/javascript"> 
<!-- 
Slider = { 
isIE : true, 
m_imageSource : [], 
m_selIdx : 0, 
m_direction : 1, 
m_mainviewer : null, 
m_delayTimer : null, 
m_delayTimer1 : null, 
m_curObj : null, 
m_tarObj : null, 
m_inited : false, 
init : function(id, w, h, w1, h1, p, t, s, source){ 
this.isIE = document.all ? true : false; 
this.canvasWidth = w; 
this.canvasHeight = h; 
this.imageWidth = w1; 
this.imageHeight = h1; 
this.m_percent = p; 
this.m_top = t; 
this.m_spaceWidth = s; 
this.writeCanvas(id); 
for(var i=0;i<source.length;i++) 
{ 
this.container.innerHTML += '<img src="'+source[i]+'" border="0" style="'+(this.isIE?'filter:alpha(opacity=50)':'opacity:0.5')+';width:'+w1+'px;height:'+h1+'px;position:absolute;left:'+(i*w1+i*this.m_spaceWidth)+'px;top:'+this.m_top+'px;" index="'+i+'"/>'; 
} 
this.m_mainviewer = this.container.firstChild.cloneNode(true); 
this.bind(); 
this.start(); 
}, 
writeCanvas : function(id) 
{ 
document.write('<div id="'+id+'" style="width:'+this.canvasWidth+'px;height:'+this.canvasHeight+'px;position:relative;overflow:hidden;background-color:black"></div>'); 
this.container = document.getElementById(id); 
}, 
bind : function(obj, evt, fun){ 
var obj = this.container; 
for(var i=0;i<obj.childNodes.length;i++) 
{ 
this.attachEvent(this.container.childNodes[i], "mouseover", this.mouseover); 
this.attachEvent(this.container.childNodes[i], "mouseout" , this.mouseout); 
this.attachEvent(this.container.childNodes[i], "click" , this.click); 
} 
}, 
attachEvent : function(obj, evt, fun){ 
if (Slider.isIE) 
{ 
obj.attachEvent("on"+evt, fun) 
}else 
{ 
obj.addEventListener(evt, fun, false); 
} 
}, 
mouseover : function(e) 
{ 
if(!e)e=window.event; 
var obj = e.srcElement || e.target; 
if (Slider.isIE) 
{ 
obj.style.filter = "alpha(opacity=80)"; 
}else{ 
obj.style.opacity = "0.8"; 
} 
}, 
mouseout : function(e) 
{ 
if(!e)e=window.event; 
var obj = e.srcElement || e.target; 
if (Slider.isIE) 
{ 
obj.style.filter = "alpha(opacity=50)"; 
}else{ 
obj.style.opacity = "0.5"; 
} 
}, 
click : function(e) 
{ 
if(!e)e=window.event; 
var obj = e.srcElement || e.target; 
var mobj = Slider.m_mainviewer; 
Slider.m_selIdx = obj.getAttribute("index"); 
Slider.m_curObj = Slider.m_mainviewer; 
Slider.m_tarObj = obj; 
Slider.m_delayTimer = Slider.fadeIn(200,5); 
}, 
start : function(){ 
var obj = this.m_mainviewer; 
if (Slider.isIE) 
{ 
obj.style.filter = "alpha(opacity=100)"; 
}else{ 
obj.style.opacity = "1"; 
}

this.container.appendChild(this.m_mainviewer); 
this.m_mainviewer.style.width = parseInt(this.m_mainviewer.style.width)*(1+this.m_percent)+"px"; 
this.m_mainviewer.style.height = parseInt(this.m_mainviewer.style.height)*(1+this.m_percent)+"px"; 
this.m_curObj = this.container.childNodes[this.m_selIdx]; 
this.m_tarObj = this.m_mainviewer; 
if(this.m_delayTimer)clearInterval(Slider.m_delayTimer); 
this.m_delayTimer = this.fadeIn(200,5); 
}, 
next : function(){ 
var obj = this.container; 
var mobj = this.m_mainviewer; 
if(this.m_selIdx == obj.childNodes.length-2) 
{ 
this.m_direction = -1; 
} 
if(this.m_selIdx == 0) 
{ 
this.m_direction = 1; 
} 
Slider.m_curObj = mobj; 
Slider.m_tarObj = obj.childNodes[this.m_selIdx]; 
this.m_delayTimer = this.fadeIn(200,5); 
mobj.src = obj.childNodes[this.m_selIdx].src; 
if(this.m_direction==-1){ 
this.m_selIdx --; 
}else{ 
this.m_selIdx ++; 
} 
}, 
fadeIn : function(aa, ab){ 
var obj = this.container; 
with(this.m_curObj.style){var t1 = parseInt(left);var t3 = parseInt(width);var t4 = parseInt(height);var t5 = parseInt(top);} 
if (Slider.m_inited) 
{ 
var k1 = (t1 - (this.canvasWidth- parseInt(this.m_curObj.style.width))/2)/ab; 
var k3 = (t3-parseInt(this.m_tarObj.style.width))/ab; 
var k4 = (t4-parseInt(this.m_tarObj.style.height))/ab; 
var k5 = (t5 - parseInt(this.m_tarObj.style.top))/ab; 
}else{ 
var k1 = (t1 - (this.canvasWidth- this.imageWidth*(1+this.m_percent))/2)/ab; 
var k3 = (t3- this.imageWidth*(1+this.m_percent))/ab; 
var k4 = (t4 - this.imageHeight*(1+this.m_percent))/ab; 
var k5 = (this.imageHeight * this.m_percent/2)/ab; 
} 
var mobj = this.m_mainviewer; 
return setInterval(function(){if(ab<1){ 
clearInterval(Slider.m_delayTimer); 
if(Slider.m_inited){ 
if (!Slider.m_fadein) 
{ 
Slider.m_curObj = obj.childNodes[Slider.m_selIdx]; 
Slider.m_tarObj = mobj; 
mobj.src = obj.childNodes[Slider.m_selIdx].src; 
Slider.m_fadein = true; 
Slider.m_inited = false; 
Slider.m_delayTimer = Slider.fadeIn(200,10); 
}else{ 
Slider.m_fadein = false; 
Slider.m_inited = true; 
} 
} 
Slider.m_inited = true; 
return; 
} 
ab--;t1-=k1;t3-=k3;t4-=k4;t5-=k5; 
if (Slider.m_fadein) 
{ 
for(var i=0;i<obj.childNodes.length-1;i++) 
{ 
obj.childNodes[i].style.left = (parseInt(t1) + (Slider.imageWidth + Slider.m_spaceWidth)*(i-Slider.m_selIdx))+"px"; 
}

} 
with(mobj.style){left = t1 + "px";top = t5 + "px";width = t3 + "px";height = t4 + "px";} 
} 
,aa/ab) 
} 
} 
Slider.init('aaa',400,600,180,100, 0.5, 200, 20, [ 
"//img.jbzj.com/demoimg/201005/r_s1.jpg", 
"//img.jbzj.com/demoimg/201005/r_s2.jpg", 
"//img.jbzj.com/demoimg/201005/r_s3.jpg", 
"//img.jbzj.com/demoimg/201005/r_s4.jpg", 
"//img.jbzj.com/demoimg/201005/r_s1.jpg", 
"//img.jbzj.com/demoimg/201005/r_s2.jpg", 
"//img.jbzj.com/demoimg/201005/r_s3.jpg", 
"//img.jbzj.com/demoimg/201005/r_s4.jpg" 
]); 
//--> 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来自国外的一款Js图片浏览效果

您可能感兴趣的文章: