JS、JQ、FancyZoom 插件，分别实现兼容IE和火狐图片缩小放大

最新推荐文章于 2019-05-07 15:52:04 发布

y562363753

最新推荐文章于 2019-05-07 15:52:04 发布

阅读量436

点赞数

分类专栏： JavaWeb学习文章标签：图片放大缩小火狐插件 javascript ie

本文链接：https://blog.csdn.net/y562363753/article/details/53396413

版权

JavaWeb学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

//兼容IE和火狐缩小放大、缩放

function ImageSuofang(args) {

var oImg = document.getElementById("oImg");

if (args) {

oImg.width = oImg.width * 1.1;

oImg.height = oImg.height * 1.1;

}

else {

oImg.width = oImg.width / 1.1;

oImg.height = oImg.height / 1.1;

}

</script>

</div>

</form>

通过JS实现通讯录的照片放大缩小

var img='<div id="photoFrame" style="width:100%; height:auto;border:0px;text-align:center"> '+"<img id='myImg' src=/webrdp-web/systemQuery.do?action=downloadAtt&fileId="+fileId+"" + "></div>";

$("#PHOTO").html(img);

var oPhoto= document.getElementById("photoFrame");

var oImg = document.getElementById("myImg");

oImg.onclick =function(){

var height= oImg.height;

if(height<=120){

oImg.width = 150;

//oImg.width = oImg.width * 2.1;

oImg.height = 220;

oPhoto.height = 220;

}

else {

oImg.width = 98;

oImg.height = 120;

oPhoto.height = 120;

}

通过JQ方法实现照片放大缩小

$(function(){

$("#img1").click(function(){

var width = $(this).width();

if(width==100)

{

$(this).width(200);

$(this).height(300);

}

else

{

$(this).width(100);

$(this).height(150);

}

});

</script>

使用FancyZoom 插件 实现照片的放大缩小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

放大时动作流畅，简单实用，适合在本窗口点击察看大图 <br>

<br>

<br>

更多JS代码下载请访问icodeku.com <a href="http://www.icodeku.com">http://www.icodeku.com</a> </div>

</body>

</script>

</html>

插件文件如下：

y562363753

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS、JQ、FancyZoom 插件，分别实现兼容IE和火狐图片缩小放大

//兼容IE和火狐缩小放大、缩放 function ImageSuofang(args) { var oImg = document.getElementById("oImg"); if (args) { oImg.width = oImg.width * 1.1; oImg.height = oImg.height * 1.1; } el
复制链接

扫一扫