js 模拟QQ聊天窗口图片播放效果(带滚轮缩放)

页面效果如下:

完整代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
      
    </head>
    <body>
        <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/3c6d55fbb2fb4316352d920a22a4462309f7d394.jpg" class="pop_img" width="100"/>
        <img src="https://www.baidu.com/img/bd_logo1.png" class="pop_img" width="100"/>
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1467616821&di=75b53e3cd8ea11fc5175c58b3b80c79f&src=http://imga1.pic21.com/bizhi/130925/01465/s01.jpg" class="pop_img" width="100"/>
        
        <img src="http://cdn.duitang.com/uploads/item/201408/09/20140809142509_hj8Tf.thumb.700_0.png" class="pop_img" width="100"/>
        <img src="http://www.ce.cn/cysc/mobile/paper/200807/01/W020080701559328475897.jpg" class="pop_img" width="100"/>
        
        
        <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    </body>
</html>
<script type="text/javascript">
            var utils = {
                /*
                    图片弹窗默认宽度600 高度400
                */
                createImg:function(src){
                    var browW = $(window).width()-100;//浏览器宽度
                    var browH = $(window).height();//浏览器高度
                    var styleW = 600;//蒙版宽度
                    var styleH = 400;//蒙版高度
                    var imgW = 0;//图片显示宽度
                    var imgH = 0;//图片显示高度
                    var left = 0;//图片距离左侧距离
                    var top = 0;//图片距离顶部距离
                    var baseScale = 2;//单次滚轮方法倍率百分比单位
                    var _left = ($(window).width() - 600)/2;//蒙版距离左侧距离
                    var _top =  ($(window).height() - 400)/2;//蒙版距离顶部距离
                    var imgtemp = new Image();//创建一个image对象
                    imgtemp.onload = function(){//图片加载完成后执行
                       var _stemp = this;//将当前指针复制给新的变量,不然会导致变量共用
                       var realWidth = this.width;//图片真实宽度
                       var realHeight = this.height;////图片真实高度
                       if(realWidth >= realHeight){//宽屏图片
                               if(realWidth<=600){//宽度小于600的图
                                   if(realHeight <= 400){
                                       imgW = realWidth;
                                       imgH = realHeight;
                                       left = (600-realWidth)/2;
                                       top = (400-realHeight)/2;
                                   }else{
                                       imgH = 400;
                                       imgW = (400/realHeight)*realWidth;
                                       left = (600 - imgW)/2;
                                   }
                               }else{//宽度大于600的图
                                   styleW = browW;
                                   styleH = browH;
                                   _left = 50;
                                   _top = 0;
                                   if(realWidth<=browW){//宽度小于浏览器的宽度
                                       if(realHeight <= browH){
                                           imgW = realWidth;
                                           imgH = realHeight;
                                           left = (browW-realWidth)/2;
                                           top = (browH-realHeight)/2;
                                       }else{
                                           imgH = browH;
                                           imgW = (browH/realHeight)*realWidth;
                                           left = (browW - imgW)/2;
                                       }
                                   }else{//宽屏图片
                                       if(realHeight <= browH){
                                           imgW = browW;
                                           imgH = realHeight*(imgW/realWidth);
                                           top = (browH - imgH)/2;
                                       }else{
                                           if((browW/realWidth)*realHeight >= browH){
                                               imgH = browH;
                                               imgW = (imgH/realHeight)*realWidth;
                                               left = (browW - imgW)/2;
                                           }else{
                                               imgW = browW;
                                               imgH = (imgW/realWidth)*realHeight;
                                               top = (browH - imgH)/2;
                                           }
                                       }
                                   }
                               }
                       }else{//竖屏图片
                               if(realHeight <= 400){
                                   imgW = realWidth;
                                   imgH = realHeight;
                                   left = (600-realWidth)/2;
                                   top = (400-realHeight)/2;
                               }else{//高度大于400的图
                                   styleW = browW;
                                   styleH = browH;
                                   _left = 50;
                                   _top = 0;
                                   if(realHeight <= browH){
                                       imgW = realWidth;
                                       imgH = realHeight;
                                       left = (browW-realWidth)/2;
                                       top = (browH-realHeight)/2;
                                   }else{//高度大于浏览器高度
                                       imgH = browH;
                                       imgW = (imgH/realHeight)*realWidth;
                                       left = (browW - imgW)/2;
                                   }
                               }
                       }
                       //这里创建弹窗
                       var html = [];
                       html.push('<style type="text/css">');
                       html.push('#dynamic-close{text-decoration:none;}');
                       html.push('#dynamic-close:hover{text-decoration:none;background:#f00!important;}');
                       html.push('</style>');
                       html.push('<div id="dynamicImage" style="width:'+styleW+'px;height:'+styleH+'px;background:rgba(0,0,0,.3);position:fixed;top:'+_top+'px;left:'+ _left+'px;z-index:11111;box-shadow: 0px 0px 10px #000;border-radius:5px;overflow:hidden;">');
                       html.push('    <img src="'+ src +'" style="width:'+ imgW +'px;height:'+ imgH +'px;position:absolute;top:'+ top +'px;left:'+ left +'px;" />');
                       html.push('    <a href="javascript:;" id="dynamic-close" style="width:60px;height:60px;text-align:center;background:#000;font-size:40px;color:#fff;line-height:60px;position:absolute;top:5px;right:5px;border-radius:30px;" title="关闭">&#10005;</a>');
                       html.push('    <span id="loading_tip" style="background:rgba(0,0,0,.7);border-radius:5px;width:100px;height:30px;font-size:14px;color:#fff;line-height:30px;text-align:center;position:absolute;top:50%;left:50%;margin-top:-15px;margin-left:-50px;z-index:1111;display:none;">100%</span>');
                       html.push('</div>');
                       $('body').append(html.join(''));
                       $('#dynamic-close').on('click',function(){
                               $(this).parent().remove();
                       });
                       var percentDefault = 100;
                       var timer = null;
                       function countImg(direction){
                               clearTimeout(timer);
                               var baseW = Math.floor(parseFloat(imgW/50));
                               var baseH = Math.floor(parseFloat(imgH/50));
                               var img = $('#dynamicImage img');
                               var width = parseFloat(img.css('width'));
                               var height = parseFloat(img.css('height'));
                               var top = parseFloat(img.css('top'));
                               var left = parseFloat(img.css('left'));
                               var loadingTip = $('#loading_tip');
                               loadingTip.fadeIn(200);
                               if(direction == 1){
                                   img.css({
                                       width:(width+baseW)+'px',
                                       height:(height+baseH)+'px',
                                       top:(top-baseH/2)+'px',
                                       left:(left-baseW/2)+'px'
                                   })
                                   percentDefault = percentDefault+2;
                                   loadingTip.text(percentDefault+'%');
                               }else{
                                   if(percentDefault == 6){
                                       return;
                                   }
                                   img.css({
                                       width:(width-baseW)+'px',
                                       height:(height-baseH)+'px',
                                       top:(top+baseH/2)+'px',
                                       left:(left+baseW/2)+'px'
                                   })
                                   percentDefault = percentDefault-2;
                                   loadingTip.text(percentDefault+'%');
                               }
                               timer = setTimeout(function(){
                                   loadingTip.fadeOut(200);
                               },1000);
                       }
                       function scrollFunc(e){
                               if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件             
                                if (e.wheelDelta > 0) { //当滑轮向上滚动时
                                   countImg(-1);
                                }
                                if (e.wheelDelta < 0) { //当滑轮向下滚动时
                                    countImg(1);
                                }
                            } else if (e.detail) {  //Firefox滑轮事件
                                if (e.detail> 0) { //当滑轮向上滚动时
                                    countImg(-1);
                                }
                                if (e.detail< 0) { //当滑轮向下滚动时
                                   countImg(1);
                                }
                            }
                               
                       }
                       /*注册滚轮事件*/
                        if(document.addEventListener){//火狐
                            document.addEventListener('DOMMouseScroll',scrollFunc,false);
                        }
                        //W3C
                        window.onmousewheel=document.onmousewheel = scrollFunc;
                    }
                    imgtemp.src = src;//指定url
                }
            }
        </script>
<script>
     $('body').dblclick(function(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if(target.nodeName == 'IMG' && $(target).hasClass('pop_img')){
            if($('#dynamicImage').length>0){
                $('#dynamicImage').remove();
            }
            var _this = $(target);
            utils.createImg(_this.attr('src'));
            $('#dynamicImage').draggable();
        }
    });
</script>

代码可以直接运行

 

posted @ 2016-07-12 12:43  史洲宇  阅读(630)  评论(0编辑  收藏  举报