您的位置：首页 > 其它

类似于图片预览中的图片放大缩小功能

2020-02-05 05:15 489 查看
<!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=gb2312" />
<title>set image size</title>
<style>
*{
margin:0;
padding:0;
}
.zoomin{
cursor:url('images/Discaz.cur'),auto;
}
.zoomout{
cursor:url('images/11.cur'),auto;
}
</style>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script>
jQuery(function($){
var img,imgH,imgW,winH,winW,pre;

function loadImage(url, callback) {
img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;

if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}

img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
}

function runImageFunc(){
loadImage('images/001.jpg', setImage);
}



function setImage(){
imgH = img.height;
imgW = img.width;
pre = imgH / imgW;
winH = $(window).height();
winW = $(window).width();
if(imgH <= winH && imgW <= winW){
return;
}else{
winSize();
$('img').addClass('zoomin');
}
}

function winSize(){
var outH,outW;
if(winH < winW){
outH = winH;
outW = winH / pre;
if(outW > winW){
outW = winW;
outH = winW * pre;
}
$('img').width(outW);
$('img').height(outH);

}else{
outW = winW;
outH = winW * pre;
if(outH > winH){
outH = winH;
outW = winH / pre;
}
$('img').height(outH);
$('img').width(outW);
}
}

runImageFunc();
//window.onresize = runImageFunc;

$('img').toggle(
function(){
$('img').height(imgH);
$('img').width(imgW);
if($('img').hasClass('zoomin')){
$('img').removeClass('zoomin');
}
$('img').addClass('zoomout');

},
function(){
winH = $(window).height();
winW = $(window).width();
winSize();
if($('img').hasClass('zoomout')){
$('img').removeClass('zoomout');
}
$('img').addClass('zoomin');
}
);
});

</script>

</head>

<body>

<img src="images/001.jpg" alt="" />


</body>
</html>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
finesky_lq 发布了3 篇原创文章 · 获赞 0 · 访问量 58 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航