js实现图片局部放大效果详解
图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。
如上图，可以看到，这是放大镜的基本效果，主要分成左右两个部分。左边分成一张大图，和一个导航栏，在右边则是一个放大镜放大后的图片。因此，我在画页面的时候，大体的HTMl结构如下：
<body>
<div class="choose">
<div class="content">
<img src="images/small1.jpg" id = "small">
<div class="shadow"></div>
</div>
<ul id = "listshow">
<li class="selected">
<img src="images/small1.jpg" data-img = "images/big1.jpg" alt="">
</li>
<li>
<img src="images/small2.jpg" data-img = "images/big2.jpg" alt="">
</li>
<li>
<img src="images/small3.jpg" data-img = "images/big3.jpg" alt="">
</li>
<li>
<img src="images/small4.jpg" data-img = "images/big4.jpg" alt="">
</li>
</ul>
</div>
<div class="larger">
<img src="images/big1.jpg" id = "big">
</div>
</body>
在这个时候，将静态页面按常规方式进行布局，给予css样式如下：
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.choose{
width: 400px;
height: 600px;
float: left;
margin:50px 0 0 50px;
}
.content{
width: 400px;
height: 400px;
position: relative;
}
.content img {
width: 400px;
height: 400px;
}
#listshow{
width: 400px;
height: 100px;
margin-top: 20px;
}
#listshow li{
width: 98px;
height: 100px;
float: left;
border:1px solid #666;
}
#listshow li img{
width: 98px;
height: 100px;
}
#listshow .selected{
border-color: brown;
}
.larger{
width: 400px;
height: 400px;
position: absolute;
top: 50px;
left: 500px;
float: left;
overflow: hidden;
display: none;
}
#big{
width: 800px;
height: 800px;
position: absolute;
left: 0;
top: 0;
}
.shadow{
width: 200px;
height: 200px;
background-color: rgba(145,200,200,.4);
position: absolute;
left: 0;
top: 0;
z-index: 10;
display: none;
}
</style>
那么这个时候，开始写js样式，分布书写的话，第一步要考虑到左边的选项卡。选项卡我采用直接使用src赋值的方法，将滑过的图片对应的src给大图，代码呈现：
for(var i = 0;i<showli.length;i++){
var showitem = showli[i];
showitem.onmouseover =showitem.onclick = function(e){
let evt = window.event||e;
for(var j =0;j<showli.length;j++){
showli[j].className = "";
}
var showimg = this.getElementsByTagName("img")[0];
var imgsrc = showimg.src;
small.src = imgsrc;
var bigsrc = showimg.getAttribute("data-img");
big.src = bigsrc;
this.className = "selected";
}
}
这样就可以成功实现选项卡功能，比较简单粗暴的一种方式，当然，大家使用selected结合点击下标和大图下标相等的这一点，也一样可以做出来。
接下来要考虑到，鼠标在大图上移动时，遮罩层的移动效果。值得一提的时候，这个地方其实存在一个视觉上的误区，看起来是在滑动遮罩层，其实是鼠标的滑动，而遮罩层通过获取鼠标的clientX，clientY来确定自己的位置，遮罩层位置获取代码：
content.onmousemove = function (e) {
var evt = window.event||e;
larger.style.display = "block";
shadow.style.display = "block";
var clientX = evt.clientX;
var clientY = evt.clientY;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var X = clientX+scrollLeft-chooseMarginL-shadowW/2;
var Y = clientY+scrollTop-chooseMarginT-shadowH/2;
if(X<=0){
X = 0;
}
if(X>=maxX){
X = maxX;
}
if(Y<=0){
Y = 0;
}
if(Y>=maxY){
Y = maxY;
}
// 防止遮罩层粘滞，跟随鼠标一起滑出大图位置
var bigX = X*bigW/contentW;
var bigY = Y*bigH/contentH;
// bigX / bigW = X / contentW,主图和遮罩层之间存在两倍关系，放大图和原图之间也有两倍关系
shadow.style.left = X+"px";
shadow.style.top = Y+"px";
big.style.left = -bigX+"px";
big.style.top = -bigY+"px";
}
在这里，计算较多，尤其要注意遮罩层阴影，主图以及放大图之间的倍数关系。
到这里，基本功能就实现了，这里面涉及的计算可以适当配图理解，尤其注意点击位置的获取。
以上所述是小编给大家介绍的js实现图片局部放大效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
js图片放大镜效果实现方法详解
由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记... 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -.-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /* 图片标签 */ .mainImg{
-
JS实现图片局部放大或缩小的方法
本文实例讲述了JS实现图片局部放大或缩小的方法.分享给大家供大家参考,具体如下: <!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"> <he
-
js图片放大镜实例讲解(必看篇)
1.图片放大镜的思路: 当打开页面时只有图片 首先,说一下基本效果和调理,图片放大镜,也就是当你鼠标移入当前的商品图片时,会出现一个小灰色的观察移动框,有点会出现一个对应部位的放大的图片. 然后当鼠标移动时,右边的放大镜会出现对应部位的放大图片 最后当鼠标移开后,小的观察框和放大的图片都会消失. 2.有了基本思路就看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti
-
JS实现图片放大缩小的方法
本文实例讲述了JS实现图片放大缩小的方法.分享给大家供大家参考,具体如下: 最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来.我有2个种方法实现:第一种方法可以兼容IE和火狐(其他的浏览器我没有测试):第二种方法只能兼容IE. 第一种方法很简单,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inhe
-
原生js实现图片放大缩小计时器效果
知识要点 var fn=setInterval(function(){},1000) 每隔1秒执行一次函数 clearInterval(fn) 清除计时器 判断当图片放大缩小到固定大小时,清除计时器 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l
-
JS与CSS3实现图片响应鼠标移动放大效果示例
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果.分享给大家供大家参考,具体如下: 今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用js和css3 效果如图: 这样的实现非常简单,就是利用js的mouseover和 mouseout事件,但是不知道如何使图片从中间放大,日后再行尝试吧,代码如下: <!DOCTYPE html> <html> <head> <title>网易图片动画</
-
js实现图片局部放大效果详解
图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边分成一张大图,和一个导航栏,在右边则是一个放大镜放大后的图片.因此,我在画页面的时候,大体的HTMl结构如下: <body> <div class="choose"> <div class="content"> <img src
-
JS实现图片放大镜插件详解
前 言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的-- 先看一下我们要是实现的最终效果是怎么样的 看完效果,大家有思路了吗,没有的话,我们一起来看一下是如何实现的~ 1实现思路 ① 要实现指上后放大的效果,需要做三个div,一个用来放原图,另一个用来放放大效果的div,最后一个是鼠标指上后需要放大部分的div(这个div我们用p标签来代替). ② 确定放大比例,最重要的一点,鼠标指上的div与放大效
-
JavaScript实现六种网页图片轮播效果详解
目录 1.当鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.动态生成小圆圈 3.点击小圆圈,小圆圈变色 4.点击小圆圈滚动图片 5.点击右侧按钮一次,就让图片滚动一张. 6.点击右侧按钮, 小圆圈跟随变化 7.左侧按钮功能制作 8.自动播放功能 在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片. 功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往左播放
-
利用JS将图标字体渲染为图片的方法详解
目录 前言 实现方式 html css js 效果 前言 在软件开发中肯定要用到图标,比如下图的 Groove 音乐中就用到了许多图标.一种获取这些图标的方法是把 Groove 音乐截个图,然后熟练地开启 Photoshop,开始抠图.这种方式很逊,效率也很低(虽然我刚开始就是这么干的). 如果打开 C:/Program File/WindowsApps(需要修改权限才能进入),可以发现几个名字里带 ZuneMusic 的文件夹,其中的某一个文件夹中会有字体文件 SegMVR2.ttf.这是一个
-
JS实现canvas仿ps橡皮擦刮卡效果详解
目录 效果演示: 主要JS代码实现 <div class="box" id="bb"> <canvas id="cas" width="1366" height="651"></canvas> </div> <script type="text/javascript" charset="utf-8"> var
-
js实现图片推拉门效果代码实例
初学者. 推拉门是网页中常见的一种形式,通过JS实现比较简单.主要是通过getElement找到节点元素,然后对其进行相应的赋值即可. 新建一个index.html文件,并在同一个目录中添加三个文件夹,images(用来当作"门"的图片),styles(用来存放css文件),scripts(用来存放js文件).然后在index.html中添加代码: <!doctype html> <html> <head> <meta charset=&quo
-
基于JavaScript实现游戏购物车效果详解
目录 项目展示 登陆界面 注册界面 主界面 项目展示 登陆界面 登陆界面html和js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
-
vue.js+boostrap项目实践(案例详解)
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3
-
Android 自定义imageview实现图片缩放实例详解
Android 自定义imageview实现图片缩放实例详解 觉得这个自定义的imageview很好用 性能不错 所以拿出来分享给大家 因为不会做gif图 所以项目效果 就不好贴出来了 把代码贴出来 1.项目结构图 2.Compat.class package com.suo.image; import android.os.Build.VERSION; import android.os.Build.VERSION_CODES; import android.view.View; pu
-
Android中图片压缩方案详解及源码下载
Android中图片压缩方案详解及源码下载 图片的展示可以说在我们任何一个应用中都避免不了,可是大量的图片就会出现很多的问题,比如加载大图片或者多图时的OOM问题,可以移步到Android高效加载大图及多图避免程序OOM.还有一个问题就是图片的上传下载问题,往往我们都喜欢图片既清楚又占的内存小,也就是尽可能少的耗费我们的流量,这就是我今天所要讲述的问题:图片的压缩方案的详解. 1.质量压缩法 设置bitmap options属性,降低图片的质量,像素不会减少 第一个参数为需要压缩的bitmap图