正文 

当前位置： 首页 > java > java教程

jquery图片缩放插件-smartzoom使用

author author     2022-09-16     634

关键词：

 e-smart-zoom-jquery.js插件，下载地址及示例：https://github.com/e-smartdev/smartJQueryZoom

插件描述：通过将鼠标悬停在图片上，滚动鼠标滚轮即可实现图片的放大或者缩小效果。

smartZoom使用

举个栗子，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>joannau</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .imgCon {
            width: 800px;
            height: 500px;
            margin: 40px auto;
            border: 2px solid #000;
        }
        .imgDiv {
            width: 100%;
            height: 100%;
        }
        .imgCon img{
            width: 100%;
        }
    </style>
</head>
<body>
<div class="imgCon">
    <div class="imgDiv">
        <img src="./assets/zoomSmall.jpg" alt="">
    </div>
</div>
<script src="../src/jquery-1.11.0.min.js"></script>
<script src="../src/e-smart-zoom-jquery.js"></script>
<script>
    $(function () {
        $(".imgCon img").smartZoom()
    })
</script>
</body>
</html>

直接对img对象使用smartZoom方法即可。

查看效果：

技术分享

缩放

技术分享

完美，这就成功使用了。

但很多人会遇见使用smartZoom图片位置偏移的问题，效果如下：

技术分享

边框不见，再看代码会发现：

技术分享

原来是top和left作祟。此时解决问题的重点就是在img图像外，嵌套一个div容器。如下：

<div class="imgDiv">
        <img src="./assets/zoomSmall.jpg" alt="">
   </div>

此时，便能解决位置偏移问题。

其他API:

// 方法中可以通过设置top，left等参数来指定图片初始参数；
$(".imgCon img").smartZoom({
            ‘left‘: ‘50px‘
        })

// 通过传入‘destroy‘来取消缩放；
 $(".imgCon img").smartZoom(‘destroy‘)

 

jquery panzoom 插件默认缩放？

】jquerypanzoom插件默认缩放？【英文标题】：jquerypanzoomPlugindefaultzoom?【发布时间】：2016-09-1519:54:31【问题描述】：您好，我正在使用JqueryPanzoom插件来放大和缩小我的图像，PluginLink我想自己设置它的默认缩放值请告诉我如何更改... 查看详情

使用jquery插件jcrop进行图片截取(代码片段)

Jcrop插件本身并不含有图片截取功能，它仅仅是在前端层面构建一套截取动画效果并产生4个坐标点，插件使用者将这4个坐标点传回至服务器接口上进行截取操作。其优点是具有较高的通用性、浏览器兼容性（IE6+）及稳定性高，... 查看详情

带有悬停细节的jQuery图像缩放

】带有悬停细节的jQuery图像缩放【英文标题】：jQueryimagezoomwithdetailsonhover【发布时间】：2011-10-1103:47:53【问题描述】：我正在寻找一个jQuery插件，它可以缩放缩略图并显示有关图像的一些细节。和谷歌图片搜索差不多。我找到了... 查看详情

如何使用 jquery 裁剪缩放的图像

】如何使用jquery裁剪缩放的图像【英文标题】：howtocropazoomedimageusingjquery【发布时间】：2011-05-1705:04:54【问题描述】：我必须创建一个customizedavatar，我需要在其中使用jqueryzoomimageandcropthat我发现了许多分别用于缩放和裁剪的插件... 查看详情

需要帮助实施 EasyZoom jquery 插件

】需要帮助实施EasyZoomjquery插件【英文标题】：NeedhelpimplementingEasyZoomjqueryplugin【发布时间】：2021-02-0418:43:07【问题描述】：总的来说，我对jquery和javascript不太熟悉，所以请耐心等待。但是，我正在尝试使用EasyZoom:https://i-like-robot... 查看详情

使用 CSS 变换缩放的 jQuery 拖动/调整大小

】使用CSS变换缩放的jQuery拖动/调整大小【英文标题】：jQueryDrag/ResizewithCSSTransformScale【发布时间】：2012-04-3001:24:51【问题描述】：我正在应用CSS转换（以及特定于浏览器的-webkit、-o等）：变换：matrix(0.5,0,0,0.5,0,0);到一个div，然后... 查看详情

viewer.js--一个强大的jquery图像查看插件

Viewer是一款强大的jQuery图像浏览插件。主要功能：支持选项支持方法支持事件支持触摸支持移动支持缩放支持旋转支持键盘跨浏览器支持查看演示   立即下载部分插件网站提供的下载包有缺陷，不能兼容ie8-10。错误表... 查看详情

jquery图片延迟加载插件jquery.lazyload的使用

使用方法引用jquery和jquery.lazyload.js到你的页面12<script src="jquery-1.11.0.min.js"></script><script src="jquery.lazyload.js?v=1.9.1"></script>html图片调用方法为图片加入样式lazy 图片路径引用方 查看详情

如何使用 Cloudinary jQuery 插件直接从页面上传图片？

】如何使用CloudinaryjQuery插件直接从页面上传图片？【英文标题】：HowtouseCloudinaryjQueryplugintouploadimagesdirectlyfromapage?【发布时间】：2012-08-1416:53:20【问题描述】：这里是初学者的问题。我正在尝试将网页中的照片直接上传到cloudinar... 查看详情

jquery全屏滚动插件

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如iPhone5C的介绍页面（查看），QQ浏览器的官网站。如果你也希望你的网站能... 查看详情

jquery图片延迟加载插件jquery.lazyload

   查看演示   website   立即下载插件描述：jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。使用方法引用jquery和jquery.lazyload.... 查看详情

jquery.easing.1.3.js这个插件有啥作用功能么？

jquery.easing.js1.3是一个配合jquery实现完美动画效果的扩展插件，比如我们在使用jquery制作一幅图片滚动或图片渐变，使用本插件可扩展或增强jquery性能，生成完美无缺兼容性更好的jquery动画来，它不仅可以用于图像特效，像一些... 查看详情

jquery压缩图片插件

imageCompress只有图片压缩功能，比较简单jquery.imageCompress.js使用说明：el：为上传框quality：压缩图片质量，单位为％onloadStart：读取图片开始，传入文件对象onloadEnd：读取图片结束，传入图片对象oncompressStart：压缩图片开始，传入... 查看详情

jquery的jqzoom插件的使用（图片放大镜）(代码片段)

今天学习一下，图片放大镜功能，需要使用插件JQzoom引入文件<scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript"src="js/jquery.jqzoom.js"></script><!--<linkrel=" 查看详情

vue使用v-viewer插件实现图片预览和缩放和旋转等功能(代码片段)

前言昨天不是做了一个动态的图片展示吗，今天就寻思着能不能完善下功能，可以通过点击图片的方式进行放大缩小，甚至旋转。图片展示可以参考：Vue显示图片的几种方式然后我一顿收搜，发现了vue中有这... 查看详情

推荐两款简单好用的图片放大jquery插件

一、zoomfiy.js推荐可以从这里下载使用说明：使用该jquery插件引入该插件的js:zoomfiy.js或min引入该插件的css:zoomfiy.css或min前后顺序都可js里加入调用插件的函数$(‘这里写要放大的图片‘).zoomify();如果有ajax新生成的图片，要在ajax里... 查看详情

zx-image-view图片查看插件-切换旋转缩放移动(代码片段)

zx-image-view图片预览插件，支持图片切换、旋转、缩放、移动...浏览器支持：IE10+,(IE9不支持旋转功能)效果预览：https://capricorncd.github.io...源码地址：https://github.com/capricornc...默认键盘操作方向键：左left右right前后图片切换，上up下... 查看详情

jquery图片切换插件jquery.cycle.js

Cycle是一个很棒的jQuery图片切换插件,提供了很好的功能来帮助大家更简单的使用插件的幻灯功能下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后。<head> <scripttype="text/javascript"src="js/jquery-1.8.0.min.js">... 查看详情