zoukankan      html  css  js  c++  java
  • jQuery插件之jqzoom

    jqzoom是一款基于jQuery的图片方法插件。

    使用方法:1.引入jQuery与jqzoom,jqzoom.css

         2.准备两张一大一小大小相同的图片,小图片放在<img>标签的"src"属性里,给img标签加个<a>标签,<a>标签的"href"属性链向大图片

    参数说明:zoomWidht:  小图片所选区域的宽度。

         zoomHeight:   小图片所选区域的高度。

         zoomType:   默认值为standard。如果设为reverse,在小图片仲,移入鼠标时,所选区域高亮,非选中区域淡灰色。

         xOffset:    放大后的图片与小图片间的X(横坐标)距离。

         yOffset:    放大后的图片与小图片间的Y(纵坐标)距离。

         position:     放大后的图片相对原图片的位置,默认为"right",还可设置为"left","top","bottom"。

         lens:      布尔值,表示是否显示小图片中的选中区域,默认值为"true",如果设为"false",则放大后的图片上面不会出现主题字样。

         imageOpacity: 当zoomType的值为"reverse"时,用来设置非选中区域透明度的值。取值范围在(0.0-1.0)间。

         preloadImages:布尔值,表示是否重新加载大图像。

         preloadText:  重新加载大图像时,小图像显示的文本说明。

           title:      大图像顶部是否显示<a>标签里的title。

         showEffect:   大图像加载时的特效,可选值:"show"表示直接显示,"fadein"由透明度渐变载入效果。

         hideEffect:   大图像隐藏特效,可选值:"hide"表示直接隐藏,"fadeout"透明度渐变隐藏。  

         fadeinSpeed:  当大图像的载入特效设为"fadein"时,此属性可设置特效的时间,可选值为'fast','slow',number分别代表,快慢,毫秒数。

         fadtoutSpeed:  当大图像的隐藏特效设为"fadeout"时,此属性可设置特效载的时间,可选值为'fast','slow',number分别代表,快慢,毫秒数。

    例子:

         HTML代码:

    <body>
        <div style="margin-left:500px;">
            <a id="img1" href="/1big.jpg" title="我的星星" ><img src="/1small.jpg" alt="" /></a>
        </div>
    </body>

         js代码:

     
        <script src="jQuery.1.8.3.js" type="text/javascript"></script>
        <script src="jquery.jqzoom-core.js" type="text/javascript"></script>
        <link href="jquery.jqzoom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            $(function () {
                $('#img1').jqzoom({
                    zoomWidth:200,
                    zoomHeight:200,
                    position:"bottom",           yOffset:50,
                    lens:true,
                    imageOpacity:1.0
                });
            })
        </script>
  • 相关阅读:
    在vue项目中引用element-ui时 让el-input 获取焦点的方法
    vue cli 平稳升级webapck4
    如何在 vuex action 中获取到 vue 实例
    Vue主要原理最简实现与逻辑梳理
    vue自定义指令clickoutside扩展--多个元素的并集作为inside
    关于使用element中的popup问题
    教你如何检查一个函数是否为JavaScript运行时环境内建函数
    用 Vue 做一个简单的购物app
    vue 手机键盘把底部按钮顶上去
    基于Linux的智能家居的设计(2)
  • 原文地址:https://www.cnblogs.com/feng-NET/p/4541070.html
Copyright © 2011-2022 走看看