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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
js实现左右轮播图
Jan 09 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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中{}大括号是什么意思
2013/12/01 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
Python最长公共子串算法实例
2015/03/07 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python代码实现KNN算法
2017/12/20 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Python中函数的返回值示例浅析
2019/08/28 Python
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
金融行业职业生涯规划范文
2014/01/17 职场文书
实习生岗位职责
2014/04/12 职场文书
协议书样本
2014/04/23 职场文书
公司董事长岗位职责
2014/06/08 职场文书
反四风对照检查材料
2014/09/22 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
基于Go Int转string几种方式性能测试
2021/04/28 Golang
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python