效果如图：

放大前：

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

源码如下：

<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. 2.Git配置和关联GitHub

    1.配置本地信息, 右键Git Bush Here git config –global user.name '账号名' ##回车 git config –global user.email 邮箱 # ...

  2. vue 路由跳转，传参

    一.直接跳转 //js1.this.$router.push('/ad_new') //html 2.<router-link to="/ad_check"> < ...

  3. 总结css

    一.背景  1. background-color: 背景颜色   2.background-image 设置图像为背景 url("http://images.cnblogs.com/cnb ...

  4. python从入门到实践-5章if语句

    #!/user/bin/env python cars = ['audi','bmw','subaru','toyota']for car in cars: if car == 'bmw': prin ...

  5. 在Linux上要安装SSH协议

    学习准备:博客园.CSDN.51CTO,注意问问题去CSDN.注意还有一种就是自己搭建博客,自己搭建博客相当于写一个网站:http://pyshell.cn;github:是一个代码仓库是别人的.有些 ...

  6. 关于使用freemarker导出文档的使用

    7.FreeMarker导出word文件,模板:template.ftl/** * 为word加载数据插值 * * @throws IOException */ public void exportW ...

  7. 【安富莱专题教程第7期】终极调试组件Event Recorder，各种Link通吃，支持时间和功耗测量，printf打印，RTX5及中间件调试

    说明:1.继前面的专题教程推出SEGGER的RTT,JScope,Micrium的uC/Probe之后,再出一期终极调试方案Event Recoder,之所以叫终极解决方案,是因为所有Link通吃.  ...

  8. 免费申请使用IBM Cloud Lite(轻量套餐) 详细教程指南

    注册轻量帐户可在 IBM CLOUD控制台中使用所选的显示有轻量标记的免费轻量套餐来构建应用程序和探索服务.轻量帐户不会到期,也无需信用卡. 本文详细的介绍了一下,免费云服务的申请以及使用!这次使用I ...

  9. [Swift]LeetCode388. 文件的最长绝对路径 | Longest Absolute File Path

    Suppose we abstract our file system by a string in the following manner: The string "dir\n\tsub ...

  10. [Swift]LeetCode507. 完美数 | Perfect Number

    We define the Perfect Number is a positive integer that is equal to the sum of all its positive divi ...