图片缩小放大脚本

最新推荐文章于 2024-04-22 15:28:53 发布
最新推荐文章于 2024-04-22 15:28:53 发布
阅读量1.9k 收藏
点赞数
分类专栏： Javascript专栏 文章标签： button input javascript function stylesheet class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hackson/article/details/331748
版权

 <html>
<head>
<title>中国室内设计师网－查看图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href='/Skin/DefaultSkin.css' rel='stylesheet' type='text/css'>
<script language=JavaScript>
function smallit(){           
 var height1=PhotoViewer.images1.height;           
 var width1=PhotoViewer.images1.width;           
 PhotoViewer.images1.height=height1/1.2;           
 PhotoViewer.images1.width=width1/1.2;          
}            
         
function bigit(){           
 var height1=PhotoViewer.images1.height;           
 var width1=PhotoViewer.images1.width;           
 PhotoViewer.images1.height=height1*1.2;         
 PhotoViewer.images1.width=width1*1.2;          
}            
function fullit()
{
 var width_s=screen.width-10;
 var height_s=screen.height-30;
 window.open("Photo_View.asp?UrlID=1&PhotoID=26", "PhotoView", "width="+width_s+",height="+height_s+",left=0,top=0,location=no,toolbar=no,status=no,resizable=no,scrollbars=yes,menubar=no,directories=no");
}
function realsize()
{
 PhotoViewer.images1.height=PhotoViewer.images2.height;    
 PhotoViewer.images1.width=PhotoViewer.images2.width;
 PhotoViewer.block1.style.left = 0;
 PhotoViewer.block1.style.top = 0;
 
}
function featsize()
{
 var width1=PhotoViewer.images2.width;           
 var height1=PhotoViewer.images2.height;           
 var width2=760;           
 var height2=500;           
 var h=height1/height2;
 var w=width1/width2;
 if(height1<height2&&width1<width2)
 {
  PhotoViewer.images1.height=height1;           
  PhotoViewer.images1.width=width1;          
 }
 else
 {
  if(h>w)
  {
   PhotoViewer.images1.height=height2;         
   PhotoViewer.images1.width=width1*height2/height1;          
  }
  else
  {
   PhotoViewer.images1.width=width2;          
   PhotoViewer.images1.height=height1*width2/width1;         
  }
 }
 PhotoViewer.block1.style.left = 0;
 PhotoViewer.block1.style.top = 0;
}
</script>  

 <tr>
    <td height="30" align="center" valign="middle" Class="left_tdbgall">
 <input name="smallit" type="button" id="smallit" οnclick="smallit();" value="- 缩小 -">&nbsp;&nbsp;
 <input name="bigit" type="button" id="bigit" οnclick="bigit();" value="+ 放大 +" >&nbsp;&nbsp;
 <input name="fullit" type="button" id="fullit" onClick="fullit();" value="全屏显示">&nbsp;&nbsp;
 <input name="realsize" type="button" id="realsize" onClick="realsize();" value="实际大小">&nbsp;&nbsp;
 <input name="featsize" type="button" id="featsize" onClick="featsize();" value="最合适大小">&nbsp;&nbsp;
 <span class="tdbg_leftall">
 <input name='Prev' type='button' id='Prev' value='上一张' onClick="javascript:window.open('Photo_Viewer.asp?PhotoID=24', '_self');">
 &nbsp;
 <input name='Next' type='button' id='Next' value='下一张' onClick="javascript:window.open('Photo_Viewer.asp?PhotoID=30', '_self');">
 </span>
 </td>
  </tr>
  <tr>
    <td height="500" align="center" valign="middle" Class="left_tdbgall">
 <iframe id='PhotoViewer' width='99%' height='500' scrolling='no' src='Photo_View.asp?UrlID=1&PhotoID=26'></iframe>
 </td>
  </tr>

Hackson
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自动手动切换图片脚本支持点击放大缩小
03-07
可以手动加自动切换一组相片，并且点击相片弹出放大图片，四周变成半透明状态
“Magic Zoom V3图片放大镜特效”脚本的分析
听雨轩
07-04 233
      最近想试用一个图片放大镜特效，网上（国内）引用最多可能就是名为”Magic Zoom “的jQuery插件了。该插件是商业软件，试用版会在放大框底部或顶部加上一行提示升级到完整版本的提示（Please upgrade to full version of Magic Zoom）。其实该演示版功能是完整的，只是多了这行提示而已。       网上搜了一下，还没发现有人对该组件进行较全面...
随意改变图片大小的脚本
DavidLog的博客
04-12 1169
图片大小自动脚本使用方法:     在图片引用位置写上即可。    400和500表示限制的最大宽和高; function AutoResizeImage(maxWidth, maxHeight, objImg) { var img = new Image(); img.src = objImg.src; var hRatio;
鼠标经过图片放大图片-js脚本特效.rar
07-10
JS脚本特效，实现鼠标移动放大图片，类似于一个图片放大镜。当移动鼠标时，会在右侧缩略图中生成一个边框以确定放大位置，然后随着你的鼠标移动左侧经放大的图像显示出来，看上去很逼真。
Unity3D场景中对模型旋转放大缩小脚本
02-04
在这个脚本里，只要将代码里的Gameobject赋值给物体，就可以实现对模型的旋转、缩放等 在这个脚本里，只要将代码里的Gameobject赋值给物体，就可以实现对模型的旋转、缩放等
用于微博页中点击图片放大缩小js脚本
11-04
用于微博页中点击图片放大缩小js脚本，function chgsize(e){ if(e.getAttribute('big')&&e.getAttribute('big')=='1'){ e.setAttribute('big','0'); e.setAttribute('width','150'); e.style.cursor="url('...
js特效脚本含源码和说明百度百科图片放大缩小代码
03-31
js特效脚本含源码和说明百度百科图片放大缩小代码本资源系百度网盘分享地址
css脚本详解
maggiemiao05230523的专栏
09-27 587
  Css">BODY{margin: 0px;color: #333333;background-color: #84BFE9;background-color: #006699;网页背景，网页两边细竖色块--> "FONT-SIZE: 12pt; COLOR: #000003;">宋体;字体-->font-size: 9pt;字体大小-->text-decoration: none;字体无
python题库刷题网站_python在线刷题网站
热门推荐
weixin_39944638的博客
12-01 1万+
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里技术人对外发布原创技术内容的最大平台；社区覆盖了云计算、大数据、人工智能、IoT、云原生、数据库、微服务、安全、开发与运维9大技术领域。","link1":...
批量缩放图片的脚本
epeaktop的专栏
01-21 847
#!/bin/bash # author : jiangxf 2015.1.21 if [ $# -lt 2 ]; then     echo "Usage: resizePng.sh {pngName} {percentage}";     exit; fi width=`sips -g pixelWidth $1 | tail -n1 | awk
缩放图片的脚本
navno1的专栏
01-21 507
批量缩放图片的脚本 #!/bin/bash if [ $# -lt 2 ]; then     echo "Usage: resizePng.sh {pngName} {percentage}";     exit; fi width=`sips -g pixelHeight $1 | tail -n1 | awk -F: '{print $2}'`
图片查看器（图片放大缩小功能）
木子小姐
01-12 5468
第一： Viewer.js 链接：http://www.dowebok.com/192.html 使用方法 1、引入文件 JS 版本： jQuery 版本： 注意：JS 版本和 jQuery 版本名字虽然一样，但代码不一样，不能通用，请到 github 上下载需要的版本。 2、HTML      3、JavaScript
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 342
官网代码（在取消选中状态的时候不生效）
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 941
​​​​​​​。
PLSQL的下载与安装
code袁的博客
04-18 490
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
Vue.js（自定义指令）
Luo3255069063的博客
04-18 369
【代码】Vue.js（自定义指令）
vue 实现级联选择器功能
最新发布
清音的博客
04-22 156
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
uinty照片墙，点击放大缩小
05-24
实现这个功能可以使用Unity的UI组件和脚本。首先创建一个UI画布，将一些图片作为子对象添加到画布中，并将每个图片的RectTransform组件的锚点设置为左上角(0,1)，以便在画布上方便地对齐它们。 然后，为每个图片添加一个Button组件，以便能够检测到点击事件。在每个Button上添加一个OnClick事件，并将事件处理程序指向一个自定义脚本。 在自定义脚本中，您可以记录当前图片的缩放比例，并在点击事件处理程序中根据需要更改它。您可以使用Transform组件的localScale属性来控制图片的缩放比例。例如，当用户点击图片时，您可以将其缩放为2倍大小，再次点击时将其还原为原始大小。 以下是示例代码： ```csharp using UnityEngine; using UnityEngine.UI; public class PhotoZoom : MonoBehaviour { private bool isZoomed = false; private Vector3 originalScale; private void Start() { originalScale = transform.localScale; } public void OnClick() { if (isZoomed) { // 缩小图片 transform.localScale = originalScale; isZoomed = false; } else { // 放大图片 transform.localScale = originalScale * 2; isZoomed = true; } } } ``` 将此脚本添加到每个Button上，并将OnClick事件处理程序指向它。当用户单击图片时，它将缩放为两倍大小，再次单击时将缩小回原始大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值