词条信息

admin
admin
超级管理员
词条创建者 发短消息   

相关词条

热门词条

更多>>
新手怎么优化自己的网站?
现在很多朋友都有自己的个人网站,也知道SEO优化是可以让自己网[详细]
如何更换服务器而不影响网站排名
     无论是个人站长还是网络[详细]
马云的达摩院到底要研究啥?
  今天,阿里做了一件成立 18 年来都没做的事:成立了研究室[详细]
什么是软文,软文的作用,常见的形式?
  最近很多人在问关于软文怎么写,怎样才会达到好的效果。想问大[详细]
鹿晗和关晓彤公布恋情,崩了微博
昨天中午,鹿晗公布了自己的恋情,女友是关晓彤。瞬间,鹿晗的“女[详细]
解决网 >>所属分类 >> 程序开发    JavaScript   

js实现图片放大展示

标签: js

顶[0] 发表评论(0) 编辑词条
图片放大展示效果的实现代码,可动态生成图片,每次点击看原图的时候为当前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>



 

 

本文地址:解决网 http://www.solves.com.cn/doc-view-3895.html

TAGS:SOLVES , 电脑技术 , 电脑知识 , 网站建设, 电脑技术, 网络营销 , 网站托管 , 硬件技术 , 网络技术 , 软件技术, 维修网点

附件列表


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇HTML中的5种空格
下一篇JS截取字符串常用方法

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的电脑技术问题词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>