zoukankan      html  css  js  c++  java
  • jQuery点击图片放大拖动查看效果

    效果如图:

    放大前:

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

    源码如下:

    <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({  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=" 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

  • 相关阅读:
    日期格式化
    堆栈
    编写自己的C头文件
    线性表(gcc实现)
    排序的稳定性
    git创建和合并分支
    当单选input框改变时触发
    css样式定义
    div块显示在一行
    redis数据结构(一)
  • 原文地址:https://www.cnblogs.com/mlinber/p/9783301.html
Copyright © 2011-2022 走看看