【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能:
模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置。
实现效果:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片放大镜效果</title>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
<style>
.min{
width: 350px;
height: 350px;
border: 1px solid black;
float: left;
position: relative;
margin: 50px 0 0 30px; }
.max{
width: 350px;
height: 350px;
border: 1px solid black;
float: left;
display: none;
overflow: hidden;
position: relative;
margin-left:30px ;
}
.max img{
position: absolute;
margin: 0 auto;
}
.fd{
width: 153.125px;
height: 153.125px;
background-color: skyblue;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
display: none;
cursor: move;
}
</style>
</head>
<body>
<div class="min">
<img src="../img/0.jpg" width="350px" height="350px"/>
<div class="fd"></div>
</div>
<div class="max">
<img src="../img/0.jpg"/>
</div> <script>
var min = document.querySelector(".min");
var max = document.querySelector(".max");
var img = document.querySelector(".max img");
var fd = document.querySelector(".fd"); min.onmouseover = function(){
// 1.鼠标覆盖显示max和fd
max.style.display = "block";
fd.style.display = "block";
}
// 离开时隐藏
min.onmouseout = function(){
max.style.display = "none";
fd.style.display = "none";
}
// 2. fd的移动范围
min.onmousemove = function(){
// 鼠标触摸的点
var x = event.clientX-min.offsetLeft-fd.offsetWidth/2;
var y = event.clientY-min.offsetTop-fd.offsetHeight/2;
// 最大移动距离
var maxX = min.clientWidth-fd.offsetWidth;
var maxY = min.clientHeight-fd.offsetHeight;
// 边界判断
if (x <= 0) {
x = 0;
}else if (x >= maxX) {
x = maxX;
}
if (y <= 0) {
y = 0;
}else if (y >= maxY) {
y = maxY;
}
// fd的位置
fd.style.left = x+'px';
fd.style.top = y+'px';
//fd/min = max/img
//移动比例
var moveX = x/maxX;
var moveY = y/maxY;
// 移动
// 3. max的对应显示
// 对于大图而言,放大镜在小图上移动的比例相当于img在可显示区域上移动的比例
// 放大镜右移等于图片左移
// 也就是本质上为img-max 然而而需要负值,则*-1简化后为max-img
img.style.left = moveX*(max.clientWidth - img.offsetWidth) + 'px';
img.style.top = moveY*(max.clientHeight - img.offsetHeight) + 'px'; } </script>
</body>
</html>
【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果的更多相关文章
- Jquery图片放大镜
一般在“在线商城.电子商务.企业产品介绍”等地方经常会看到一些图片放大镜的功能,而做这个功能一般是会用一个js包——enlarge.js(这是jquery图片放大镜的插件).Enlarge 是一个基于 ...
- jquery图片放大镜和遮罩层效果
图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
- 漂亮!Javascript代码模仿淘宝宝贝搜索结果的分页显示效果
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS ...
- Jquery插件开发之图片放大镜效果(仿淘宝)
原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...
- 基于jQuery仿淘宝产品图片放大镜代码
今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...
- 基于jQuery仿淘宝产品图片放大镜特效
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...
随机推荐
- Service学习笔记
一 什么是Service Service作为安卓四大组件之一,拥有重要的地位.Service和Activity级别相同,只是没有界面,是运行于后台的服务.这个运行“后台”是指不可见,不是指在后台线程中 ...
- LightBGM之train
用于模型的训练 1.说明: lightgbm.train(params, train_set, num_boost_round=100, valid_sets=None, valid_names=No ...
- explain 分析 聚合统计语句的性能
EXPLAIN SELECT COUNT(1) FROM question; id select_type table partitions type possible_keys key key_le ...
- stark - 分页、search、actions
一.分页 效果图 知识点 1.分页 {{ showlist.pagination.page_html|safe }} 2.page.py class Pagination(object): def _ ...
- Android中的Handler及它所引出的Looper、MessageQueue、Message
0.引入 0.1.线程间通信的目的 首先,线程间通信要交流些什么呢? 解答这个问题要从为什么要有多线程开始,需要多线程的原因大概有这些 最早也最基本:有的任务需要大量的时间,但其实并不占用计算资源,比 ...
- 基于 Spark 的文本情感分析
转载自:https://www.ibm.com/developerworks/cn/cognitive/library/cc-1606-spark-seniment-analysis/index.ht ...
- selenium3.0 远程模式
准备工作: 1. 安装chrome浏览器 2. 下载selnium-server-standalone-3.0.1.jar 步骤: 1. java -jar selnium-server-standa ...
- PAT 1137 Final Grading[一般][排序]
1137 Final Grading(25 分) For a student taking the online course "Data Structures" on China ...
- PAT 1128 N Queens Puzzle[对角线判断]
1128 N Queens Puzzle(20 分) The "eight queens puzzle" is the problem of placing eight chess ...
- #C++初学记录(并查集)
并查集 题目 今天是伊格那丢的生日.他邀请了很多朋友.现在该吃晚饭了.伊格那丢想知道他至少需要多少张桌子.你必须注意到并不是所有的朋友都认识对方,而且所有的朋友都不想和陌生人待在一起.这个问题的一个重 ...