井井客

搜索

JQ简易版图片预览功能(仅支持到IE9)

因为后台管理系统缺一个图片预览可以放大缩小以及旋转的功能,百度了一些相关插件,最后还是决定自己写了一个简单的,自用所以没有封装了。

JQ简易版图片预览功能(仅支持到IE9)

效果预览可以看这里:http://jingjingke.com/web/jquery/imgView.html

这个是需要CSS配合JQ一起才能使用的代码。CSS只在样式,而JQ部分的代码如下:

$(document).ready(function(){
  //判断页面中是否有.view-imgs样式
  var $viewEle = $('.view-imgs')
  //将图片src添入数组
  if($viewEle.length > 0){
    var $imgArr = [];
    for(var i= 0; i<$viewEle.length;i++){
      var obj = {}
      obj.src = $viewEle[i].src
      $imgArr[i] = obj
    }
    //搭建基本dom结构
    var $popup,$img,$imgWarp,$btns,$prev,$next,$big,$few,$close,$scale,$deg,$flag,$x1,$x2,$y1,$y2,$sx,$sy;
    //图片点击事件
    $viewEle.each(function(index){
      $(this).on('click',function(){
        var $index = Number(index)
        if($imgArr[$index]['width']===undefined){
          $imgArr[$index]['width'] = $(this)[0].naturalWidth
          $imgArr[$index]['height'] = $(this)[0].naturalHeight
        }
        $scale = 1
        $deg = 0
        $flag = false
        //组织dom
        $popup = $('<div class="popup-img-view"></div>')
        $img = $('<img />')
        $imgWarp = $('<div class="img-warp"></div>')
        $btns = $('<div class="view-btns">')
        $prev = $('<button>上一张</button>')
        $next = $('<button>下一张</button>')
        $big = $('<button>放大</button>')
        $few = $('<button>缩小</button>')
        $rotate = $('<button>顺时针旋转</button>')
        $close = $('<button>关闭</button>')
        $imgWarp.append($img)
        $btns.append($prev,$next,$big,$few,$rotate,$close)
        $popup.append($imgWarp,$btns)
        //添加dom
        $img.attr('src',$imgArr[$index].src)
        $imgWarp.css('margin-top','-'+$imgArr[$index].height/2-40+'px')
        $('body').append($popup)
        
        //关闭事件
        $close.on('click',function(){
          $popup.remove()
        })
        //放大事件
        $big.on('click',function(){
          $scale = $scale+0.2;
          $img.width($imgArr[$index].width*$scale)
          $imgWarp.css('margin-top','-'+$imgArr[$index].height*$scale/2-40+'px')
        })
        //缩小事件
        $few.on('click',function(){
          $scale = $scale-0.2<=0.4?0.4:$scale-0.2;
          $img.width($imgArr[$index].width*$scale)
          $imgWarp.css('margin-top','-'+$imgArr[$index].height*$scale/2-40+'px')
        })
        //旋转事件
        $rotate.on('click',function(){
          $deg = $deg+90==360?0:$deg+90
          $img.css('transform','rotate('+$deg+'deg)')
        })
        //上一张
        $prev.on('click',function(){
          if($index === 0){
            alert('没有上一张了!')
          }else{
            $index=$index-1;
            if($imgArr[$index]['width']===undefined){
              $imgArr[$index]['width'] = $viewEle.eq($index)[0].naturalWidth
              $imgArr[$index]['height'] = $viewEle.eq($index)[0].naturalHeight
            }
            $scale = 1
            $deg = 0
            $img.attr('src',$imgArr[$index].src)
            $img.removeAttr('style')
            $imgWarp.css('margin-top','-'+$imgArr[$index].height/2-40+'px')
          }
        })
        //下一张
        $next.on('click',function(){
          if($index === $viewEle.length-1 || $viewEle.length===1){
            alert('没有下一张了!')
          }else{
            $index=$index+1;
            if($imgArr[$index]['width']===undefined){
              $imgArr[$index]['width'] = $viewEle.eq($index)[0].naturalWidth
              $imgArr[$index]['height'] = $viewEle.eq($index)[0].naturalHeight
            }
            $scale = 1
            $deg = 0
            $img.attr('src',$imgArr[$index].src)
            $img.removeAttr('style')
            $imgWarp.css('margin-top','-'+$imgArr[$index].height/2-40+'px')
          }
        })
        //图片拖拽,按下-移动-离开
        $img.on('mousedown',function(e){
          e.preventDefault()
          $flag = true
          $sx = parseInt($img[0].style.left||0);
          $sy = parseInt($img[0].style.top||0);
          $x1 = e.screenX
          $y1 = e.screenY
        })
        $('body').on('mousemove',function(e){
          if($flag){
            $x2 = e.screenX
            $y2 = e.screenY
            $img.css({'top':$sy+$y2-$y1,'left':$sx+$x2-$x1})
          }
        })
        $(document).on('mouseup',function(e){
          if($flag){
            $x2 = e.screenX
            $y2 = e.screenY
            $sy = $sy+$y2-$y1
            $sx = $sx+$x2-$x1
            $img.css({'top':$sy,'left':$sx})
            $flag = false
          }
        })        
      })
    })
  }
})

代码肯定是有优化的空间的,但是现在有点懒懒的不想动。

里面主要的地方都是有注释的,毕竟是用JQ写的,读懂还是满容易的。

文章TAG:jq

作者:井井客原创来源:原创
本文标题:JQ简易版图片预览功能(仅支持到IE9)
本文链接:/c/06275.html

上一篇:VUE如何渲染树型结构
下一篇:vue模拟右键菜单并在光标位置插入值

文章分类

相关阅读

随便看看