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

修正了网上其它版本的一些错误。完美无错版

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

// 拖拽对象
// 参见: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(height1w)
{
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;
}

   
   
   
   

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 网页中的图片查看器viewjs使用方法

    需求分析: 对于网页中的图片进行连续放大(便于用户清晰查看内容).缩小,旋转等操作,可以使用viewjs图片查看器插件实现. viewjs官方网址:https://github.com/fengyuanchen/viewerjs 具体使用方法请参照官网说明. 下面做2个简单的示例: 1.示例一:单一图片 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"

  • 移动端js图片查看器

    本文实例为大家分享了js图片查看器插件的使用方法,制作手机使用的网页图片查看器,供大家参考,具体内容如下 这几天抽空在为项目开发一个量身的图片查看器,目前已初步完成需求. 开发场景是:在一个多文件下载展示列表中,如检测某些文件为图片时,则点击该文件时打开图片查看器展示该图片,并将列表内其它图片同时展示查看器队列内,可供前后滑动查看及其它附带功能. 乍一听功能点似乎有点多而且有些复杂,需要梳理一下 功能点整理 首先,我们要获得点击的图片文件对象及符合条件的图片文件对象集 其次,图片查看器的制作及图

  • jQuery实现简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易,代码也比较简单 图片查看器主要有几个功能: 1.显示图片和图片信息(图片名称.发布者等等) 2.切换图片 3.关闭图片查看器 初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig) picInfos: 传入图片组信息,必须,格式如

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

    修正了网上其它版本的一些错误.完美无错版 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 //

  • C#如何实现图片查看器

    这篇文章将简单介绍下如何使用C#来实现一个图片查看器的功能的,该工具保存的功能有: 1. 可以通过"上一张" "下一张"这样的按钮来轮换浏览图片  2.实现对图片的旋转  3.实现对旋转后图片的保存功能.本程序不仅提供旋转90/180/270这样的实现,同时提供一个方法来完成旋转任意角度的实现 4.该程序未实现Windows图片查看图片缩放的功能,这部分的功能主要要点是改变图片在PictureBox控件中的高度和宽度就可以的 二.实现思路 2.1 图片轮换浏览功能的

  • 使用PyQt5实现图片查看器的示例代码

    一.前言 在学习 PyQt5 的过程中我会不断地做一些小的 Demo,用于让自己能够更好地理解和学习,这次要做的就是一个图片查看器,主要功能包括打开图片.拖动图片.放大和缩小图片. 最终实现的图片查看器你效果如下: 二.主要步骤  1.显示图片 PyQt5 绘图系统能渲染矢量图像.位图图像和轮廓字体文本.一般会使用在修改或者提高现有组件的功能,或者创建自己的组件,使用 PyQt5 的绘图 API 进行操作.在 Qt 中有 QPainter 类用于执行绘制的操作,绘图由 paintEvent()

  • c# 实现图片查看器

    一.引言 因为最近在MSDN中的论坛和CSDN论坛都看到有些朋友问到如何用C#实现一个像Windows自带的图片查看器的功能等类似的问题(当然还有如何如何旋转图片的,如何通过按钮来变换图片的功能等),所以为了帮助大家更好地解决类似的这样的问题,所以这篇文章将简单介绍下如何使用C#来实现一个图片查看器的功能的,该工具保存的功能有: 可以通过"上一张" "下一张"这样的按钮来轮换浏览图片 实现对图片的旋转 实现对旋转后图片的保存功能.本程序不仅提供旋转90/180/27

  • 基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)

    最近由于公司项目需要图片查看器,网上搜了一圈,感觉资料很少,所以决定基于百度的touch.js手势库+zepto.js自己写了一个小插件,实现了左右滑动,双指缩放,双击缩放功能,基本使用还行,但是有时候还是不太顺畅,后续会慢慢完善:写的不好的地方望各位能够给出好的建议,谢谢! 源码地址:https://github.com/GLwen/molong_photoSwipe.git 演示:http://runjs.cn/detail/iceaaogh molong.css *{padding:0;m

  • CSS+JS构建的图片查看器

    这是一个使用 CSS + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE.Firefox .Opera. JS部分 function showPic (whichpic) {  if (document.getElementById) {   document.getElementById('placeholder').src = whichpic.href; if (whichp

  • js图片查看器插件用法示例

    本文实例讲述了js图片查看器插件.分享给大家供大家参考,具体如下: 首先 在github上下载 js,css点击打开链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/

  • jQuery 图片查看器插件 Viewer.js用法简单示例

    本文实例讲述了jQuery 图片查看器插件 Viewer.js用法.分享给大家供大家参考,具体如下: html: <!-- 引入文件 --> <link rel="stylesheet" href="/css/viewer.min.css" rel="external nofollow" > <script src="/js/viewer.min.js"></script> &l

随机推荐