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
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
随机推荐
- 谈到一些传统的企业网站SEO问题领域
在网络营销中的时间越长,有时候,企业网站还是有一些传统做法不解.也许,这是它的思想的局限.比如,我最近来到了一个新的工作环境中发现,虽然公司是专业从事传统渠道已经很不错了,但对于网络营销渠道还有改进的 ...
- hibernate Java 时间和日期类型 Hibernate 制图
基础知识: 于 Java 于, 型表示的时间和日期包含: java.util.Date 和 java.util.Calendar. 外, 在 JDBC API 中还提供了 3 个扩展了 java.ut ...
- atitit.为什么技术的选择方法java超过.net有前途
atitit.为什么技术的选择方法java超过.net有前途 #----有没有法律依据不同的铜需求... 通常有开发效率,需要在稳定性.. 笔者 老哇爪 Attilax 艾龙, EMAIL:1466 ...
- 《CS：APP》 chapter 8 Exceptional Control Flow 注意事项
Exceptional Control Flow The program counter assumes a sequence of values ...
- Session or Cookie？是否有必要使用Tomcat等一下Web集装箱Session
Cookie是HTTP协议标准下的存储用户信息的工具.浏览器把用户信息存放到本地的文本文件里. Session是基于Cookie实现的. 2011年4月,武汉群硕面试的时候(实习生).面试官也问过这个 ...
- 让UIAlertController兼容的同时iphone和ipad
让UIAlertController兼容的同时iphone和ipad by 吴雪莹 var alert = UIAlertController(title: nil, message: message ...
- Linux在iptables教程基本应用防火墙
iptables它是Linux防火墙软件经常使用,下面说一下iptables设备.删除iptables规则.iptables只要打开指定的port.iptables屏蔽指定ip.ip科和解锁.删除添加 ...
- 沃森Mysql数据库修复工具
华信Mysql数据库修复程序是由北京华信数据恢复中心独立研发.主要针对Mysql数据库损坏的恢复. 本程序可用于因为各种误操作而导致数据丢失的恢复,以及因为断电.陈列损坏.硬盘坏道等各种原因导致数据库 ...
- php_中替换换行符
//php 有三种方法来解决 //1.使用str_replace 来替换换行 $str = str_replace(array("\r\n", "\r", &q ...
- java_linux_shell_定时kill 启动java程序
#!/bin/bash #while truedo Process_ID=`ps -ef |grep 'LoginSinaWeiboCookie.jar' |grep -v grep |awk '{p ...