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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 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简单判断手机设备的方法
2016/08/23 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
python重试装饰器的简单实现方法
2019/01/31 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
基于Django实现日志记录报错信息
2019/12/17 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
详解Python 最短匹配模式
2020/07/29 Python
毕业生的求职信范文分享
2013/12/04 职场文书
消防安全检查制度
2014/02/04 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
五一促销活动总结
2014/07/01 职场文书
团队拓展活动总结
2014/08/27 职场文书
创先争优个人承诺书
2014/08/30 职场文书
购房委托书范本
2014/09/18 职场文书
支教个人总结
2015/03/04 职场文书
公司管理建议书
2015/09/14 职场文书