可控制图片放大缩小还原移动效果的JS网页图片查看器

最新推荐文章于 2022-07-07 14:36:49 发布
最新推荐文章于 2022-07-07 14:36:49 发布
阅读量603 收藏
点赞数
分类专栏： js 文章标签： 图片 js

原地址：http://www.cwydesign.com/effects/2276.html#2


<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" ο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="http://www.cwydesign.com/effects/UploadFiles_7074/201009/up.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('up')" title="向上"></td>
<td> </td>
</tr>
<tr>
<td><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201009/left.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('left')" title="向左"></td>
<td><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201009/zoom.gif" width="20" height="20" style="cursor:hand" onClick="realsize();" title="还原"></td>
<td><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201009/right.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('right')" title="向右"></td>
</tr>
<tr>
<td> </td>
<td><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201009/down.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('down')" title="向下"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201009/zoom_in.gif" width="20" height="20" style="cursor:hand" onClick="bigit();" title="放大"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201009/zoom_out.gif" width="20" height="20" style="cursor:hand" onClick="smallit();" title="缩小"></td>
<td> </td>
</tr>
</table>
</div>




<div id='hiddenPic' style='position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:1; visibility: hidden;'><img name='images2' src='http://www.cwydesign.com/effects/UploadFiles_7074/201009/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='http://www.cwydesign.com/effects/UploadFiles_7074/201009/760-480bsx.jpg' border='0'></div>
</body>
</html>
runing9
关注
专栏目录
JS图片查看器（包括平移、放大缩小、图片旋转功能）支持IE和Firefox
04-13
JS图片查看器，带上下左右平移、放大缩小、图片旋转功能。很好很强大~！O(∩_∩)O 支持Firefox，除旋转以外的功能。
用JS实现和google地图类似的图片查看器-----放大、缩小、移动和还原，都控制在div里，兼容ie,FF
08-28
用JS实现和google地图类似的图片查看器 -----图片放大、缩小、移动和还原，都控制在div里，兼容ie,FF
JS网页图片查看器－可控制图片放大缩小还原移动效果
YanMLover的博客
04-16 1787
JS网页图片查看器－可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0
图片查看器（图片放大缩小功能）
07-03 331
链接：http://www.dowebok.com/192.html 转载于:https://www.cnblogs.com/zc290987034/p/9259391.html
使用js还原浏览器的缩放
只看远方的博客
03-13 1万+
移动端，使用手机浏览器打开一个网页，双指可以进行网页的缩放，非常方便 1：缩放前 2：缩放后 3：有没有一种方法，可以还原到原始状态呢。 目前发现一种方法，动态修改viewport,head 中增加标签 &lt;meta name="viewport" id="view1" content="width=device-width, initial-scale...
JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
10-30
JS网页图片查看器是一种基于JavaScript开发的网页应用程序，它能够实现用户对图片的放大、缩小、移动等操作。这种查看器在网页设计中常用于图片展示功能，比如图片网站、在线画廊、地图网站等场景，以便于用户查看...
canvas实现图片根据滑块放大缩小效果
08-31
本篇文章将深入探讨如何使用 Canvas 实现一个图片根据滑块动态放大缩小的效果。这个功能可以应用于许多场景，例如图像查看器或编辑器，为用户提供直观的缩放操作。 首先，我们需要创建一个 `canvas` 元素，并设置其...
用JS实现和google地图类似的图片查看器-放大、缩小、移动和还原，都控制在div里，兼容ie,FF
04-09
通过上述步骤，我们已经创建了一个基本的JavaScript图片查看器，它能够实现与Google地图类似的功能，包括放大、缩小、移动和还原图片。这个查看器可以在div内运行，同时兼容IE和Firefox等浏览器。你可以根据需求...
图片查看器（缩放 拖动）
weixin_30855761的博客
08-03 590
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></scri...
js点击按钮，放大对应图片代码
weixin_30687051的博客
07-30 472
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <img name="a" src="imgs/index-banner.png"> <img name="b" sr...
javascript图片预览（滚动放大缩小和拖动查看）
11-24
打开html可直接查看例子，例子中图片url写死的，是一个网络图片，如果该图片不见了可直接更改那个地址。 完全是自己写的滚动和拖动行为
原生js实现元素放大缩小
clhdtzhh的博客
07-07 1394
原生js实现元素的放大缩小
js实现放大缩小页面
热门推荐
胡杰的专栏
02-02 5万+
js实现放大缩小页面 在firefox,chrom,ie11测试过可以，其它未测 var size = 1.0;   function zoomout() {    size = size + 0.1;    set();  }   function zoomin() {    size = size - 0.1;    set();   }   func
vue点击图片预览放大（可旋转、翻转、缩放、上下切换、键盘操作）
weixin_34162228的博客
05-09 1103
2019独角兽企业重金招聘Python工程师标准>>> ...
JS实现图片的放大和缩小
贾世鑫的博客
09-11 6953
示例代码：
手机网页图片查看器实现：JS滑动效果与图片队列
js图片查看器插件能够解决这个问题，通过JavaScript实现的网页图片查看器可以在手机上方便地查看和浏览图片，同时支持滑动切换，增加用户体验。 首先，我们需要获取点击的图片文件对象以及所有符合条件的图片文件。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值