<!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=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
html, body, div, p, a {
margin:0;
padding:0
}
body {
font:12px simsun, Arial, tahoma, Verdana, sans-serif;
}
:focus {
outline:none
}
a:link, a:visited, a:hover {
text-decoration:none
}
.rot0{-moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); -o-transform: rotate(0deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);}
.rot1{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); -o-transform: rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.rot2{-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);-o-transform: rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}
.rot3{-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); -o-transform: rotate(2700deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.spic a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}
.spic a:hover{font-size:9px;}
.spic a:hover img{-moz-opacity:0.5; filter:alpha(opacity=100);cursor:hand;}
.top {
height:50px;
width:100%;
border-bottom:1px solid #ddd;
position:absolute;
top:0;
left:0;
text-align:right
}
.top img {
margin:10px 15px 0 0
}
.left {
width:100px;
border-right:1px solid #ddd;
position:absolute;
top:51px;
left:0;
overflow-y:auto;
bottom:0
}
.left img {
margin:20px 0 0 10px;
}
.right {
overflow:hidden;
position:absolute;
top:51px;
left:101px;
bottom:0;
right:0;
text-align:center; padding-top:20px
}
</style>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<style type="text/css">
body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; }
td { font-size: 12px; line-height: 150%; }
</style>
<SCRIPT language=JavaScript>
//move image
drag = 0
move = 0
var bitemp = 0;
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");
//Shrink image
function smallit()
{
if(bitemp>-5)
{
var w=parseInt(document.images["imageshow"].width);
var h=parseInt(document.images["imageshow"].height);
document.images["imageshow"].width=w/1.2;
document.images["imageshow"].height=h/1.2;
bitemp--;
}
}
//Enlarge image
function bigit()
{
if(bitemp<10)
{
var w=parseInt(document.images["imageshow"].width);
var h=parseInt(document.images["imageshow"].height);
document.images["imageshow"].width=w*1.2;
document.images["imageshow"].height=h*1.2;
bitemp++;
}
}
//switch image
function seeBig(_this) {
document.images["imageshow"].src=_this.parentNode.getElementsByTagName("img")[0].src;
document.images["imageshow"].height=_this.parentNode.getElementsByTagName("img")[0].height*8;
document.images["imageshow"].width=_this.parentNode.getElementsByTagName("img")[0].width*8;
}
//rotate&restore image
window.onload = function(){
//rotate image
var param = {
right: document.getElementById("rotRight"),
left: document.getElementById("rotLeft"),
real: document.getElementById("rotReal"),
img: document.getElementById("images1"),
rot: 0
};
var fun = {
right: function(){
param.rot +=1;
param.img.className = "rot"+param.rot;
if(param.rot === 4){
param.rot = 0;
}
return false;
},
left: function(){
param.rot -=1;
if(param.rot === -1){
param.rot = 3;
}
param.img.className = "rot"+param.rot;
return false;
},
//restore image
real: function(){
param.rot =0;
param.img.className = "rot"+param.rot;
document.images["imageshow"].height=(document.images["imageshow"].height/document.images["imageshow"].width)*document.images["imagehide"].width;
document.images["imageshow"].width=document.images["imagehide"].width;
document.getElementById("block1").style.top=90;
document.getElementById("block1").style.left=200;
bitemp = 0;
$(function () {
$("#block1").css("top", "90px");
$("#block1").css("left", "200px");
}
)
return false;
}
};
param.right.onclick = function(){
fun.right();
};
param.left.onclick = function(){
fun.left();
};
param.real.onclick = function(){
fun.real();
};
};
</script>
</head>
<!--按钮图标-->
<div class="top">
<a href="#"><img src="./images/zoom.gif" width="20" height="20" style="cursor:hand" id="rotReal" title="还原" alt=""/></a>
<a href="#"><img src="./images/zoom_in.gif" width="20" height="20" style="cursor:hand" onClick="bigit();" title="放大" alt=""/></a>
<a href="#"><img src="./images/zoom_out.gif" width="20" height="20" style="cursor:hand" onClick="smallit();" title="缩小" alt=""/></a>
<a href="#"><img src="./images/left.gif" width="20" height="20" style="cursor:hand" id="rotLeft" title="左转" alt=""/></a>
<a href="#"><img src="./images/right.gif" width="20" height="20" style="cursor:hand" id="rotRight" title="右转" alt=""/></a>
</div>
<!--缩略图片层-->
<div class="left">
<span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="./images/a/a1.jpg" width="70" onload="return imgzoom(this,600);" style="cursor:pointer;" alt=""/></a></span>
<span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="./images/a/a2.jpg" width="70" onload="return imgzoom(this,600);" style="cursor:pointer;" alt=""/></a></span>
<span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="./images/a/a3.jpg" width="70" onload="return imgzoom(this,600);" style="cursor:pointer;" alt=""/></a></span>
<span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="./images/a/a4.jpg" width="70" onload="return imgzoom(this,600);" style="cursor:pointer;" alt=""/></a></span>
<span class="spic">
<a href="###" onclick="seeBig(this)" style="cursor:pointer">
<img border="0" src="./images/a/a5.jpg" width="70" onload="return imgzoom(this,600);" style="cursor:pointer;" alt=""/></a></span>
</div>
<!--显示图片层-->
<div class="right" style='width: 1575px; height=1000px'>
<div algin="center" id='hiddenPic' style='position:absolute; z-index:1; visibility: hidden; left:200px; top:90px; width:0px; height:0px; '>
<img name='imagehide' id="images2" width="560" src='./images/test.jpg' border='0' onload="return imgzoom(this,600); style="cursor:pointer;" alt=""/></div>
<div colspan="4" algin="center" id='block1' onmouseout='drag=0' onmouseover='dr
JS图片查看器修改版,旋转功能支持FF
5星 · 超过95%的资源 需积分: 9 39 浏览量
2012-06-14
10:37:54
上传
评论
收藏 520KB ZIP 举报 
JS图片查看.zip （25个子文件） 
JS图片查看 images 
2.png 6KB
turn.gif 697B left.gif 303B right.gif 301B zoom_in.gif 304B q.png 9KB shuffle.png 4KB close.png 3KB 1.png 6KB
test.jpg 148KB viewall.png 4KB down.gif 299B a a3.jpg 80KB a1.jpg 148KB a4.jpg 21KB a2.jpg 89KB a5.jpg 3KB backdesk.png 3KB zoom.gif 304B up.gif 294B paperball.png 17KB zoom_out.gif 295B loading.gif 3KB next.png 4KB
test.htm 8KB
- 1
- 2
- 3
前往页