【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"><…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。 一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...