【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"><…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
（一）单例模式
一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...
Web后端基础(基础知识)
BS架构：Browser/Server，浏览器/服务器架构模式。客户端只需要浏览器，应用程序的逻辑和数据都存储在服务端。 优点：维护方便缺点：体验一般 CS架构：Client/Server，客户端/服务器架构模式。需要单独…...
【深度学习新浪潮】什么是credit assignment problem？
Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...
前端高频面试题2：浏览器/计算机网络
本专栏相关链接 前端高频面试题1：HTML/CSS 前端高频面试题2：浏览器/计算机网络 前端高频面试题3：JavaScript 1.什么是强缓存、协商缓存？ 强缓存： 当浏览器请求资源时，首先检查本地缓存是否命中。如果命…...
Python常用模块：time、os、shutil与flask初探
一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...
boost::filesystem::path文件路径使用详解和示例
boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类，封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解，包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...
python打卡第47天
昨天代码中注意力热图的部分顺移至今天 知识点回顾： 热力图 作业：对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图，展示模…...