zoukankan      html  css  js  c++  java
  • 图片局部放大插件jquery.jQZoom.js

    原文见:http://bbs.okajax.com/demo/17/

    jQZoom allows you to realize a small magnifier window close to the image or images on your web page easily.

    I decided to build this jQuery plugin to embed detailed big images in my B2B.So now in few steps you can have your jQZoom in your website,eCommerce or whatever you want.Author: Renzi Marco ,December 2007

    1)Simply include the jqzoom.css in your page.

    <link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

    2)Include jQzoom and jQuery code

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

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

    3)Now assign the "jqzoom" class to the image or images you would like to zoom,and specify for each one,the alt attribute,to wich you are going to assign the big image path.

    <img src="your_path/imagename_small.jpg" class="jqzoom" alt="your_path/imagename_big.jpg">

    4)Load the plugin at window load

    jQuery(document).ready(function(){

         $("img.jqzoom").jqueryzoom();

         });

    You can also specify some options:

    jQuery(document).ready(function(){

             $("img.jqzoom").jqueryzoom({

           xzoom: 300,   //zooming div default width(default width value is 200)

           yzoom: 300,   //zooming div default width(default height value is 200)

           offset: 40,   //zooming div default offset(default offset value is 10)

           position: "right" //zooming div position(default position value is "right")

          });

         });

    5)Sit and wait for people to tell you that what you have done is really cool!!!!:-)

    Demo

    :http://bbs.okajax.com/demo/17/

    类似功能另见:http://www.magictoolbox.com/magiczoom_examples/

  • 相关阅读:
    pbfunc外部函数扩展应用-直接在Datawindow中生成QR二维码,非图片方式
    一、PBNI环境搭建及初步使用
    Powerbuilder编写身份证校验码
    Maven本地安装JAR包组件
    使用SSH通过秘钥登录Linux
    Intellij IDEA下载
    ubuntu使用root用户登录桌面
    Ubuntu安装JDK1.8与配置环境变量
    Ubuntu 安装 JDK 7 / JDK8 的两种方式
    CentOS 7.0关闭默认防火墙启用iptables防火墙
  • 原文地址:https://www.cnblogs.com/LCX/p/2138524.html
Copyright © 2011-2022 走看看