`

JS网页图片查看器－可控制图片放大缩小移动｜兼容IE、FF

IEJavaScript360CSSUP 
阅读更多

<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS网页图片查看器－可控制图片放大缩小还原移动效果</title>
<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>
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);
//-->
</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" onLoad="init();" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()" style="overflow-y:hidden;overflow-x:hidden;">
<div id="Layer1">
  <table border="0" cellspacing="2" cellpadding="0">
    <tr>
      <td> </td>
      <td><img src="/Images2008/map/up.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('up')" title="向上"></td>
      <td> </td>
    </tr>
    <tr>
      <td><img src="/Images2008/map/left.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('left')" title="向左"></td>
      <td><img src="/Images2008/map/zoom.gif" width="20" height="20" style="cursor:hand" onClick="realsize();" title="还原"></td>
      <td><img src="/Images2008/map/right.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('right')" title="向右"></td>
    </tr>
    <tr>
      <td> </td>
      <td><img src="/Images2008/map/down.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('down')" title="向下"></td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td><img src="/Images2008/map/zoom_in.gif" width="20" height="20" style="cursor:hand" onClick="bigit();" title="放大"></td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td><img src="/Images2008/map/zoom_out.gif" width="20" height="20" style="cursor:hand" onClick="smallit();" title="缩小"></td>
      <td> </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='/UploadFile/taobao0809/760-480bsx.jpg' border='0'></div>
<div id='block1' onmouseout='drag=0' onmouseover='dragObj=block1; drag=1;' style='z-index:10; height: 0; left: 0px; position: absolute; top: 0px; width: 0' class="dragAble"> <img name='images1' src='/UploadFile/taobao0809/760-480bsx.jpg' border='0'></div>
</body>
</html>

分享到：
| 网页设计中CSS的十八个技巧
评论
1 楼 greatghoul 2009-06-22  
不知为什么，我在ie和ff下都不能正常运行。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    JS网页图片查看器是一种基于JavaScript开发的网页应用程序，它能够实现用户对图片的放大、缩小、移动等操作。这种查看器在网页设计中常用于图片展示功能，比如图片网站、在线画廊、地图网站等场景，以便于用户查看...

    JS图片查看器（包括平移、放大缩小、图片旋转功能）支持IE和Firefox

    JavaScript图片查看器是一种基于Web的图像浏览解决方案，它允许用户在网页上查看、操作图片，提供了平移、放大、缩小以及旋转等丰富的交互功能。这种查看器尤其适用于那些需要展示大量或高分辨率图片的网站，比如...

    JS图片预览(兼容IE6、IE7、IE8和FF)

    在JavaScript（简称JS）中实现图片预览，尤其是在兼容老版本的Internet Explorer（如IE6、IE7、IE8）以及Firefox（FF）等浏览器上，需要考虑多种技术策略和兼容性问题。下面我们将详细讨论如何实现这个功能，并着重...

    html图片控制处理放大缩小移动多种案例(源码)

    html图片控制处理放大缩小移动多种案例(附源码)，简约图片预览，仿京东图片放大镜效果，图片查看器，可放大缩小，旋转，图片放大镜效果，图片放大缩小查看，图片放大显示，支持滚轮调整大小，图片上下滑动缩略图字幕...

    js控制图片放大、缩小、按比例显示

    在JavaScript（JS）编程中，控制图片的放大、缩小以及按照比例显示是常见的需求，尤其在网页设计和交互效果中。下面将详细讲解如何利用JavaScript实现这些功能。 1. **图片放大与缩小** - **鼠标滚动事件**：在...

    jquery iviewer jquery图片查看工具（放大、缩小、旋转、可二次开发）

    jQuery iViewer是一款基于JavaScript库jQuery的图片查看工具，它提供了丰富的功能，包括图片的放大、缩小、旋转以及拖拽等操作，极大地提升了用户在网页上的图片浏览体验。这款插件设计简洁，易于集成到任何Web项目...

    安卓图片加载缓存相关-安卓网络图片查看放大缩小带有本地图片查看.zip

    本项目“安卓图片加载缓存相关-安卓网络图片查看放大缩小带有本地图片查看.zip”主要涉及以下几个核心知识点： 1. **图片加载库**：在Android中，我们通常使用第三方库如Glide、Picasso或 Fresco 来处理图片的加载...

    使用C# WPF实现图片查看器，支持鼠标拖动和滑轮控制放大缩小

    在本文中，我们将深入探讨如何使用C#的Windows Presentation Foundation（WPF）框架来创建一个基本的图片查看器。这个图片查看器不仅能够显示图片，还支持通过鼠标拖动进行平移以及使用鼠标滚轮进行缩放。我们将涵盖...

    可岁手势放大缩小移动图片的图片查看器

    在Android开发中，创建一个可手势操作的图片查看器是一个常见的需求，比如“可岁手势放大缩小移动图片的图片查看器”就是一个典型的实例。这样的图片查看器提供了类似手机相册的功能，用户可以通过手势轻松地对图片...

    HTML-手机端-图片放大-手动缩放-示例（pinchzoom插件实现）

    Web_使用pinchzoom插件实现图片手势缩放. 效果描述： 一个基于jQuery的插件——Pinchzoom.js 可以实现移动网页中的图片放大或者缩小，用手指控制即可 当然，其中的jQuery完全可以换成zepto.js

    Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area

    - 在实际开发中，这种拖拽滑动和放大缩小的功能常用于地图应用、图片查看器、3D 模型预览等场景，提供用户友好的交互体验。 综上所述，`movable-view` 和 `movable-area` 是 UniApp 中实现动态交互界面的重要组件...

    C#开发winform图片放大缩小，类似windows的图片查看器

    结合网上的一些源码和书上的源码弄了个C#开发的winform的简易图片放大缩小。功能：打开图片，支持放大和缩小功能，一开始能展现全图，能无限放大和缩小到原图。保持居中展示。滚动条保持居中。还有一个可以旋转的请...

    viewer.js图片放大缩小使用的js

    5. **API接口**：提供丰富的API接口，允许开发者在运行时控制图片查看器，例如打开、关闭、切换图片、放大和缩小等操作。 6. **兼容性**：除了原生JavaScript，`viewer.js`还支持jQuery插件形式，方便已经使用jQuery...

    uk-co-senab-photoview 支持拖动 双击放大缩小图片

    `uk-co-senab-photoview` 是一个专为Android平台设计的库，它提供了一个图片查看器控件，使得用户可以方便地对图片进行拖动浏览以及双击放大缩小的操作。这个控件极大地提升了应用程序在显示和交互图片方面的功能，...

    图片查看器-jquery插件

    2. 缩放和平移：允许用户通过鼠标或触摸操作来放大、缩小图片，并在图片区域内自由移动。 3. 全屏模式：提供全屏查看功能，让用户可以专注于图片，提高观看体验。 4. 导航控制：展示前后按钮，使用户可以方便地在...

    简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪

    - **放大缩小**：提供了缩放功能，让用户在不同尺度下查看和裁剪图片。 - **上下左右移动**：图像可以在水平和垂直方向上自由移动，便于对准裁剪位置。 - **固定比例**：可以设置固定的宽高比，确保裁剪出的图片...

    Pinchzoom.js插件实现手指触摸图片放大缩小

    Pinchzoom.js 是一个轻量级的JavaScript插件，专门用于处理这种手势交互，使图片在触摸屏设备上能够轻松地进行放大和缩小操作。下面我们将详细介绍Pinchzoom.js的工作原理、使用方法以及如何集成到项目中。 1. **...

    js图片查看器

    "js图片查看器"是一种基于JavaScript技术实现的用于在网页中查看和浏览图片的应用程序。JavaScript，简称JS，是Web开发中的主要脚本语言，它允许开发者在用户浏览器上动态处理内容，包括图像的显示、缩放、旋转等...

    js 双指缩放，双指放大，双击放大，移动端双指放大缩小

    这些手势操作在许多应用程序和网页中被广泛使用，特别是对于查看高分辨率图片、地图导航或者在阅读器中调整文本大小。本文将深入探讨如何实现这些功能，以及如何在JavaScript中集成它们。 首先，我们需要理解双指...

    js仿百度地图放大缩小拖拽查看效果

    这个项目专注于创建一个可拖拽、放大和缩小的地图功能，让我们深入了解一下这些技术细节。 首先，我们要明白地图的基本原理。地图是通过经纬度坐标系统来定位地球表面的点，而Web上的地图通常是通过切片（tiles）...

Magicbox
Global site tag (gtag.js) - Google Analytics