php 放大镜,图片放大镜效果实战总结
摘要:本次实战主要完成了图片放大镜的效果,通过定义原始图片,放大镜,放大后的图片,然后设置放大后的图片为原始图片的3倍,通过鼠标移上显示放大后的图片,并通过位移计算当前放大镜的位置,设置放大后图片的偏移量,来显示放大后的图片效果。代码如下:html>
本次实战主要完成了图片放大镜的效果,通过定义原始图片,放大镜,放大后的图片,然后设置放大后的图片为原始图片的3倍,通过鼠标移上显示放大后的图片,并通过位移计算当前放大镜的位置,设置放大后图片的偏移量,来显示放大后的图片效果。
代码如下:html>
图片放大镜效果
$(function() {
$('#big').hide();//默认隐藏放大后的图片
// ----------------鼠标移上原始图片开始
$('#normal').mouseover(function(){ //鼠标移上原始图片时
$('#show,#big').show();//鼠标移上时,显示两张图片
$(this).mousemove(function(curMove){
//实时计算原始图片上小方块的移动距离,鼠标位于小方块的中间位置
$('#show').css({
'left':curMove.pageX-$('#show').width()/2,
'top':curMove.pageY-$('#show').height()/2
})
})
//鼠标在原始图片上的移动事件
$('#normal').mousemove(function(e){
//获取鼠标当前位置
let [curX,curY]=[e.clientx,e.clienty];
//获取原图窗口距离文档的偏移位置
let [docX,docY]=[$('#normal').offset().left,$('#normal').offset().top];
//计算鼠标的相对位置
let [relativeX,relativeY]=[curX-docX,curY-docY];
//放大镜的宽高
let [showWidth,showHeight]=[$('#show').width()/2,$('#show').height()/2];
//鼠标移动时,设置放大镜的位置
$('#show').css({left:`${relativeX}-${showWidth}px`,top:`${relativeY}-${showHeight}px`});
//控制放大镜只能在原图窗口内移动,不能越界
//获取当前放大镜的偏移位置
let [curPYWidth,curPYHeight]=[$('#show').position().left,$('#show').position().top];
//获取最大的框高,用于定义边界
let [maxWidth,maxHeight]=[$('#normal').width()-$('#show').width(),$('#normal').height()-$('#show').height()];
//越界时重新调整放大镜的位置
if(curPYWidth<=0){$('#show').css('left','0px')}
if(curPYWidth>=maxWidth){$('#show').css('left',`${maxWidth}px`)}
if(curPYHeight<=0){$('#show').css('top','0px')}
if(curPYHeight>=maxHeight){$('#show').css('top',`${maxHeight}px`)}
//重新获取放大镜的偏移位置
[curPYWidth,curPYHeight]=[$('#show').position().left,$('#show').position().top];
//定义放大图片的位置
let [newX,newY]=[curPYWidth*3,curPYHeight*3];
//设置放大图片的位置
$('#big').find('img').css({'left':`-${newX}px`,'top':`-${newY}px`});
})
})
// ----------------鼠标移上原始图片结束
//鼠标移出原始图片时,隐藏放大镜和右侧的图片
$('#normal').mouseleave(function(){
$('#show,#big').hide();
})
})
zuoye.css*{ margin:0;padding:0; }
#normal{width: 450px;height: 450px;border: 1px solid #000;position: fixed;top: 20px;left: 20px;}/*原始图片*/
#normal img{width: 100%;height: 100%;}
#show{width: 150px;height: 150px;background: #754930;opacity: 0.4;position: absolute;display: none;}/*放大镜长宽*/
#big{width: 450px;height: 450px;border: 1px solid #000;position: relative;left: 520px;top: 20px;overflow: hidden;}/*放大图片区域长宽*/
#big>img{position: absolute;width: 1350px;height: 1350px;}/*放大图片的长宽*/
批改老师:灭绝师太批改时间:2018-11-21 17:45:16
老师总结:每一个js效果,只要摸清楚逻辑,用起来就不难,加油!
php 放大镜,图片放大镜效果实战总结相关推荐
- uniapp点击图片放大_手机做图片放大镜效果很难?看这里,分分钟就能学会!
将图片放大的放大镜效果图: PicsArt手机图片放大镜 PicsArt手机图片放大镜 在PicsArt中打开图片,点击[工具]--[图形剪辑]. PicsArt手机图片放大镜 选择圆形,通过缩放双指 ...
- javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- Jquery图片放大镜效果
介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL,所以找到了这个插件, 插件下载地址: http ...
- js实现图片放大镜效果
效果图 代码实现过程 html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 【小5聊】纯javascript实现图片放大镜效果
实现图片放大镜效果,其实就是一个比例放大的效果 以下通过纯javascript方式对图片进行等比例放大,等比倍数和出界判断可自行实现 文章后面会附上全部代码 放大镜效果 1. 放大镜组成 1)目标图 ...
- android图片凹凸效果,图像滤镜处理算法:柔化、光照、放大镜、哈哈镜
本文的最后提供了完整的Android工程下载,图像处理部分主要采用JNI,算法使用C实现,因为在开发过程中发现使用Java来进行数值处理时,速度绝对是不堪忍受的.现在代码中依然保留了一些Java的滤镜 ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- 13款jQuery图片放大镜效果代码
jQuery商城网站商品放大镜查看效果代码 jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东商城商品详细 ...
- 图片放大镜效果实现过程详解
给你们推荐一下 这是一个大牛直播传授知识 你们可以学习一下人家怎么学习的 想学习的可以来 直播时间: 晚8点 听课方式: 感兴趣的同学可以加Q群:439107211 点击链接加入群[前端技术交流群]: ...
最新文章
- dotNET面试题汇总系列连载(1):基础语法
- Oracle 18c 新特性:动态 Container Map 增强 Application Container 灵活性
- word转网页html,Word转网页html
- Peeking inside LuaJIT(窥探LuaJIT)
- 高旭东:科普返利网站模式,做到知己知彼放心购物!
- python处理excel表格
- UE4_虚幻引擎4多人联机基础知识和客户端服务器通信机制详解
- 让阿里告诉你, iOS开发者为什么要学 Flutter !
- MarkMan – 马克鳗,让设计更有爱!
- Given no hashes to check 131 links for project 'pip': discarding no candidates
- HTML+CSS+JS实现轮播效果
- 如何用Python爬取股市数据,并进行数据可视化
- JavaScript 深拷贝与浅拷贝
- python raise函数
- python输出100以内偶数_Python求取100以内的所有偶数和奇数以及和
- 杨天宇20180912-3 词频统计
- 替换word中英文““为中文双引号“”,且保持西文为Time NewRome
- CSS字体、文本属性、CSS 盒模型
- ☀️在爬完一周的朋友圈后,我发现了.......惊人⚠️秘密
- 人工智能导论实训 第五章 AlphaBeta剪枝算法求解博弈树最优选择
热门文章
- 智能安全实验室-Defendio杀马2.4.0.420-实时防护-内存防护、新浏览器导航界面...
- 详解:设计模式之-适配器模式
- Git 少用 Pull 多用 Fetch 和 Merge
- Myeclipse 更改web项目的访问名
- 滑动关机代码bat_BAT面试算法进阶--(2) 无重复字符的最长子串(滑动法优化+ASCII码法)...
- 软件生成问候图片_这些社交软件你玩过几个?
- 贪吃蛇程序 php,微信小程序-贪吃蛇教程实例
- julia在mac环境变量_在Julia中找到值/变量的类型
- duration java_Java Duration类| ofHours()方法与示例
- Java FilterInputStream reset()方法与示例