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
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
随机推荐
- js调用跨域
web aapi 初体验 解决js调用跨域问题 跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user http:IP:8002/api/user 不同IP不同 ...
- Linux查看网卡流量（转）
sar 这个工具RHEL5自带有,默认也安装. 一个强大的工具(好像这些工具都蛮强的),参数很多,有时间man一下. -n参数很有用,他有6个不同的开关:DEV | EDEV | NFS | NFSD ...
- sql语句like的使用方法
在SQL结构化查询语言中,LIKE语句有着至关关键的数据. LIKE语句的语法格式是:select * from 表名 where 字段名 like 相应值(子串),它主要是针对字符型字段的,它的作用 ...
- android app启动过程（转）
Native进程的运行过程 一般程序的启动步骤,可以用下图描述.程序由内核加载分析,使用linker链接需要的共享库,然后从c运行库的入口开始执行. 通常,native进程是由shell或者init启 ...
- 深入理解Android View(转)
做android其实也有一段时间了,我们每个人都会碰到一些这样或那样的问题,碰到问题了就拼命百度,可是发现,我们解决问题的能力并没有提升很多,所以我才有想总结一下我项目中所用过的相关知识,并了解一下A ...
- Unity3D游戏开发最佳实践20技能（两）
[扩展和MonoBehaviourBase] 21.扩展一个自己的Mono Behaviour基类.然后自己的全部组件都从它派生 这能够使你方便的实现一些通用函数.比如类型安全的Invoke.或者是一 ...
- java自动转型
/*2015-10-30*/ public class TypeAutoConvert { public static void main(String[] args) { int a = 5; Sy ...
- C++ Primer 学习笔记_29_STL实践与分析（3） --操作步骤集装箱(下一个)
STL实践与分析 --顺序容器的操作(下) 六.訪问元素 假设容器非空,那么容器类型的front和back成员将返回容器的第一个和最后一个元素的引用. [与begin和end的对照:] 1)begin ...
- Apriori算法Python实现
Apriori如果数据挖掘算法的头发模式挖掘鼻祖,从60年代开始流行,该算法非常简单朴素的思维.首先挖掘长度1频繁模式,然后k=2 这些频繁模式的长度合并k频繁模式.计算它们的频繁的数目,并确保其充分 ...
- Web采矿技术
一.数据挖掘 数据挖掘是运用计算机及信息技术,从大量的.不全然的数据集中获取隐含在当中的实用知识的高级过程.Web 数据挖掘是从数据挖掘发展而来,是数据挖掘技术在Web 技术中的应用.Web 数据 ...