JS、JQ、FancyZoom 插件,分别实现兼容IE和火狐图片缩小放大
来源:互联网 发布:兄弟连java入门 编辑:程序博客网 时间:2024/05/17 08:07
<script type="text/javascript">
//兼容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>
<form id="form1">
<div class="pancontainer" data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;">
<img id="oImg" src="F:\照片\表情\bf096b63f6246b60ae162428e8f81a4c510fa256.jpg" alt="pic"/>
</div>
<input id="btn1" type="button" value="放大" onclick="ImageSuofang(true)" />
<input id="btn2" type="button" value="缩小" onclick="ImageSuofang(false)" />
<!-- <input type="button" value="<-Rotate逆时针" name="RotateL" id="RotateL" onclick="rotateRight('oImg',90);"> -->
</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方法实现照片放大缩小
<script type="text/javascript">
$(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>
<script src="js-global/FancyZoom.js" language="JavaScript" type="text/javascript"></script>
<script src="js-global/FancyZoomHTML.js" language="JavaScript" type="text/javascript"></script>
</head>
<body onLoad="setupZoom();">
<a href="http://49.74.217.106:48088//webrdp-web/systemQuery.do?action=downloadAtt&fileId=53192735-08ac-44f7-9bff-0537c483303e"><img src="http://49.74.217.106:48088/webrdp-web/systemQuery.do?action=downloadAtt&fileId=53192735-08ac-44f7-9bff-0537c483303e" width="161" height="123" border="0" alt="" id="img-mwsf-9" class="photo" /></a>
放大时动作流畅,简单实用,适合在本窗口点击察看大图 <br>
<br>
<div align="center"> <br>
<br>
更多JS代码下载请访问icodeku.com <a href="http://www.icodeku.com">http://www.icodeku.com</a> </div>
</body>
<script>
</script>
</html>
插件文件如下:
0 0
- JS、JQ、FancyZoom 插件,分别实现兼容IE和火狐图片缩小放大
- Jquery 插件图片放大效果(兼容ie 火狐 谷歌 Safari)
- JS实现图片的放大和缩小
- H5 Pinchzoom.js 插件实现手指触摸图片放大缩小
- JS网页图片查看器-可控制图片放大缩小移动|兼容IE、FF
- JS网页图片查看器-可控制图片放大缩小移动|兼容IE、FF
- zoom插件实现图片放大缩小功能
- js图片放大缩小
- js图片放大缩小
- 上下左右滚动图片(兼容ie和火狐)
- 图片上传预览(兼容火狐和IE)
- js-图片的放大和缩小
- js onkeyup 兼容火狐和IE
- javaScript实现图片的放大和缩小
- 纯js 编canvas处理图片, 涂鸦笔、画布图片内容旋转 放大缩小 裁剪框 。兼容ie9及以上 谷歌、360、火狐浏览器
- 兼容IE 和火狐
- Js下检查上传图片文件格式和大小的方法,兼容ie和火狐
- js实现鼠标拖动图片 兼容IE,FF火狐,谷歌浏览器
- mybatis的逆向工程
- Matlab数据处理——数据的保存和读取方法操作
- safari
- FLV文件格式解析
- 【c#】最小化到托盘DefWndProc接收不到消息事件
- JS、JQ、FancyZoom 插件,分别实现兼容IE和火狐图片缩小放大
- SpringBoot常用配置
- 畸变(Distortion)
- LINUX下PHP生成并调用C的.so文件
- ActiveMQ实现负载均衡+高可用部署方案
- Android开源项目推荐之【Luban(鲁班)】--可能是最接近微信朋友圈的图片压缩算法
- iOS 关于字符串中是否包含某字符
- Log4j简单配置
- 也说Java文件路径