HTML網頁圖片瀏覽器,支持放大縮小,位置移動等

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <title></title>
    <script src="/js/jquery-1.11.1.min.js"></script>
    <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>    
    //delta > 0 向上滾動
    function mousewheelEvent(e, delta) {
        if (delta > 0) {
            bigit();
        } else {
            smallit();
        }
    }

    if (document.attachEvent) {
        document.attachEvent("onmousewheel", function (e) {
            mousewheelEvent(e, e.wheelDelta);
        });
    }
    else if (document.addEventListener) {
        document.addEventListener("DOMMouseScroll", function (e) {
            mousewheelEvent(e, e.detail * -40);
        }, false);
        document.addEventListener("mousewheel", function (e) {
            mousewheelEvent(e, e.wheelDelta);
        });
    }
</SCRIPT>
<SCRIPT language=JavaScript>
drag = 0
move = 0

// 拖拽對象
// 參見:http://blog.sina.com.cn/u/4702ecbe010007pe
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");

function clickMove(s){
 if(s=="up"){
  dragObj.style.top = parseInt(dragObj.style.top) + 100;
 }else if(s=="down"){
  dragObj.style.top = parseInt(dragObj.style.top) - 100;
 }else if(s=="left"){
  dragObj.style.left = parseInt(dragObj.style.left) + 100;
 }else if(s=="right"){
  dragObj.style.left = parseInt(dragObj.style.left) - 100;
 }

}

function smallit(){            
  var height1=images1.height;            
  var width1=images1.width;            
  images1.height=height1/1.2;            
  images1.width=width1/1.2;           
}             
    
function bigit(){            
 var height1=images1.height;            
 var width1=images1.width;            
 images1.height=height1*1.2;          
 images1.width=width1*1.2;           
}             
function realsize()
{
 images1.height=images2.height;     
 images1.width=images2.width;
 block1.style.left = 0;
 block1.style.top = 0;
 
}
function featsize()
{
 var width1=images2.width;            
 var height1=images2.height;            
 var width2=360;            
 var height2=200;            
 var h=height1/height2;
 var w=width1/width2;
 if(height1<height2&&width1<width2)
 {
  images1.height=height1;            
  images1.width=width1;           
 }
 else
 {
  if(h>w)
  {
   images1.height=height2;          
   images1.width=width1*height2/height1;           
  }
  else
  {
   images1.width=width2;           
   images1.height=height1*width2/width1;          
  }
 }
 block1.style.left = 0;
 block1.style.top = 0;
}

</SCRIPT>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

var $$ = function (func) {
    if (document.addEventListener) {
        window.addEventListener("load", func, false);
    }
    else if (document.attachEvent) {
        window.attachEvent("onload", func);
    }
}

$$(function () {
    myfc();
})

function myfc() {
    var vh = $(window).innerHeight();
    var vw = $(window).innerWidth();
    var rat = 1;
    if (images1.height > images1.width) {
        rat = vw / images1.width;
        images1.height = vh;
        
        //document.getElementById('block1').style.Left = (vw - images1.width) / 2;
        //images1.height = images1.height * rat;
        if (document.attachEvent) {//IE
            document.getElementById('block1').style.Left = (vw - images1.width) / 2;
        }
        else if (document.addEventListener) {//firefox
            document.getElementById('block1').style.left = (vw - images1.width) / 2 +"px";
        }
    } else {
        rat = vh / images1.height;
        images1.width = vw;
        //images1.width = images1.width * rat;
    }
    
};
//-->
</script>
<style type="text/css">
<!--
td, a { font-size:12px; color:#000000 }
#Layer1 { position:absolute; z-index:100; top: 10px; }
#Layer2 { position:absolute; z-index:1; }
-->
</style>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"   style="overflow-y:hidden;overflow-x:hidden;">
<div id="Layer1">
  <table border="0" cellspacing="2" cellpadding="0">
      <!--
    <tr>
      <td>&nbsp;</td>
      <td><img src="/images/up.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('up')" title="向上"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><img src="/images/left.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('left')" title="向左"></td>
      <td><img src="/images/zoom.gif" width="20" height="20" style="cursor:hand" onClick="realsize();" title="還原"></td>
      <td><img src="/images/right.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('right')" title="向右"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><img src="/images/down.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('down')" title="向下"></td>
      <td>&nbsp;</td>
    </tr>
      -->
    <tr>
      <td>&nbsp;</td>
      <td><img src="/images/zoom_in.gif" width="20" height="20" style="cursor:hand" onClick="bigit();" title="放大"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><img src="/images/zoom_out.gif" width="20" height="20" style="cursor:hand" onClick="smallit();" title="縮小"></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<p><br>
<div id='hiddenPic' style='position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:1; visibility: hidden;'><img name='images2' src='/images/welcome.png' border='0'></div>
<div runat="server" id='block1' onmouseout='drag=0' onmouseover='dragObj=block1; drag=1;' style='z-index:10; height: 0; left: 0px; position: absolute; top: 0px; width: 0;margin-left:auto;margin-right:auto;' class="dragAble"></div>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章