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>
代码可以直接运行
js 模拟QQ聊天窗口图片播放效果（带滚轮缩放）的更多相关文章
- Android 利用TimerTask实现ImageView图片播放效果
在项目开发中,往往 要用到图片播放的效果.今天就用TimerTask和ImageView是实现简单的图片播放效果. 当中,TimerTask和Timer结合一起使用.主要是利用TimerTask的迭代 ...
- node.js模拟qq漂流瓶
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) node.js模拟简易漂流瓶,页面有扔瓶子和捡瓶子的功能,一个瓶子只能被捡到一次,阅读完就置状态位, ...
- js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- js应用之实现图片切换效果
数组的操作与应用 数组的定义 var 数组名=new Array(); //创建空数组 var 数组名=new Array(size);//创建指定数组长度的数组 var 数组名=new Array( ...
- JS实现简单的图片切换效果
使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...
- js模拟24小时的倒计时效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 图片拖拽和滚轮缩放
这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动@mousewheel.prevent 阻止默认行为 <div ref="imgWrap& ...
- JS模拟下拉框select
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
随机推荐
- CSS不常见问题汇总
写css有一段时间了,其间也遇到一些问题,跟大家分享一下 IE10+滚动条自动以藏问题,导致滚动部分页面看起来不正常 html, body {-ms-overflow-style: scrollbar ...
- SQL Server审计功能入门：更改跟踪(Change Tracking)
原文:SQL Server审计功能入门:更改跟踪(Change Tracking) 介绍 更改跟踪是一种轻量型解决方案,它为应用程序提供了一种有效的更改跟踪机制.常规的,自定义变更跟踪和读取跟踪数据, ...
- 设计管理员表；webservice用于网络安全的高端内提供服务的
admin表设计.你应该有角色表,管理员属于一个样的作用,另一个接口选项,以查看表.角色有更多的选择的能力. 角色和选项代表了许多关系,因此,我们必须保持这种关系有一个表 版权声明:本文博客原创文章, ...
- 【POJ3268】Silver Cow Party 最短
意甲冠军:一群奶牛去的地方.去回,然后回去寻找最伟大值. 题解:两遍最短路,结束.邻接矩阵存边能够避免建反图. #include <cstdio> #include <cstring ...
- jquery的智能提示控件
福利到~分享一个基于jquery的智能提示控件intellSeach.js 一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...
- Oracle常见操作汇总（转）
前言:Oracle学习也有十几天了,但是呢,接下来还要学习许多其他的东西,并不能提步不前,所以在此总结了以下Oracle中常用的命令和语句,没有语法都是实例,以便以后工作的时候随时翻看,毕竟是自己的东 ...
- android 性能測试iozone篇
一:简单介绍 iozone是一个文件系统的benchmark工具, 用于測试不同的操作系统中文件系统的读写性能, 能够測试下面13种模式 0=write/rewrite 1=read/re-read ...
- 控制执行流程——（Java学习笔记三）
if-else 控制程序流程最基本的形式 格式: if(boolean - expresion){ statement } 或 if(boolean - expresion){ stateme ...
- HttpClient模拟客户端请求实例
HttpClient Get请求: /// <summary> /// Get请求模拟 /// </summary> /// < ...
- Scriptcase演示程序，现在，他们使用SC多么简单的开发系统
Scriptcase它内置了一批成熟的业务系统,我们的系统的一部分已经完成和功能微调,在互联网上.检查每个人Scriptcase如何简单可以加速的功能模块的发展. 访问 http://www.phps ...