点击页面中图片查看效果:
<!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 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 id='"+this.exitId+"' >退出</a>";
document.body.appendChild(cover);
var box=document.createElement("div");
box.id=this.boxId;
box.innerHTML="<div id='"+this.dragbarId+ "' style='width:"+this.width/20+"px;height:"+(this.height+45)+"px;margin-left:"
+(this.width+50)+"px;' ></div>"+
"<div id='picture_top'></div>"+
"<a id='"+this.imgId +"' style='width:"+this.width+"px; height:"+this.height+"px;'></a>"+
"<div id='picture_bottom'><a id='"+this.previousId+"'>上一张</a><a >|</a><a id='"+this.nextId+"'>下一张</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&¤tOpacity!==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; 来源:http://online.sccnn.com/;大小:258KB;尺寸:1280 x 1024" src="http://online.sccnn.com/desk2/1503/s01.jpg"/></a></li>
<li><a ><img title='名称:Pincel3D_2; 来源:http://online.sccnn.com/;大小:132KB;尺寸:1280 x 1024' src="http://online.sccnn.com/desk2/1503/s02.jpg" /></a></li>
<li><a ><img title='名称:Pincel3D_3; 来源:http://online.sccnn.com/;大小:151KB;尺寸:1280 x 1024' src="http://online.sccnn.com/desk2/1503/s03.jpg" /></a></li>
<li><a ><img title='名称:Pincel3D_4; 来源:http://online.sccnn.com/;大小:253KB;尺寸:1280 x 1024' src="http://online.sccnn.com/desk2/1503/s04.jpg" /></a></li>
<li><a><img title='名称:Pincel3D_5; 来源:http://online.sccnn.com/;大小:578KB;尺寸:1280 x 1024' src="http://online.sccnn.com/desk2/1503/s05.jpg" /></a></li>
<li><a ><img title='名称:Pincel3D_6; 来源:http://online.sccnn.com/;大小:77.1KB;尺寸:1280 x 1024' src="http://online.sccnn.com/desk2/1503/s06.jpg" /></a></li>
</li>
<li><a><img title='名称:Pincel3D_7; 来源:http://online.sccnn.com/;大小:151KB;尺寸:1280 x 1024' src="http://online.sccnn.com/desk2/1503/s07.jpg" /></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>
图片查看器
使用方法：pictureBox.init(boxId,coverId,range,picwidth,picheight);
boxId:图片查看器的主框体id，可据此设计框体样式。自设
coverId:覆盖层id，自设
rang:某个范围内的图片可以通过图片查看器查看高像素图片，rang为节点对象
pictwidth:要显示图片的宽度。自设
picheight:要显示图片的高度，自设
！！ 注意：方法的调用必须在文档底部，或window.onload中，但建议在文档底部调用，这样可避免在图片未加载完时图片查看器不看用
所有方法说明：
1. init():初始化图片查看器，包括创建节点，和添加事件
2. createBox():创建图片查看器所需所有节点
3.addEvents():为节点添加所需所有事件
4. drag(elem):使可拖动 node elem: 拖动柄
6. fadeout(elem,start,end,speed):淡出 documentElement elem:淡出元素,int start 起始透明度，int end 结束透明度，帧 speed：速度，
6. fadein(elem,start,end,speed):淡出 documentElement elem:淡出元素,int start 起始透明度，int end 结束透明度，帧 speed：速度，
7.follow(source,follower,handlerBeforeFl): documentElement source:跟随域,documentElement follower:跟随元素，function handlerBeforeFl :跟随效果前执行，可为空
8.viewPic(container,src,handler): documentElement container:图片的容器，src：图片源地址，handler:修改源地址的函数，可为空
9.hide():隐藏图片查看器
10.start():显示图片查看器
11._imgHandler(src):修改src，与viewPic中handler相对应，根据具体情况可以自定义此函数
12._handlerBeforeFl():与follow中handlerBeforeFl相对应；功能是获取img标签中的title信息，分号作为换行，也可以根据具体情况自定义此函数。
13._coverWidth():返回覆盖层宽
14._coverHeight():返回覆盖层高
注意：函数$(),addEvent(),removeEvent()并未封装到图片查看器中，因为我认为这三个函数会在网页中多次应用，为避免重复代码，故没有封装。
QQ：2693987339(点击联系)购买教程光盘
:
