【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"><…...
从零解析ST电机库FOC：核心算法与工程实现
1. FOC技术基础：从三相电流到旋转磁场 我第一次接触FOC（Field Oriented Control）时，被那些复杂的数学公式搞得头晕目眩。直到有一天，我把无刷电机想象成小时候玩的磁铁小车，突然就明白了其中的奥妙。FOC本质…...
AI与Web3融合：Solana开发者工具箱core-ai架构解析与实践
1. 项目概述：当AI遇见Web3，一个开发者工具箱的诞生最近在Web3和AI的交叉领域里折腾，发现了一个挺有意思的项目——helius-tech-labs/core-ai。这名字听起来就很有野心，core（核心）和ai（人工智能&…...
SDLPAL图形渲染技术揭秘：OpenGL与Shader的完美结合
SDLPAL图形渲染技术揭秘：OpenGL与Shader的完美结合 【免费下载链接】sdlpal SDL-based reimplementation of the classic Chinese-language RPG known as PAL. 项目地址: https://gitcode.com/gh_mirrors/sd/sdlpal SDLPAL是一款基于SDL的经典中文RPG游戏重制…...
77种商品-图像分类数据集
77种商品图像分类数据集 数据集（文章最后关注公众号获取数据集）： 链接: https://pan.baidu.com/s/1Xcj5Z-RSUjGH47OIbH5wjQ?pwd=fq2p 提取码: fq2p 数据集信息介绍： 以下是整理后的清晰呈现，按照商品名称首字母顺序进行排列： 东方树叶红茶：文件夹中的图片数量为 150 …...
Synology API v0.8架构重构：企业级NAS自动化管理Python SDK深度解析
Synology API v0.8架构重构：企业级NAS自动化管理Python SDK深度解析 【免费下载链接】synology-api A Python wrapper around Synology API 项目地址: https://gitcode.com/gh_mirrors/sy/synology-api Synology API v0.8版本标志着该项目在企业级NAS自动化管…...
移步皆海景处处可停留，读懂大连海岸的松弛质感
沿着大连的滨海路漫步，你会遇见这座城市最从容的一面。这条贯穿海滨风景线的道路，串联起星海广场、森林动物园、老虎滩海洋公园等多个开放型景观区域，核心特点在于它并不急于展示某个单一景点，而是将城市生活与自然海岸融为一体—…...
嵌入式以太网模块WIZ5500应用指南：从SPI接口到物联网稳定连接
1. 项目概述：为什么你的物联网项目需要一个有线网络“锚点”无线网络（Wi-Fi）确实方便，但做过几个实际项目的朋友都知道，它的“方便”有时是建立在“不确定性”之上的。信号波动、信道拥堵、复杂的认证流程，…...
3大核心优势：QModMaster如何成为工业通信调试的必备利器
3大核心优势：QModMaster如何成为工业通信调试的必备利器 【免费下载链接】qModbusMaster Fork of QModMaster (https://sourceforge.net/p/qmodmaster/code/ci/default/tree/) 项目地址: https://gitcode.com/gh_mirrors/qm/qModbusMaster 你是否曾在调试工业…...
RAG系统评估实战：使用renumics-rag进行量化分析与性能优化
1. 项目概述：一个为RAG应用量身定制的开源评估工具如果你正在构建或优化一个基于检索增强生成（RAG）的系统，那么你大概率会遇到一个核心痛点：如何科学、量化地评估它的好坏？是看它回答得“像不像人”&#x…...
嵌入式GUI设计：资源受限下的高效人机交互实践
1. 嵌入式GUI设计的核心挑战与价值定位在咖啡机、车载仪表、医疗设备等嵌入式系统中，图形用户界面(GUI)承担着人机交互的关键桥梁作用。与桌面端或移动端GUI不同，嵌入式GUI面临三大独特约束：首先，硬件资源极度受限——典型嵌入式处…...