查看大图

原创 2018年04月17日 09:14:56
<div class="allSeeBigImg"><img src="" alt=""></div>
var isSeeBigImg = true, clientWidth = $(window).width(), clientHenght = $(window).height(), CHCWrotia = clientHenght / clientWidth
        $('.new_anser_imgs').on('click','img',function(){
            var src = $(this).prop('src')
            $('.allSeeBigImg img').prop('src',src)
            var imgWidth = $(this).width()
            var imgHeight = $(this).height()
            var IHIWrotia = imgHeight / imgWidth
            if(IHIWrotia < CHCWrotia){
                $('.allSeeBigImg img').css({
                    'width':'100%',
                    'height':'auto'
                })
            }else{
                $('.allSeeBigImg img').css({
                    'width':'auto',
                    'height':'100%'
                })
            }
            $('.allSeeBigImg').stop().fadeIn(200)
        })
        $('.allSeeBigImg').click(function () {
            $(this).stop().fadeOut(200)
        })
.allSeeBigImg{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background:#000;
    z-index:10000;
    display:none;
    overflow: hidden;
}
.allSeeBigImg::-webkit-scrollbar{
    display: none;
}
.allSeeBigImg img{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33242730/article/details/79969694

iOS点击查看大图的动画效果

一个点击查看大图的动画效果,从小图的位置动画弹出大图&阴影背景,点击大图或阴影则收缩回小图...
  • Cloudox_
  • Cloudox_
  • 2016-08-18 21:44:21
  • 3019

Android开发之--缩略图点击查看大图

android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景)。另一种就是直接打开一个新的activity显示大图。 1、第一...
  • Angel_jn
  • Angel_jn
  • 2017-03-16 16:17:05
  • 1076

Android 点击ImageView 查看大图

弹出dialog 即可: private void seeBigImg() { // TODO Auto-generated method stub imageView.setOnClickLi...
  • u010773773
  • u010773773
  • 2014-03-12 13:26:43
  • 3481

html点击小图查看大图

点击小图切换大图 .small_img,.big_img { cursor: pointer; } .black_overlay{ display:...
  • qq_30552993
  • qq_30552993
  • 2016-01-11 14:25:34
  • 7121

仿微信查看大图

第一次写博客,好激动啊 最近公司项目里需要实现一个仿微信图片查看大图效果,纠结了很久到底用什么去写,后来考虑还是用动画来实现。 ok,开始正题,先说说需求,在聊天记录里会有图片消息,点击图片显示大...
  • u011146263
  • u011146263
  • 2016-11-03 13:34:45
  • 630

android点击查看大图,支持左右滑动切换、缩放图片

  • 2016年02月24日 17:15
  • 376KB
  • 下载

【jQuery】点击缩略图查看大图-imgbox

问题点击缩略图,在当前页或在新标签中打开大图,这种体验不好。能不能达到这样的效果:点击缩略图,在当前页弹出一个弹框,显示大图。效果图解决方案通过使用jQuery插件imgbox来实现。学习资源(jQu...
  • ly1414725328
  • ly1414725328
  • 2015-09-10 16:53:10
  • 17204

从零封装一个Android大图查看器

背景: 大图查看器是许多app的常用功能,主要使用场景是用户点击图片,然后启动一个新界面来展示图片的完整尺寸,并能通过手势移动图片以及放大缩小。当然,上面说的是最基本的功能,实际使用中还要包括:如果是...
  • qq_28899635
  • qq_28899635
  • 2017-05-11 09:30:13
  • 2717

iOS点击查看大图,图片放大缩小

  • 2016年06月02日 14:19
  • 600KB
  • 下载

jquery 点击查看大图

  • 2015年11月17日 21:02
  • 653KB
  • 下载
收藏助手
不良信息举报
您举报文章:查看大图
举报原因:
原因补充:

(最多只允许输入30个字)