js实现图片放大展示效果
图片放大展示效果的实现代码，可动态生成图片，每次点击看原图的时候为当前id里面的图片
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="node_modules/jquery/jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#picOne img{
width: 200px;
height: 200px;
}
.mask-img {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: rgba(0,0,0,.2);
}
.picture{
display: none;
position: fixed;
top: 50%; left:50%;
transform: translate(-50%,-50%);
width: 960px;
height: 700px;
line-height: 700px;
text-align:center;
background: #666;
z-index: 20;
}
.picture .phone{
vertical-align: middle;
max-width: 868px;
max-height: 670px;
}
.picture .left{
position: absolute;
left: 10px;
top: 320px;
width: 25px;
height: 40px;
line-height: 40px;
}
.picture .right{
position: absolute;
right: 10px;
top: 320px;
width: 25px;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div class="seaImg"> <!-- seaImg可动态生成多个 -->
<div id="picOne">
<img src="img/img2.jpg">
<img src="img/img3.jpg">
<img src="img/img1.jpg">
</div>
</div>
<!-- 遮罩层 -->
<div class="mask-img"></div>
<div class="picture">
<img class="phone" src="" alt="" />
<div class="left"><img src="img/left.png" alt="" /></div>
<div class="right"><img src="img/right.png" alt="" /></div>
</div>
</body>
<script>
function seaImg(){
$(".mask-img").on("click",function(e){
$(".mask-img").css("display","none");
$(".picture").css("display","none");
})
var imgs = $('.seaImg img')
var images;
imgs.on('click',function(e){
var father = (e.currentTarget).parentNode; //当前点击图片的父元素
var att = father.attributes.id.nodeValue; //父元素自己的属性id
var image = '#' + att + ' img'
images = $(image) //jquer获取id下的所有img
$(".mask-img").css("display","block");
$(".picture").css("display","block");
$(".phone").attr("src",e.currentTarget.src);
if(e.currentTarget == images[0]){
$(".left").css("display","none");
}else{
$(".left").css("display","block");
}
if(e.currentTarget == images[images.length-1]){
$(".right").css("display","none");
}else{
$(".right").css("display","block");
}
})
//左点击事件，当图片为第一张的时候左边的箭头点击图片隐藏
$(".left").on("click",function(){
var imgSrc = $(".phone").attr("src");
$(".right").css("display","block");
for(var i = 0 ; i<images.length; i++){
if(imgSrc == images[i].src){
if(imgSrc == images[1].src){
$(".left").css("display","none");
}
var j = i;
$(".phone").attr("src",images[j-1].src);
}
}
})
//右点击事件， 当图片为最后一张的时候右边箭头点击图片隐藏
$(".right").on("click",function(){
var imgSrc = $(".phone").attr("src");
$(".left").css("display","block");
for(var i = 0 ; i<images.length; i++){
if(imgSrc == images[i].src){
if(imgSrc == imgs[images.length-2].src){
$(".right").css("display","none");
}
var j = i;
$(".phone").attr("src",images[j+1].src);
}
}
})
}
seaImg()
</script>
</html>
< 向左点击事件
> 向右点击事件
第一张效果图
中间图片效果图
最后一张效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS图片放大效果简单实现代码
本文实例为大家分享了JS实现图片放大效果 ,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> #div1 { width:300px; height:300px; position:relative; margin:30p
-
js自制图片放大镜功能
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 注释: small img size:600x400 big img size:1200x800 原理: 1.大图是小图的 2倍整 2.大图以小图片中心点为中心 a.transform : translate(-50%,-50%) b.(rate-0.5)*50% c.clip : rect(t,r,b,l) 以小图边界为边界 3.rect必须有absolute 4.获取鼠标
-
angularjs点击图片放大实现上传图片预览
本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下 承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span
-
利用javascript实现的三种图片放大镜效果实例（附源码）
本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端:大家可以直接下载源码进行学习参考,下面来一起学习学习吧. 实现效果如下 效果一 效果二 效果三 调用代码如下 //前面是ID或者Class,后面有init里面参数分别有1,2,3代表三种不同的效果: zoom('#item').init(); //这里写0,或者不写都可以,默认0 zoom('#item').init(1); //效果2 zoom('#item').init(2); //效果3 //另外还有一个参数,就是选择器后面写
-
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代码实现图片放大境效果
今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果. 第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片.这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果. <!DOCTYPE
-
js图片放大镜效果实现方法详解
由项目需要,原生写了个详情页图片放大镜的效果,扔上代码供学习分享,也作为日常笔记... 效果如图(例子中偷偷链了张天猫的图片,希望没啥事 -.-): 实现过程教简单,但我们还是从css开始分析,过程如下(图片已正方形为例): css: /* 图片容器 */ .imgBox{ width: 200px; /* 各位大老爷们看着办 */ height: 200px; /* 各位大老爷们看着办 */ position: relative; /* 必需 */ } /* 图片标签 */ .mainImg{
-
原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大镜效果. 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: <html> <head> <meta charset="UTF-8"> <title>Document</title> <style t
-
js实现图片旋转 js滚动鼠标中间对图片放大缩小
从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. 这个图片放大,缩小和旋转,我采用canvas画布这个来做的,核心点就在js中去控制鼠标状态及事件. 我先给大家展示一下效果图. 鼠标移到画布范围内就会出现下方的操作栏,每次以90度选择. 1.在引入js的时候一定要注意了,由于在使用画布canvas时,需要等图片加载完成后才可以执行画布里的内容.j