zoukankan      html  css  js  c++  java
  • 图片放大显示的jQuery插件

    从网上下载了一个jquery的图片放大显示插件,效果如下

    前台代码调用:

    先引入js

    <script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
    <script type="text/javascript">
    $(function(){
     $("a.preview").preview();   
    });
    </script>

    html页面代码

    View Code
    <div class="zxx_out_box">
        <div class="zxx_in_box">        
            <h3 class="zxx_title">图片放大显示的jQuery插件演示页面</h3>
            <div class="zxx_main_con">
                <div class="zxx_test_list">
                    <class="preview" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" title="张含韵">
                        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
                    </a>
                    <class="preview" href="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" title="某不知名美女">
                        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
                    </a>
                    <class="preview" href="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" title="某不知名美女">
                        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
                    </a>
                    <class="preview" href="http://image.zhangxinxu.com/image/study/s/s256/mm4.jpg" title="某不知名美女">
                        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" />
                    </a>
                    <class="preview" href="http://image.zhangxinxu.com/image/study/s/s256/mm5.jpg" title="某不知名美女">
                        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />
                    </a>
                </div>           
            </div>
        </div>
    </div>

    全部源码下载:/Files/Jaylong/jquery-image-preview.zip

  • 相关阅读:
    JS实现继承,封装一个extends方法
    JS实现new关键字的功能
    前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)
    Nodejs ORM框架Sequelize快速入门
    Nodejs ORM框架Sequelize(模型,关联表,事务,循环,及常见问题)
    NodeJs mysql 开启事务
    web开发的跨域问题详解
    docker网络
    docker容器的学习
    路飞学城的部署
  • 原文地址:https://www.cnblogs.com/Jaylong/p/2291993.html
Copyright © 2011-2022 走看看