【Web开发】jquery图片放大镜效果制作变焦镜头图片放大
jquery图片放大镜效果制作变焦镜头图片放大实现
整体步骤流程：
1. 前端html实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>前端界面jquery实现变焦放大图片细节效果</title><style type="text/css">
.content{width:960px;margin:0 auto;}
.content li{width:450px;height:350px;float:left;list-style:none;}
.zoom{display:inline-block;}
.zoom:after{content:'';display:block;width:33px;height:33px;position:absolute;top:0;right:0;}
.zoom img{display:block;}
.zoom img::selection{background-color:transparent;}
#image3 img:hover{cursor:url(images/grab.cur), default;}
#image3 img:active{cursor:url(images/grabbed.cur), default;}
</style><script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src='js/jquery.zoombie.js'></script>
<script type="text/javascript">$(document).ready(function () {$('#image1').zoombie();$('#image2').zoombie({ on: 'click' });$('#image3').zoombie({ on: 'grab' });$('#image4').zoombie({ on: 'toggle' });});
</script><script type="text/javascript" language="javascript">$(function () {$("#img_01").zoombieLens();$("#img_02").zoombieLens({ Size: 500 });$("#img_03").zoombieLens({ imageSrc: "images/校园逸夫楼1.jpg" });$("#img_04").zoombieLens({ borderSize: 15, borderColor: "#06f" });});
</script></head>
<body><ul class="content"><!--<li><span class='zoom' id='image1'><img src='images/校园逸夫楼1.jpg' id='img1' width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/></span><pre>$('#image1').zoombie();</pre><pre>鼠标经过放大细节</pre></li><li><span id='image2' class='zoom'><img src='images/校园逸夫楼1.jpg' id='img2' width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/> </span><pre>$('#image2').zoombie({ on: 'click' });</pre><pre>鼠标单击放大细节</pre></li><li><span class='zoom' id='image3'><img src='images/校园逸夫楼1.jpg' id='img3' width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/></span><pre>$('#image3').zoombie({ on: 'grab' });</pre><pre>鼠标单击放大细节</pre></li><li><span class='zoom' id='image4'><img src='images/校园逸夫楼1.jpg' id='img4' width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/></span><pre>$('#image4').zoombie({ on:'toggle' });</pre><pre>鼠标单击放大细节</pre></li>--><li><img id="img_01" src="images/校园逸夫楼1.jpg" width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee' /><!--<pre>$("#img_01").zoombieLens();</pre>--><pre>鼠标经过放大细节</pre></li><li><img id="img_02" src="images/校园逸夫楼1.jpg" width='426' height='241'style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/><!--<pre>$("#img_02").zoombieLens({ Size: 2000 });</pre>--><pre>鼠标经过放大细节</pre></li><li><img id="img_03" src="images/校园逸夫楼1.jpg" width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/><!--<pre>$("#img_03").zoombieLens({ imageSrc: "可爱小刺猬.jpg" });</pre>--><pre>鼠标经过放大细节</pre></li><li><img id="img_04" src="images/校园逸夫楼1.jpg" width='426' height='241' style="border: 2px solid #00ff21;" alt='Daisy on the Ohoopee' /><!--<pre>$("#img_04").zoombieLens({ borderSize: 15, borderColor: "#06f" });</pre>--><pre>鼠标经过放大细节</pre></li>
</ul></body>
</html>
2. JavaScript实现
2.1 js/jquery.zoombie.js
(function ($) {$.fn.zoombieLens = function (options) {var defaults = {Size: 100,borderSize: 4,borderColor: "#888"};var options = $.extend(defaults, options);var lensType = "background-position: 0px 0px;width: " + String(options.Size) + "px;height: " + String(options.Size)+ "px;float: left;display: none;border-radius: " + String(options.Size / 2 + options.borderSize)+ "px;border: " + String(options.borderSize) + "px solid " + options.borderColor+ ";background-repeat: no-repeat;position: absolute;";return this.each(function () {obj = $(this);var offset = $(this).offset();// Creating lensvar target = $("<div style='" + lensType + "' class='" + options.lensCss + "'> </div>").appendTo($(this).parent());var targetSize = target.size();// Calculating actual size of imagevar imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";var widthRatio = 0;var heightRatio = 0;$(imageTag).load(function () {widthRatio = $(this).width() / obj.width();heightRatio = $(this).height() / obj.height();}).appendTo($(this).parent());target.css({ backgroundImage: "url('" + imageSrc + "')" });target.mousemove(setImage);$(this).mousemove(setImage);function setImage(e) {var leftPos = parseInt(e.pageX - offset.left);var topPos = parseInt(e.pageY - offset.top);if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {target.hide();}else {target.show();leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1));topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1));target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' });leftPos = String(e.pageX - target.width() / 2);topPos = String(e.pageY - target.height() / 2);target.css({ left: leftPos + 'px', top: topPos + 'px' });}}});};
})(jQuery);(function ($) {var defaults = {url: false,callback: false,target: false,duration: 120,on: 'mouseover' // other options: 'grab', 'click', 'toggle'};$.zoombie = function(target, source, img) {var outerWidth,outerHeight,xRatio,yRatio,offset,position = $(target).css('position');$(target).css({position: /(absolute|fixed)/.test() ? position : 'relative',overflow: 'hidden'});$(img).addClass('zoomImg').css({position: 'absolute',top: 0,left: 0,opacity: 0,width: img.width,height: img.height,border: 'none',maxWidth: 'none'}).appendTo(target);return {init: function() {outerWidth = $(target).outerWidth();outerHeight = $(target).outerHeight();xRatio = (img.width - outerWidth) / $(source).outerWidth();yRatio = (img.height - outerHeight) / $(source).outerHeight();offset = $(source).offset();},move: function (e) {var left = (e.pageX - offset.left),top = (e.pageY - offset.top);top = Math.max(Math.min(top, outerHeight), 0);left = Math.max(Math.min(left, outerWidth), 0);img.style.left = (left * -xRatio) + 'px';img.style.top = (top * -yRatio) + 'px';}};};$.fn.zoombie = function (options) {return this.each(function () {varsettings = $.extend({}, defaults, options || {}),//target will display the zoomed iamgetarget = settings.target || this,//source will provide zoom location info (thumbnail)source = this,img = new Image(),$img = $(img),mousemove = 'mousemove',clicked = false;// If a url wasn't specified, look for an image element.if (!settings.url) {settings.url = $(source).find('img').attr('src');if (!settings.url) {return;}}img.onload = function () {var zoombie = $.zoombie(target, source, img);function start(e) {zoombie.init();zoombie.move(e);// Skip the fade-in for IE8 and lower since it chokes on fading-in// and changing position based on mousemovement at the same time.$img.stop().fadeTo($.support.opacity ? settings.duration : 0, 1);}function stop() {$img.stop().fadeTo(settings.duration, 0);}if (settings.on === 'grab') {$(source).mousedown(function (e) {$(document).one('mouseup',function () {stop();$(document).unbind(mousemove, zoombie.move);});start(e);$(document)[mousemove](zoombie.move);e.preventDefault();});} else if (settings.on === 'click') {$(source).click(function (e) {if (clicked) {// bubble the event up to the document to trigger the unbind.return;} else {clicked = true;start(e);$(document)[mousemove](zoombie.move);$(document).one('click',function () {stop();clicked = false;$(document).unbind(mousemove, zoombie.move);});return false;}});} else if (settings.on === 'toggle') {$(source).click(function (e) {if (clicked) {stop();} else {start(e);}clicked = !clicked;});} else {zoombie.init(); $(source).hover(start,stop)[mousemove](zoombie.move);}if ($.isFunction(settings.callback)) {settings.callback.call(img);}};img.src = settings.url;});};$.fn.zoombie.defaults = defaults;}(window.jQuery));
2.2 js/jquery.min.js 经典jquery库即可
3. 资源文件
3.1 images
文件名：校园逸夫楼1.jpg
3.2 其他资源文件
grab.cur 和 grabbed.cur
4. 运行效果展示
相关文章：
【Web开发】jquery图片放大镜效果制作变焦镜头图片放大
jquery图片放大镜效果制作变焦镜头图片放大实现 整体步骤流程： 1. 前端html实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"…...
RTC实时显示时间（备份电源 备份域的作用）
RTC初始化配置 系统复位后，可通过 PWR 电源控制寄存器 (PWR_CR) 的 DBP 位保护 RTC 寄存器以防止 非正常的写访问。必须将 DBP 位置 1 才能使能 RTC 寄存器的写访问。 上电复位后，所有 RTC 寄存器均受到写保护。通过向写保护寄存器 (RTC_WPR) 写入一个…...
【YOLOv9】完胜V8的SOTA模型Yolov9(论文阅读笔记)
官方论文地址： 论文地址点击即可跳转 官方代码地址： GitCode - 开发者的代码家园 官方代码地址点击即可跳转 1 总述 当输入数据经过各层的特征提取和变换的时候，都会丢失一定的信息。针对这一问题：...
学生管理系统详细需求文档
文章目录 1. 引言1.1 目的1.2 范围 2. 功能性需求2.1 用户认证2.1.1 登录 2.2 学生信息管理2.2.1 学生档案2.2.2 学籍管理 2.3 课程管理2.3.1 课程信息2.3.2 选课系统 2.4 成绩管理2.4.1 成绩录入2.4.2 成绩查询 2.5 课程进度和通知2.5.1 课程日历2.5.2 通知和提醒 2.6 学生活动…...
产品经理功法修炼（4）之产品管理
点击下载《产品经理功法修炼（4）之产品管理》 产品经理功法修炼（1）之自我管理 产品经理功法修炼（2）之专业技能 产品经理功法修炼（3）之产品设计 产品经理功法修炼（4）之产品管理 产品经理功法修炼（5）之团队管理 1. 前言 产品经理的能力修炼并非局限于某一技能的…...
【LeetCode热题100】【二叉树】二叉树展开为链表
题目链接：114. 二叉树展开为链表 - 力扣（LeetCode） 就先序遍历的顺序，其实就是简单的深度遍历顺序，装进一个容器里面再前一个后一个串连起来，注意容器的size是个无符号数，无符号数和有符号运行…...
云原生__K8S
createrepo --update /var/localrepo/# 禁用 firewall 和 swap [rootmaster ~]# sed /swap/d -i /etc/fstab [rootmaster ~]# swapoff -a [rootmaster ~]# dnf remove -y firewalld-*[rootmaster ~]# vim /etc/hosts 192.168.1.30 harbor 192.168.1.50 master 192.168.1.…...
nginx配置证书和私钥进行SSL通信验证
文章目录 一、背景1.1 秘钥和证书是两个东西吗？1.2 介绍下nginx配置文件中参数ssl_certificate和ssl_certificate_key1.3介绍下nginx支持的证书类型1.4 目前nginx支持哪种证书格式？1.5 nginx修改配置文件目前方式也会有所不同1.6 介绍下不通格式的证书哪…...
【面试题】微博、百度等大厂的排行榜如何实现？
背景 现如今每个互联网平台都会提供一个排行版的功能，供人们预览最新最有热度的一些消息，比如百度： 再比如微博： 我们要知道，这些互联网平台每天产生的数据是非常大，如果我们使用MySQL的话，db实…...
com.intellij.diagnostic.PluginException 问题
关于作者：CSDN内容合伙人、技术专家， 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ，擅长java后端、移动开发、商业变现、人工智能等，希望大家多多支持。 未经允许不得转载 目录 一、导读二、 推荐阅读 一、导读 遇到…...
Altair® （澳汰尔）Inspire™ Render —— 强大的 3D 渲染和动画工具
Inspire Render 是一种全新 3D 渲染和动画工具，可供创新设计师、建筑师和数字艺术家以前所未有的速度快速制作精美的产品演示。 借助基于物理特性的内置高品质全局照明渲染引擎 Thea Render，可以快速创建、修改和拖放各种材质并添加照明环境，…...
虚幻引擎启动报错记录
0x00007FFEF0C8917C (UnrealEditor-CoreUObject.dll)处(位于 UnrealEditor.exe 中)引发的异常: 0xC0000005: 写入位置 0x0000000000000030 时发生访问冲突。 解决办法：首先查看堆栈信息，我的项目启动是因为默认场景编译不过，进到编辑器配置文…...
最祥解决python 将Dataframe格式数据上传数据库所碰到的问题
碰到的问题 上传Datafrane格式的数据到数据库 会碰见很多错误 举几个很普遍遇到的问题(主要以SqlServer举例) 这里解释下 将截断字符串或二进制数据 这个是字符长度超过数据库设置的长度 然后还有字符转int失败 或者字符串转换日期/或时间失败 这个是碰到的需要解决的最多的问…...
【汇编语言实战】统计个数
已知10个分布在0至100内的正整数，统计大于等于60的数的个数和小于60的数的个数 C语言描述该程序流程： #include <stdio.h> int main() {int arr1[]{11,33,73,52,93,84,67,56,64,75};int num10;for(int i1;i<10;i){if(arr1[i]>60){num1;}}p…...
SQLite数据库概述及在Java中的应用
## 什么是SQLite数据库？ SQLite是一种轻量级的数据库管理系统，它不需要一个独立的服务器进程或操作系统的运行，而是将整个数据库，包括定义、表、索引以及数据本身，全部存储在一个独立的磁盘文件中。SQLite的设计理念是…...
嵌入式单片机补光灯项目操作实现
1.【实验目的】 用于直播效果的补光 2.【实验原理】 原理框架图2.各部分原理及主要功能 1.充电和供电：采用5V2A tepy_c接口充电，3.7V锂电池供电， 2.功能：产品主要是用于直播或拍照时的补光。分为三个模式：白光/暧光&#x...
【3GPP】【核心网】核心网/蜂窝网络重点知识面试题二（超详细）
1. 欢迎大家订阅和关注，3GPP通信协议精讲（2G/3G/4G/5G/IMS）知识点，专栏会持续更新中.....敬请期待！ 目录 1. 对于主要的LTE核心网接口，给出运行在该接口上数据的协议栈，并给出协议特征 2. 通常…...
R语言记录过程
如何使用这个函数as.peakData 函数构造过程 出现问题是缺少函数的问题 up不告诉我，这里是代表c,h,o的值，你从里面获取把值，设置成c,h,o就可以了 现在开始测试参数 第一次 startRow : 开始查找数据的第一行。不管startRow的值是多少ÿ…...
【leetcode面试经典150题】36. 旋转图像（C++）
【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主，题解使用C语言。（若有使用其他语言的同学也可了解题解思路，本质上语法内容一致&…...
AOP 面向切面编程 入门练习
编写过程 添加依赖 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"><…...
Three.js 3D地图实战：从GeoJSON数据到交互式可视化（附完整代码）
Three.js 3D地图实战：从GeoJSON数据到交互式可视化 当我们需要在网页上展示一个具有真实地理特征的3D地图时，Three.js无疑是最强大的工具之一。它不仅能让地图以立体的形式呈现，还能添加各种交互效果，让数据可视化变得更加生动。本…...
K230目标检测实战：手把手教你用Labelme标注数据并一键转成VOC格式（附避坑指南）
K230目标检测实战：高效数据标注与VOC格式转换全攻略 当你第一次接触K230开发板进行目标检测项目时，数据准备往往是最大的拦路虎。特别是从原始图片到符合AI_Cube要求的VOC格式数据集，这个过程充满了各种"坑"。本文将分享一套经过实…...
Mermaid：文本驱动的可视化引擎深度指南
Mermaid：文本驱动的可视化引擎深度指南 【免费下载链接】mermaid mermaid-js/mermaid: 是一个用于生成图表和流程图的 Markdown 渲染器，支持多种图表类型和丰富的样式。适合对 Markdown、图表和流程图以及想要使用 Markdown 绘制图表和流程图的开发者。 …...
ESP8266嵌入式JavaScript引擎：零内存分配的确定性JS执行
1. 项目概述 ESP8266-Arduino-JavaScript 是一个面向 ESP8266 平台的轻量级嵌入式 JavaScript 引擎库，其核心目标并非在微控制器上完整复刻 V8 或 SpiderMonkey 的功能，而是为资源受限的 IoT 设备提供一种 可预测、内存可控、无动态分配、零依赖 的脚本…...
Qwen3.5-4B-Claude-Opus行业落地：高校编程教学辅助与算法解题思路生成
Qwen3.5-4B-Claude-Opus行业落地：高校编程教学辅助与算法解题思路生成 1. 模型介绍与教育场景适配性 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是一个专为推理任务优化的轻量级AI模型，特别适合教育领域的应用场景。该模型基于Qwen3.5-4B架…...
HP-Socket开发者技能认证考试大纲更新全指南：周期解析与参与攻略
HP-Socket开发者技能认证考试大纲更新全指南：周期解析与参与攻略 【免费下载链接】HP-Socket High Performance TCP/UDP/HTTP Communication Component 项目地址: https://gitcode.com/gh_mirrors/hp/HP-Socket HP-Socket作为高性能TCP/UDP/HTTP通信组件&…...
Connect to Oracle Database with JDBC Driver
1. Overview The Oracle Database is one of the most popular relational databases. In this tutorial, we’ll learn how to connect to an Oracle Database using a JDBC Driver. 2. The Database To get us started, we need a database. If we don’t have access to …...
# 发散创新：用Python打造自动化渗透测试工具链，从扫描到利用的全流程实战在网络安全攻防对抗中，**自动化渗透测试工
发散创新：用Python打造自动化渗透测试工具链，从扫描到利用的全流程实战 在网络安全攻防对抗中，自动化渗透测试工具正逐步成为红队成员和安全研究人员的核心利器。传统工具如Nmap、Burp Suite虽强大，但缺乏灵活定制能力；…...
vLLM-v0.17.1保姆级教程：SSH中查看vLLM实时请求队列与Pending统计
vLLM-v0.17.1保姆级教程：SSH中查看vLLM实时请求队列与Pending统计 1. vLLM框架简介 vLLM是一个专注于大语言模型(LLM)推理和服务的高性能库，它的设计目标是让开发者能够轻松部署和管理大规模语言模型。这个项目最初由加州大学伯克利分校的天空计算实验…...
tmux快速上手指南：3个核心命令与1个关键快捷键解析
1. 为什么你需要tmux？ 如果你经常在服务器上工作，肯定遇到过这样的场景：正在跑一个耗时很长的任务，突然网络波动导致SSH连接断开，所有进程都被终止，几个小时的成果瞬间消失。这种时候，tmux就是你…...