<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>访腾讯图片缩放功能</title>
<style type="text/css">
.tab_lay_a01{-moz-opacity: 0.8; opacity:.50;filter: alpha(opacity=50); height:10px; width:10px; background:#616161;}
.tab_lay_a02{-moz-opacity: 0.8; opacity:.50;filter: alpha(opacity=50); height:10px; background:#616161;}
</style>
<script type="text/javascript">
//获取图片原始宽高
function getImg_W_H(){
var img = new Image();
img.src = this.src;
w_init = img.width;
h_init = img.height;
}
</script>
</head>
<body>
<div style="padding-top:30px;">
<img src="images/cat01.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/>
<img src="images/cat51.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/>
<img src="images/cat67.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/>
<img src="images/cat68.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/>
<img src="images/cat69.jpg" onload="getImg_W_H.call(this);" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/>
<img src="http://i2.sinaimg.cn/ast/2012/1212/U7132P54DT20121212112206.jpg" height="180" title="点击放大" onclick="getImg_W_H.call(this);PhotoSize.init();showZoomDiv.call(this);"/>
</div>
<!-- 图片缩放div 开始 -->
<div id="focusphoto_div" style="display:none; position:absolute; z-index:9999; top:10px; width:100%;text-align:center; margin:0 auto;">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="tab_lay_a01"></td>
<td class="tab_lay_a02" ></td>
<td class="tab_lay_a01"><div style="float: left; z-index:9999; margin-left:-15px; vertical-align:bottom; position:absolute; ">
<img src="images/close_layer.png" onclick="closeDiv();" style="cursor:pointer;" title="关闭" onmouseover="this.src='images/close_hover.png';" onmouseout="this.src='images/close_layer.png';"/>
</div></td>
</tr>
<tr>
<td class="tab_lay_a01"> </td>
<td>
<div id="multipleVal" style="z-index:9998; position:absolute; width:100px;height:30px;line-height:30px; border:1pt solid #BEBEBE;margin:0 auto;color:#FFF;font-weight:bold;font-size:18px;background:#000000;filter: alpha(opacity=40);;font-family:Georgia, serif;">100 %</div>
<img id="focusphoto" style="cursor:move;border:2px solid #FFF;" src="" title="滑动鼠标滚轮进行图片缩放，双击可关闭" onmousewheel="scrollFunc()" ondblclick="closeDiv();" onmousedown="drag('focusphoto_div',event)" />
</td>
<td class="tab_lay_a01"> </td>
</tr>
<tr>
<td class="tab_lay_a01"></td>
<td class="tab_lay_a02"></td>
<td class="tab_lay_a01"></td>
</tr>
</table>
</div>
<!-- 图片缩放div 结束 -->
</body>
<script type="text/javascript">
/** 以下层拖拽特效js */
function drag(elementToDrag,event){
var elementToDrag = document.getElementById(elementToDrag);
var startX=event.clientX,startY=event.clientY;
var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
var deltaX=startX-origX,deltaY=startY-origY;
if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else{
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove",moveHandler);
elementToDrag.attachEvent("onmouseup",upHandler);
elementToDrag.attachEvent("onlosecapture",upHandler);
}
if(event.stopPropagation) {event.stopPropagation();}
else{event.cancelBubble=true;}
if(event.preventDefault){ event.preventDefault();}
else {event.returnValue=false;}
function moveHandler(e){
if(!e) e=window.event;
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
if(e.stopPropagation){e.stopPropagation();}
else{ e.cancelBubble = true;}
}
function upHandler(e){
if(!e) e=window.event;
if(document.removeEventListener){
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else{
elementToDrag.detachEvent("onlosecapture",upHandler);
elementToDrag.detachEvent("onmouseup",upHandler);
elementToDrag.detachEvent("onmousemove",moveHandler);
elementToDrag.releaseCapture();
}
if(e.stopPropagation){ e.stopPropagation();}
else{ e.cancelBubble=true;}
}
}
/** 以下是图片缩放js */
var w_init =0; //图片初始宽度记录
var h_init=0;//图片初始高度记录
var t_init = 50; //缩放层初始距离顶部的top值
var l_init = 350;//缩放层初始距离左边的left值
var PhotoSize = {
zoom: 0, // 缩放率
count: 0, // 缩放次数
cpu: 0, // 当前缩放倍数值
elem: "", // 图片节点
focusphotoDiv:"",//缩放图片的外框div层
photoWidth: 0, // 图片初始宽度记录
photoHeight: 0, // 图片初始高度记录
init: function(){
this.elem = document.getElementById("focusphoto");
this.focusphotoDiv=document.getElementById("focusphoto_div");
this.focusphotoDiv.style.top = t_init +"px";
this.focusphotoDiv.style.left = l_init +"px";
this.focusphotoDiv.style.width = w_init + 3 +"px";
this.focusphotoDiv.style.height = h_init+ 3 +"px";
this.zoom = 1; // 设置基本参数
this.count = 0;
this.cpu = 1;
},
action: function(x){
this.count = this.count + x; // 添加记录
if(this.count < 0){
this.count = 0;
}
if(this.count > 40){
this.count = 40;
}
this.cpu = (this.zoom + this.count/10)*100;
if(this.cpu > 500){
this.cpu= 500;
}else if(this.cpu < 100){
this.cpu= 100;
}
var tempWidth = w_init * this.cpu/100;
var tempHeight = h_init * this.cpu/100;
var minWidth = w_init; //最大宽度
var minHeight = h_init; //最小高度
this.elem.style.width = tempWidth +"px";
this.elem.style.height = tempHeight +"px";
this.focusphotoDiv.style.width = tempWidth + 3 +"px";
this.focusphotoDiv.style.height = tempHeight + 3 +"px";
document.getElementById("multipleVal").innerText = parseInt(this.cpu)+" %";
if(x<0&&(tempWidth<minWidth)&&(tempHeight<minHeight)){
this.elem.style.width = minWidth + "px";
this.elem.style.height = minHeight +"px";
this.focusphotoDiv.style.width = minWidth + 3 +"px";
this.focusphotoDiv.style.height = minHeight + 3 +"px";
document.getElementById("multipleVal").innerText = 100+"%";
}
}
};
// 启动放大缩小效果,用onload方式加载，防止第一次点击获取不到图片的宽高
function showZoomDiv(){
document.getElementById("focusphoto").src=this.src;
document.getElementById("focusphoto").style.width = w_init +"px";
document.getElementById("focusphoto").style.height = h_init +"px";
document.getElementById("focusphoto_div").style.width = w_init+ 3 +"px";
document.getElementById("focusphoto_div").style.height = h_init + 3 +"px";
document.getElementById("focusphoto_div").style.top = t_init +"px";
document.getElementById("focusphoto_div").style.left = l_init +"px";
document.getElementById("multipleVal").innerText ="100 %";
showOrHidden('focusphoto_div','block');
}
function showOrHidden(id,displayVal){
document.getElementById(id).style.display = displayVal;
}
/**
*关闭缩放div，并清空内容
*/
function closeDiv(){
showOrHidden('focusphoto_div','none');
if(w_init
js仿QQ实现图片缩放功能
5星 · 超过95%的资源 需积分: 9 151 浏览量
2013-08-20
15:36:18
上传
评论
收藏 341KB ZIP 举报 
zoom_image.zip （8个子文件） 
zoom_image images 
cat51.jpg 57KB cat67.jpg 105KB cat01.jpg 57KB
close_hover.png 4KB cat68.jpg 45KB cat69.jpg 68KB close_layer.png 4KB
zoom_image.html 8KB
kalin520
- 粉丝: 0
- 资源: 1
最新资源
- 407000001.fasset
- J-20240402998-HTE-HTE-2947110DA-D3_整车运动控制器-电压渐变（缓升缓降）-检测报告-XS-汽车及零部件检测中心.pdf.crdownload
- Excel表格VBA-获取文件夹内所有文件路径.zip
- 文件移动.zip
- 反射源代码，源代码，源代码，源代码
- CAJViewer 9.0_x64-setup.exe
- servant C++语言框架rpc的源码实现 tools C++语言框架IDL工具的源码实现 util C++语言.7z
- 使用pyqt创建一个登录具有动态背景的登陆界面
- 实验名称 调幅波信号的解调
- 实验名称 振幅调制器（利用乘法器）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
- 4
- 5
前往页