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="关闭">✕</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>

代码可以直接运行

时间: 2024-10-10 22:47:09

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

Java实现模拟QQ空间图片上传

Java实现模拟QQ空间图片上传 首先看效果: 首先编写我们的上传jsp代码,如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://

Android 利用TimerTask实现ImageView图片播放效果

在项目开发中,往往 要用到图片播放的效果,今天就用TimerTask和ImageView是实现简单的图片播放效果. 其中,TimerTask和Timer结合一起使用,主要是利用TimerTask的迭代延时等时间段处理事件的机制. 具体实例如下: 1.layout xml代码 <span style="font-family:Microsoft YaHei;font-size:18px;"><LinearLayout xmlns:android="http:/

网页模拟QQ面板的拖动效果

博主的前端入门知识是在慕课网学的,当时有个demo,就是在网页模拟一个QQ面板的拖动效果(如图,用两个DIV代替...效果是拖动中间的DIV,整个DIV跟着移动),今天来总结记录一下. 思路是当鼠标按下时,开始计算元素距离屏幕左边缘和上边缘的距离,并同步赋予元素.这里的关键点是对于JS中元素与根元素(或者指定父级元素)的距离的运用,即offset. 首先假设外层盒子叫d1,中间盒子叫center.当鼠标在center按下时为d1添加事件: // JavaScript Document funct

html+css+js(+JQuery)制作扑克牌图片切换效果

要实现的效果图: 先把静态页面写出来: index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery制作扑克牌图片切换效果<

js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > .katex-html { display: block; } .katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; } .katex { font-style: normal; font

JS实例之图片轮播,实现图片播放效果

1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 *{margin:0px auto;padding:0px;} 6 #wai{width:500px;height:200px

js模拟微信聊天窗口

总结: 1.overflow: auto;可以使滚动条在内容溢出时才出现 2.使滚动条一直保持在底端cont.scrollTop = cont.scrollHeight; HTML <div class="box"> <div class="top">哈哈哈</div> <div class="cont" id="cont"></div> <div class=

JS实现简单的图片轮换效果

<!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta name="Generator" content="EditPlus">   <meta name="Author" content="">   <meta nam

360浏览器搜索框下拉选择图片js模拟select效果

最近360浏览器网址导航的主页增加了一个下拉选择图片搜索的功能,也就是用js模拟出了select的效果,今天在单位闲了无事干,就把空上功能给摸索出来了,虽然做的不是太完善,但对要求不高的用户来说,已经可以了,而且也可以为学习Js的朋友提供参考. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>