效果如图：

放大前：

放大后(可拖动图片浏览)：

源码如下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>jQuery点击图片拖动放大查看效果</title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript" src="js/jquery.imageView.js"></script>

    <script type="text/javascript">

        $(function () {

            $('#imageView_container').imageView({ width: 850, height: 708 });

        });

    </script>

    <style type="text/css">

        body {

            background-color: #555;

            color: #fff;

        }

        a img {

            border: none;

        }

        #imageView_container {

            border: 2px solid #000;

            margin: 0 auto;

        }

            #imageView_container.iv-loading {

                border: 2px solid #ff6600;

            }

    </style>

</head>

<body>

    <div id="imageView_container" class="" style="width: 850px; height: 708px; overflow: hidden; position: relative; cursor: -moz-zoom-in;">

        <img src="http://www.xwcms.net/webAnnexImages/fileAnnex/201506/27268/images/12awe51.jpg" rel="http://www.xwcms.net/webAnnexImages/fileAnnex/201506/27268/images/sad2.jpg" alt="" id="image_view_1" style="visibility: visible; position: absolute; left: 0px; top: 0px;">

    </div>

</body>

</html>

js资源下载地址：https://pan.baidu.com/s/1ew7iernrBAWZ0kuhr21s0A#list/path=%2F

jQuery点击图片放大拖动查看效果的更多相关文章

  1. jQuery点击图片放大显示原图效果

    HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  2. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  3. 网页mp3语音展示，点击图片放大，点击图片跳转链接，调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  4. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

  5. JavaScript 点击图片放大功能

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. jquery点击图片选中特效

    jquery点击图片选中特效 点击在线预览效果

  7. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  8. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  9. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

随机推荐

  1. vue - 新建一个项目

    首先: 要先安装node 及 npm Node.js官方安装包及源码下载地址:http://nodejs.org/ 双击安装,在安装界面一直Next 直到Finish完成安装. 打开控制命令行程序(C ...

  2. LeetCode笔记：140. Word Break II

    题目描述 给定一个非空的字符串s,一个非空的字符串list作为字典.通过在s中添加空格可以将s变为由list中的word表示的句子,要求返回所有可能组成的句子.设定list中的word不重复,且每一个 ...

  3. 根据excel表格字段生成sql语句

    根据excel表格字段生成sql语句 1.1 前言 根据excel表格字段生成sql语句主要是利用了excel的拼接函数 CONCATENATE .该实例主要以mysql脚本支持.实例需求如下:exc ...

  4. 数据调试~~TCP转串口、串口转TCP调试

    Android socket开发了一个socket客户端,当输入服务器ip以及端口,建立连接之后,Android可以发送数据到电脑接收服务器端. 如果电脑端没有socket服务器怎么办?方法如下: 1 ...

  5. Spring Cloud Eureka 使用 IP 地址进行服务注册

    默认情况下,Eureka 使用 hostname 进行服务注册,以及服务信息的显示,那如果我们使用 IP 地址的方式,该如何配置呢?答案就是eureka.instance.prefer-ip-addr ...

  6. [Swift]LeetCode72. 编辑距离 | Edit Distance

    Given two words word1 and word2, find the minimum number of operations required to convert word1 to  ...

  7. 【web.xml】项目从web.xml开始

    前言 依自己目前的所闻所见,每个项目的WEB-INF下都会带有一个web.xml配置文件.当启动项目时,web容器(tomcat)会首先去读取web.xml中的内容,读取加载完成后才算完成了项目的启动 ...

  8. VSTO学习（三）——创建Excel解决方案

    四.创建Excel外接程序介绍完了Excel对象模型之后,我们就可以利用这些对象来对Excel文档进行操作了,下面就创建一个简单的Excel外接程序的.首先我们模拟一个需求,大多说软件在使用时都会弹出 ...

  9. H5本地存储sessionStorage和localStorage的区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  10. Jenkins 集群搭建

    一.前言 Jenkins是当下比较流行的一款功能强大的持续集成工具,它支持搭建集群,来提高多项目的构建速度,模式为主从模式,master会将任务分配到各个从节点进行并发构建,从而提高速度,下面介绍一下 ...