jQuery支持图片放大缩小查看效果

所属分类：媒体-图片展示

177902 562 查看评论 (115)

分享到微信朋友圈

查看演示立即下载

插件描述：e-smart-zoom-jquery.js插件页面上提供了两个按钮，可以让你的图片点击放大或者缩小当然，对于懒人来说，真是懒得点击那么你可以将鼠标悬停在图片上，滚动鼠标滚轮即可实现图片的放大或者缩小效果

效果描述：

e-smart-zoom-jquery.js插件

页面上提供了两个按钮，可以让你的图片点击放大或者缩小

那么你可以将鼠标悬停在图片上，滚动鼠标滚轮即可实现图片的放大或者缩小效果

使用方法：

1、将head中的css样式引入到你的网页中

2、将代码部分拷贝到你的网页body结束前的地方即可

jQuery触摸手机全屏上下滑动滚屏特效

垂直四级导航

jQuery点击图片预览并显示详情

jQuery点击图片预览并显示详情，加入购物车，适合简单的商城系统

图片展示

50105 693

jQuery蜂窝相框（HexagonBg.js）

jQuery六边形相框自动生成

图片展示

22356 303

jQuery移动端对图片进行拖拽与旋转等操作

选着一个背景模板然后对图片进行拖拽或者旋转一个角度或者放大和缩小进行调整然后保存下来

图片展示

24400 303

纯css3放大镜

通过css3样式实现放大镜的效果

图片展示

42736 378

讨论这个项目（115）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

爱吐泡泡的螃蟹 0

2021/7/21 20:09:37

西瓜0

2021/7/21 23:17:52

var scaleToAdd = 0.8;每次点击加号增加的倍数。😉

爱吐泡泡的螃蟹0

2021/7/22 10:05:08

看到了, 感谢大佬, 那那个鼠标滚动放大的在哪控制的啊

你?留的?度、夏天也?冷 0

2021/6/16 17:18:40

李伟利0

2022/9/8 11:47:32

同问，这个拖动的时候会闪屏以及图片会失真

书呆子 0

2019/6/20 17:50:46

文1

2021/7/31 11:05:10

var rotatenum = 0;
$(window).load(function() {
    $(".phototool button").click(function() {
        var index = Number($(this).index());
        switch (index) {
            case 0:
                rotatenum = rotatenum + 90;
                break;
            case 1:
                rotatenum = rotatenum - 90;
                break;
        }
        if (index == 0 || index == 1) {
            $("#imgcontent img").css({
                '-webkit-transform': 'rotate(' + rotatenum + 'deg)',
                '-ms-transform': 'rotate(' + rotatenum + 'deg)',
                '-moz-transform': 'rotate(' + rotatenum + 'deg)',
                '-o-transform': 'rotate(' + rotatenum + 'deg)',
                'transform': 'rotate(' + rotatenum + 'deg)'
            });
        }
    });
});