js实现图片放大展示效果


Posted in Javascript onAugust 30, 2017

图片放大展示效果的实现代码,可动态生成图片,每次点击看原图的时候为当前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实现图片放大展示效果

最后一张效果图

js实现图片放大展示效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
javascript event 事件解析
Jan 31 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
js里面的变量范围分享
Jul 18 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 #Javascript
JavaScript实现滑动导航栏效果
Aug 30 #Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 #Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 #Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 #Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 #Javascript
详解使用nvm管理多版本node的方法
Aug 30 #Javascript
You might like
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
python encode和decode的妙用
2009/09/02 Python
使用python实现baidu hi自动登录的代码
2013/02/10 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python实现顺时针打印矩阵
2019/03/02 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python读写csv文件方法详细总结
2019/07/05 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
毕业生幼师求职自荐信
2013/10/01 职场文书
某某同志考察材料
2014/05/28 职场文书
党在我心中演讲稿
2014/09/02 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
golang正则之命名分组方式
2021/04/25 Golang
JavaScript canvas实现流星特效
2021/05/20 Javascript
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers