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>