Javascript教程_大图查看器源码教程_Javascript教程_H5之家

大图查看器源码教程

点击页面中图片查看效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片提取器</title>
<style type="text/css">
/*此为网页文档CSS，此部分变动并不会影响图片查看器显示*/
body{
background:#012D50;
}
h1{
cursor:default;
margin-top:30px;
}
h1 a{
text-decoration:none;
color:#ccc;
cursor:default;}
h1 a:hover{
color:#006AD5;
cursor:default;}
.navsite{
border-bottom:1px solid #336ad5;}
.navsite li{
display:inline;
list-style:none;
}
#container {
margin-top:80px;
width:800px;
height:auto;
background-color:#fff;
padding:65px 50px;
color:#6280AE;
text-align:left;
}
#container p {
text-indent:2.5em;
margin:0 0 1em 0;
padding:0;
text-align:left;}
#container span {
font-size:25px;}
.picture {
padding:0px;}
.picture li{
display:inline;
list-style:none;
margin:0px;}
.picture li img {
width :98px;
height:80px;
border:1px solid #ccc;
display:block;
float:left;
margin:15px 7px;
border:1px solid #6280AE}
/* 以下为图片查看器样式，可对照init()函数中对各个部分的命名方式来看*/
#picturebox{
display:none;
position:absolute;
background-color:#fff;
border:1px solid #ccc;
}
#cover{
display:none;
background-color:#fff;
position:absolute;
top:0px;
left:0px;
opacity:0.4;
filter:alpha(opacity=50);}
#picturebox_info{
min-width:250px;
height:auto;
border:1px solid #ccc;
position:absolute;
display:none;
background-color:#FFFF8E;
opacity:0.8;
filter:alpha(opacity=80);
padding:5px;
color:#333;
font-size:14px;}
#picturebox a {
cursor:pointer;
font-size:13px;
color:#555;
}
#picturebox_img {
width:auto;
height:auto;
display:block;
margin:15px ;
margin-top:0;
margin-bottom:0px;
border:1px solid #ddd;
}
#picture_bottom {
line-height:30px;
width:auto;
margin-right:15px;
text-align:right;
}
#picture_top {
height:15px;
width:0px;}
#picturebox_dragbar{
position:absolute;
margin-left:600px;
background-color:#fff;
display:block;
border:1px solid #ccc;
}
html>body #picturebox_dragbar {margin-top:0px;}
#picturebox_exit {
cursor:pointer;
font-size:25px;
float:right;
margin:10px;
color:#222;}
</style>
<script>
/*注意：函数$(),addEvent(),removeEvent()并未封装到图片查看器中，因为我认为这三个函数会在网页中多次应用，为避免重复代码，故没有封装。*/
function $(elem){
return document.getElementById(elem);
}
function addEvent(elem , type , handler){
if(elem.addEventListener)
{
elem.addEventListener(type,handler,false);
}
else if(elem.attachEvent)
{
if( ! elem._$func) elem._$func={};
elem._$func[type+addEvent._guid]=function(evt) {evt=fixEvent(window.event); handler.call(elem,evt) ;}
handler._guid=addEvent._guid;
elem.attachEvent("on"+type,elem._$func[type+addEvent._guid]);
addEvent._guid++;
}
else elem["on"+type]=handler;
}
addEvent._guid=0;
function removeEvent(elem,type,handler){
if(elem.removeEventListener) {
elem.removeEventListener(type,handler,false);
}
else if(elem.detachEvent) {
elem.detachEvent("on"+type,elem._$func[type+handler._guid]);
delete elem._$func[type+handler._guid];
}
else elem["on"+type]=function(){ }
}
function fixEvent(evt) {
evt.preventDefault=function(){this.returnValue=false;}
evt.stopPropagation=function(){this.cancelBubble=true;}
return evt
}
var pictureBox={
init:function(boxId,coverId,range,picwidth,picheight){
range=range || document;
this.imgs=range.getElementsByTagName("img");
this.boxId=boxId;
this.coverId=coverId;
this.maxOfPic=this.imgs.length;
this.index=0;
this.exitId=boxId+"_exit";
this.dragbarId=boxId+"_dragbar";
this.imgId=boxId+"_img";
this.nextId=boxId+"_next";
this.previousId=boxId+"_previous";
this.infoId=boxId+"_info";
this.width=picwidth;
this.height=picheight;
this.createBox();
},
createBox:function(){
var cover=document.createElement("div");
cover.id=this.coverId;
cover.innerHTML="<a >退出</a>";
document.body.appendChild(cover);
var box=document.createElement("div");
box.id=this.boxId;
box.innerHTML="<div ></div>"+
"<div></div>"+
"<a></a>"+
"<div><a >上一张</a><a >|</a><a>下一张</a></div>";
document.body.appendChild(box);
var info=document.createElement("p");
info.id=this.infoId;
document.body.appendChild(info);
this.addEvents();
},
addEvents:function(){
addEvent($(this.exitId),"click",this.hide);
this.drag($(this.dragbarId));
if(!$(this.dragbarId).filters){
var timer;
addEvent($(this.dragbarId),"mouseover" ,function(){
timer=window.setTimeout(function(){pictureBox.fadeout($(pictureBox.dragbarId))},1000);
});
addEvent($(this.dragbarId),"mouseout",function(){
window.clearTimeout(timer);
pictureBox.fadein($(pictureBox.dragbarId));
});
}
this.follow($(this.imgId) , $(this.infoId),this._handlerBeforeFl);
addEvent($(this.nextId),"click",function(){
pictureBox.index++;
if(pictureBox.index>=pictureBox.maxOfPic) pictureBox.index=0;
pictureBox.viewPic($(pictureBox.imgId),
pictureBox.imgs[pictureBox.index].src,pictureBox._imgHandler);
});
addEvent($(this.previousId),"click",function(){
pictureBox.index--;
if(pictureBox.index<0) pictureBox.index=pictureBox.maxOfPic-1;
pictureBox.viewPic($(pictureBox.imgId),
pictureBox.imgs[pictureBox.index].src,pictureBox._imgHandler);
});
for(var i=0;i<this.maxOfPic; i++){
var that=this;
(function(){
var index=i;
addEvent(pictureBox.imgs[i],"click",function(){that.start(index);});
})();
}
},
drag:function(elem){
var parent=elem.parentNode;
var that=this;
addEvent(elem,"mousedown",function(evt){
elem.style.cursor="move";
var x=parseInt(evt.clientX)-parseInt(parent.style.left);
var y=parseInt(evt.clientY)-parseInt(parent.style.top);
addEvent(document,"mousemove",moveHandler);
addEvent(document,"mouseup",upHandler);
function moveHandler(evt){
parent.style.top=(parseInt(evt.clientY)-y)+"px";
parent.style.left=(parseInt(evt.clientX)-x)+"px";
evt.stopPropagation();
}
function upHandler(){
elem.style.cursor="default";
removeEvent(document,"mousemove",moveHandler);
removeEvent(document,"mouseup",upHandler);
evt.stopPropagation();
}
evt.stopPropagation();
evt.preventDefault();
});
},
fadeout:function(elem,start,end,speed){
start=start || 0;
end=end || 100;
speed=speed || 25;
var currentOpacity;
if(elem.filters) currentOpacity=elem.filters.alpha.opacity;
else currentOpacity=parseInt(elem.style.opacity)*100;
if (currentOpacity>=98 || (!currentOpacity&&currentOpacity!==0)) return;
function fadeout(){
var timer=setInterval(
function(){
start+=2;
if(elem.filters) elem.style.filter= "alpha(opacity="+start+")";
else elem.style.opacity=start/100.0;
if(start>=100) clearInterval(timer);
},parseInt(1000/speed));
}
fadeout();
},
fadein:function(elem,start,end,speed){
start=start || 100;
end=end || 0;
speed=speed || 25;
var currentOpacity;
if(elem.filters) currentOpacity=elem.filters.alpha.opacity;
else currentOpacity=parseInt(elem.style.opacity)*100;
if(currentOpacity< 2 ) return ;
var timer=setInterval(function(){
start -=2;
if(elem.filters) elem.style.filter="alpha(opacity="+start+")";
else elem.style.opacity=start/100.0;
if(start<=0) {clearInterval(timer);}
},1000/speed);
},
follow:function(source,follower,handlerBeforeFl){
handlerBeforeFl=handlerBeforeFl || function(){};
function follow(evt){
handlerBeforeFl();
var x=parseInt(evt.clientX)+10;
var y=parseInt(evt.clientY)+10;
follower.style.position="absolute";
follower.style.top=y+"px";
follower.style.left=x+"px";
follower.style.display="block";
}
function hide(evt) {
follower.style.display="none";
}
addEvent(source,"mousemove",follow);
addEvent(source,"mouseout",hide);
},
viewPic:function(container,src,handler){
var that=this;
handler = handler|| function(s){return s;};
src=handler(src);
var img=document.createElement("img");
img.style.width=that.width+"px";
img.style.height=that.height+"px";
img.src=src;
if(!img.complete){
img.onload=imgloadHandler;
img.onerror=imgerrorHandler;
container.innerHTML="Loading . . .";
}
else imgloadHandler();
function imgloadHandler(){
container.innerHTML="";
container.appendChild(img);
}
function imgerrorHandler(){
container.innerHTML="can't load img !";
}
},
hide:function(){
$(pictureBox.coverId).style.display="none";
$(pictureBox.boxId).style.display="none";
document.documentElement.style.overflow="auto";
},
start:function(index){
this.index=index;
window.scrollTo(0,0);
document.documentElement.style.overflow="hidden";
$(this.coverId).style.width=this._coverWidth()+"px";
$(this.coverId).style.height=Math.max(this._coverHeight(),document.body.clientHeight)+"px";
$(this.boxId).style.top=(this._coverHeight()-parseInt(this.height))/2+"px";
$(this.boxId).style.left=(this._coverWidth()-parseInt(this.width))/2+"px";
$(this.coverId).style.display="block";
$(this.boxId).style.display="block";
this.viewPic($(this.imgId),this.imgs[this.index].src,this._imgHandler);
},
_imgHandler:function(src){
var num=src.lastIndexOf("s");
var src1=src.substring(0,num);
var src2=src.substring(num+1,src.length);
src=src1+src2;
return src;
},
_handlerBeforeFl:function(){
var index=pictureBox.index;
title=pictureBox.imgs[index].title;
title=title.replace(/\;/g,"<br/>");
$(pictureBox.infoId).innerHTML=title;
},
_coverHeight:function(){
return document.documentElement.clientHeight;
},
_coverWidth:function(){
return document.documentElement.clientWidth;
}
};
</script>
</head>
<body>
<h1><a href="#">图片查看器测试</a></h1>
<ul class="navsite"></ul>
<div align="center">
<div id="container">
<h3>前面要说的:</h3>
<p>
示例中使用了淡入淡出效果(仅FF，IE中测试时太耗资源，故放弃)，和滑动效果，还有拖动。
其中拖动柄在右侧，初始为透明，当鼠标放在图片上时会滑出图片信息。<br />
使用方法：pictureBox.init(boxId,coverId,range,picwidth,picheight);<br />
<span>点击网页上图片</span>
</p>
<h3>可以有些文档:</h3>
<br /><br /><br />
<ul class="picture">
<li><a ><img title="名称:Pincel3D_1; 来源:;大小:258KB;尺寸:1280 x 1024" src=""/></a></li>
<li><a ><img title='名称:Pincel3D_2; 来源:;大小:132KB;尺寸:1280 x 1024' src="" /></a></li>
<li><a ><img title='名称:Pincel3D_3; 来源:;大小:151KB;尺寸:1280 x 1024' src="" /></a></li>
<li><a ><img title='名称:Pincel3D_4; 来源:;大小:253KB;尺寸:1280 x 1024' src="" /></a></li>
<li><a><img title='名称:Pincel3D_5; 来源:;大小:578KB;尺寸:1280 x 1024' src="" /></a></li>
<li><a ><img title='名称:Pincel3D_6; 来源:;大小:77.1KB;尺寸:1280 x 1024' src="" /></a></li>
</li>
<li><a><img title='名称:Pincel3D_7; 来源:;大小:151KB;尺寸:1280 x 1024' src="" /></a></li>
</ul>
<p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
</div></div>
<script type="text/javascript">
/*图片查看器调用*/
pictureBox.init("picturebox","cover",$('container'),700,400);
</script>
</body>
</html>