基于jquery.artZoom实现图片旋转

最新推荐文章于 2024-07-10 18:00:00 发布

秋夜无霜

最新推荐文章于 2024-07-10 18:00:00 发布

阅读量2.6k

点赞数

文章标签：图片旋转 jquery.artZoom

本文链接：https://blog.csdn.net/shichen2010/article/details/54603215

版权

效果图如下：

调用方式

1、jsp相关页面img元素需要添加class="artZoom"

2、需要在jsp页面，添加脚本，调用API接口如

Util.Componets.init({artZoom:true});

源码：

var Util={
    /**
     * 全局常量
     */
    Cts:{
        docWidth:window.screen.width,
        docHeight:window.screen.height
    },
    /**
     * 初始化组件
     */
    Componets:{
        /**
         * 统一初始化
         */
        init:function(options){
            var settings = {
                artZoom:false
            };
            $.extend(settings,options);
            if(settings.artZoom){this.$import.artZoom();}
        },
        /**
         * 组件成员
         */
        $import:{
            /**
             * 渲染图片旋转
             */
            artZoom:function(){
                $('.artZoom').artZoom({
                    path: CAR_PATH + '/static/controls/jquery.artZoom/images',   // 设置artZoom图片文件夹路径
                    preload: true,      // 设置是否提前缓存视野内的大图片
                    blur: true        // 设置加载大图是否有模糊变清晰的效果
                });
            }
        }
    }
}