Javscript+CSS圖片查看提取顯示器代碼_圖片特效特效

Javscript+CSS圖片查看提取顯示器代碼，注意代碼里的函數$(),addEvent(),removeEvent()并未封裝到圖片查看器中，個人認為這三個函數會在網頁中多次應用，為避免重復代碼，故沒有封裝。示例中使用了淡入淡出效果(僅FF，IE中測試時太耗資源，故放棄)，和滑動效果，還有拖動。其中拖動柄在右側，初始為透明，當鼠標放在圖片上時會滑出圖片信息。

<!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" mrc="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);
}

/*圖片查看器
使用方法：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():返回覆蓋層高
*/
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   class="p7zdtfx"   id='"+this.dragbarId+ "' style='width:"+this.width/20+"px;height:"+(this.height+45)+"px;margin-left:"
+(this.width+50)+"px;' ></div>"+
"<div   class="7lfllzp"   id='picture_top'></div>"+
"<a id='"+this.imgId +"' style='width:"+this.width+"px; height:"+this.height+"px;'></a>"+
"<div   class="zjbtznp"   id='picture_bottom'><a  id='"+this.previousId+"'>上一張</a><a >|</a><a id='"+this.nextId+"'>下一張</a></div>";
document.body.appendChild(box);

所屬頻道：圖片特效特效/更新時間：2012-11-23

[收藏][報錯][返回列表]

相關圖片特效特效：

Javscript+CSS圖片查看提取顯示器代碼_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些