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

最新推荐文章于 2023-04-20 14:40:03 发布
最新推荐文章于 2023-04-20 14:40:03 发布
阅读量257 收藏
点赞数
分类专栏： JavaScript 文章标签： IE JavaScript 360 CSS UP ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/canfly20008/article/details/83408570
版权

<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.οnmοusemοve=moveMouse;
 return false;
 }
}
document.οnmοusedοwn=initDrag;
document.οnmοuseup=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; οnresize=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();" οncοntextmenu="return false" οndragstart="return false" onselectstart ="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbeforecopy="return false"οnmοuseup="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' οnmοuseοut='drag=0' οnmοuseοver='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>

canfly20008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JS实现和google地图一样的图片查看器-----图片放大、缩小、移动和还原，都控制在一个div层里，兼容ie7,FF
04-10 4796
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">用JS实现和google地图一样的图片查看器-----图片放大、缩小、移动和还原，都控制在一个div层里，兼容ie7,FF.boldhead{ font-weight:bold; font-size: 24px; text-a
javascript图片预览（滚动放大缩小和拖动查看）
11-24
打开html可直接查看例子，例子中图片url写死的，是一个网络图片，如果该图片不见了可直接更改那个地址。 完全是自己写的滚动和拖动行为
JS图片查看器（包括平移、放大缩小、图片旋转功能）支持IE和Firefox
04-13
JS图片查看器，带上下左右平移、放大缩小、图片旋转功能。很好很强大~！O(∩_∩)O 支持Firefox，除旋转以外的功能。
js网页图片查看器-图片放大缩小
weixin_34259559的博客
06-25 156
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;title&gt;JS网页图片查看器－可控制图片放大缩小还原移动效果&lt;/title&
用JS实现和google地图类似的图片查看器-放大、缩小、移动和还原，都控制在div里，兼容ie,FF
04-09
用JS实现和google地图类似的图片查看器 -----图片放大、缩小、移动和还原，都控制在div里，兼容ie,FF
网络图片查看器 ——图片可放大缩小
xdh15762186628的博客
06-29 469
任务要求 在文本框中输入图片的路径，点击浏览按钮的同时，将会在上方的ImageView中显示出来该图片。 UI设计 package snowfox.android; 　　import android.app.Activity; 　　import android.graphics.Bitmap; 　　import android.graphics.BitmapFactory;
jsp html5 仿windows图片查看器源码，可以下载、放大、缩小、拖动、放大某一区域
11-21
jsp html5 仿windows图片查看器源码，可以下载、放大、缩小、拖动、放大某一区域
JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
weixin_30394333的博客
12-17 107
<html> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JS网页图片查看器－可控制图片放大缩小还原移动效果</title> <META HTTP-EQUIV="imagetoolbar" CONTENT="no"> <sty...
富文本编辑器生成的html内容中添加图片缩放旋转，视频苹果手机背景图等功能
温润如风的博客
04-20 641
【代码】富文本编辑器生成的html内容中添加图片缩放旋转，视频苹果手机背景图等功能。
【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
jason的java世界
12-12 1万+
目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开发中常见概念解释 1.2.1前端 1.2.2后台 1.2.3 浏览器 1.3 纯文本和超文本的使用 1.4 开发工具的使用 1.4.1常见开发工具简介 1.4.2 Visual Studio Code 1.4.3 编写第一个HTML文件 1.5 HTML骨架 1.5.1 DTD 1.5.2 html标签 1.5.3 字符集 1.5.4 视口标签 1.5.5浏
用JS实现和google地图类似的图片查看器-----放大、缩小、移动和还原，都控制在div里，兼容ie,FF
08-28
用JS实现和google地图类似的图片查看器 -----图片放大、缩小、移动和还原，都控制在div里，兼容ie,FF
C#开发winform图片放大缩小，类似windows的图片查看器
09-10
结合网上的一些源码和书上的源码弄了个C#开发的winform的简易图片放大缩小。功能：打开图片，支持放大和缩小功能，一开始能展现全图，能无限放大和缩小到原图。保持居中展示。滚动条保持居中。还有一个可以旋转的请...
移动端webApp兼容问题解决
热门推荐
qyjandroid的专栏
12-01 1万+
1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上
002 - new javascript 基础
qq_30856231的博客
04-10 649
002 - new javascript 基础 ####★技巧★ JS 引入 返回 从哪来到哪去 ####★技巧★ a.toExponential(3) 科学计数法 num = num.toExponential(3) “3.333e+0” ####★技巧★ num.toFixed(2); 限制小数点后两位 num = num.toFixed(2); ####★技巧★ 注意filder中筛选 返回的是条件 ： ‘==’ 双等于 let r = choicelist.f
STM32H562实现FreeRTOS内存管理【支持STM32H系列单片机】.zip
最新发布
06-03
STM32H562 FreeRTOS驱动程序，支持STM32H系列单片机。 项目代码可直接运行~
恶魔轮盘.cpp
06-03
恶魔轮盘
基于C++&OPENCV 的全景图像拼接.zip
06-03
基于C++&OPENCV 的全景图像拼接 C++是一种广泛使用的编程语言，它是由Bjarne Stroustrup于1979年在新泽西州美利山贝尔实验室开始设计开发的。C++是C语言的扩展，旨在提供更强大的编程能力，包括面向对象编程和泛型编程的支持。C++支持数据封装、继承和多态等面向对象编程的特性和泛型编程的模板，以及丰富的标准库，提供了大量的数据结构和算法，极大地提高了开发效率。12 C++是一种静态类型的、编译式的、通用的、大小写敏感的编程语言，它综合了高级语言和低级语言的特点。C++的语法与C语言非常相似，但增加了许多面向对象编程的特性，如类、对象、封装、继承和多态等。这使得C++既保持了C语言的低级特性，如直接访问硬件的能力，又提供了高级语言的特性，如数据封装和代码重用。13 C++的应用领域非常广泛，包括但不限于教育、系统开发、游戏开发、嵌入式系统、工业和商业应用、科研和高性能计算等领域。在教育领域，C++因其结构化和面向对象的特性，常被选为计算机科学和工程专业的入门编程语言。在系统开发领域，C++因其高效性和灵活性，经常被作为开发语言。游戏开发领域中，C++由于其高效性和广泛应用，在开发高性能游戏和游戏引擎中扮演着重要角色。在嵌入式系统领域，C++的高效和灵活性使其成为理想选择。此外，C++还广泛应用于桌面应用、Web浏览器、操作系统、编译器、媒体应用程序、数据库引擎、医疗工程和机器人等领域。16 学习C++的关键是理解其核心概念和编程风格，而不是过于深入技术细节。C++支持多种编程风格，每种风格都能有效地保证运行时间效率和空间效率。因此，无论是初学者还是经验丰富的程序员，都可以通过C++来设计和实现新系统或维护旧系统。3
html实现在线好看图片查看器，可以放大缩小下载图片源码
05-24
它使用了jQuery和fancybox库来实现图片的放大缩小和下载功能。 ```html <!DOCTYPE html> 在线图片查看器 <meta charset="UTF-8"> .gallery { display: flex; flex-wrap: wrap; justify-content: center...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值