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
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
随机推荐
- synchronized和进程间通信（转）
关于JAVA多线程同步 JAVA多线程同步主要依赖于若干方法和关键字 1 wait方法: 该方法属于Object的方法,wait方法的作用是使得当前调用wait方法所在部分(代码块)的线程停止执行, ...
- Linux Kernel系列 - 黄牛X内核代码凝视
Hanks.Wang - 专注于操作系统与移动安全研究.Linux-Kernel/SELinux/SEAndroid/TrustZone/Encription/MDM Mail - byhank ...
- net 试图加载格式不正确的程序。(Exception from HRESULT: 0x8007000B)
原文:net 试图加载格式不正确的程序.(Exception from HRESULT: 0x8007000B) Server Error in '/' Application. 试图加载格式不正确的 ...
- 【核心研究】消息队列_MessageQueue
消息队列排队过程中的消息.这第一条消息将首先被处理.但假设消息本身指定要处理的时间.我们必须等待,直到时间的消息处理能力.新闻MessageQueue正在使用Message类的表示,队列中的邮件保存结 ...
- [LeetCode] 036. Valid Sudoku (Easy) (C++)
指数:[LeetCode] Leetcode 解决问题的指数 (C++/Java/Python/Sql) Github: https://github.com/illuz/leetcode 036. ...
- thinkphp学习笔记5—模块化设计
原文:thinkphp学习笔记5-模块化设计 1.模块结构 完整的ThinkPHP用用围绕模块/控制器/操作设计,并支持多个入口文件盒多级控制.ThinkPHP默认PATHINFO模式,如下: htt ...
- UNIX环保进程
学习的过程之前,先来了解下过程中的操作环境. main功能 过程总是开始main功能开始执行,我们编程,程序从main功能进行,它是原型例如,下面的: int main(int argc, char ...
- MySql创建一个存储过程
MySQL 存储过程是从 MySQL 5.0 新功能.存储过程的长处有一箩筐.只是最基本的还是运行效率和SQL 代码封装. 特别是 SQL 代码封装功能,假设没有存储过程,在外部程序訪问数据库时(比如 ...
- .Net 4.5中的HttpClient试用
.Net 4.5中增加了一个新的System.Net.Http.HttpClient名字空间(在 System.Net.Http.dll 中),用于发送 HTTP 请求和接收 HTTP 响应. 基本操 ...
- 终于会用c#中的delegate（委托）和event（事件）了
一.开篇忏悔 对自己最拿手的编程语言C#,我想对你说声对不起,因为我到现在为止才明白c#中的delegate和event是怎么用的,惭愧那.好了,那今天就趁月黑风高的夜晚简单来谈谈delegate和e ...