`
sunxin1001
  • 浏览: 310131 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

js 控制图片缩放

阅读更多
<script language="javascript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 180/110){
   if(image.width>180){
    ImgD.width=180;
    ImgD.height=(image.height*110)/image.width;
   }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
   }
   /*ImgD.alt="bigpic" */
}
else{
   if(image.height>110){
    ImgD.height=110;
    ImgD.width=(image.width*110)/image.height;
   }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
   }
    /*ImgD.alt="bigpic" */
}
}
}
//-->
</script>



图片在使用的的时候可以这样写

程序代码
<img src="images/logo.gif" border="0" onload="DrawImage(this);" />

原文网址:http://www.xxrblog.cn/article.asp?id=350
分享到:
评论

相关推荐

    js控制图片缩放 不失真 获取图片真实长和宽

    在JavaScript中,实现图片的等比例缩放以保持不失真是一项常见的需求,特别是在网页设计和动态展示中。这里我们将深入探讨如何实现这一功能,并解决图片在切换时保持正确比例的问题。 首先,我们要明白图片不失真的...

    js图片缩放效果制作鼠标滚动图片等比例缩放

    总结一下,"js图片缩放效果制作鼠标滚动图片等比例缩放"涉及到的技术点有: 1. JavaScript事件监听:监听鼠标的滚轮事件。 2. CSS3变换:使用`transform`属性进行等比例缩放。 3. 计算缩放比例:根据滚动的增量和...

    js实现鼠标滚轮控制图片缩放效果的方法

    本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先,我们应当理解onmousewheel事件。这是一个鼠标...

    js图片缩放功能

    例如,使用Hammer.js库可以轻松地添加捏合手势来控制图片缩放。 总的来说,JavaScript实现图片缩放功能可以通过CSS3的`transform`、JavaScript的DOM操作或者Canvas的绘图方法来完成。具体选择哪种方式取决于应用...

    viewer.js图片缩放

    "viewer.js图片缩放"是一种基于jQuery的轻量级插件,它专为网页中的图片查看和交互设计,提供了丰富的功能,如图片放大、缩小、左右滑动等。这款插件使得网页中的图片展示变得更加直观和用户体验友好。下面将详细...

    手机js手势放大缩放图片插件

    例如,双击事件用于触发图片的快速放大,而捏合手势则用于控制图片的缩放。这些事件可以通过`addEventListener`函数添加到图片元素上,并通过比较连续触摸点的距离变化来识别捏合手势,从而计算出缩放比例。 接下来...

    手势控制图片缩放移动

    "手势控制图片缩放移动"是一个涉及到图像处理、用户界面设计和触摸事件处理的专题。下面我们将深入探讨这个主题。 首先,手势识别是实现这一功能的核心技术。在移动设备和平板电脑上,手势识别通常基于触摸屏,通过...

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    另外,通过修改AutoResizeImage函数中的逻辑,还可以实现更多灵活的图片缩放控制。比如,可以设置一个布尔值参数来决定是否保持图片的原始宽高比,或者设置一个回调函数,在图片缩放完成后执行特定的操作等。 ...

    js相册图片动感缩放显示广告代码

    在JavaScript(JS)编程中,实现相册图片的动感缩放显示效果是一种常见的需求,尤其在网站设计和广告展示中。这种效果能够增加用户的交互体验,使内容更加生动有趣。本篇文章将深入探讨如何利用JavaScript实现这样的...

    JS控制图片大小(等比例缩放)

    JS控制图片大小(等比例缩放)

    js控制图片放大、缩小、按比例显示

    在JavaScript(JS)编程中,控制图片的放大、缩小以及按照比例显示是常见的需求,尤其在网页设计和交互效果中。下面将详细讲解如何利用JavaScript实现这些功能。 1. **图片放大与缩小** - **鼠标滚动事件**:在...

    jquery幻灯片插件图片层叠加按钮控制图片大小缩放切换

    按钮控制的图片缩放可能涉及到以下步骤: 1. **初始状态**:所有图片按预设大小显示,按钮可见。 2. **点击放大**:用户点击放大按钮后,使用jQuery修改图片的CSS属性,如`width`和`height`,让图片放大,同时可能...

    js拖动图片缩放裁剪头像代码

    以上就是实现js拖动图片缩放裁剪头像的核心技术点。在实际开发中,还需要考虑到兼容性、性能优化以及错误处理等细节问题,确保功能在不同环境下都能稳定运行。在提供的压缩包文件"texiao5921_1560681100"中,可能...

    移动端H5图片轮播缩放

    2. **图片缩放**:除了基本的轮播功能,该插件还支持图片的缩放操作。用户可以通过双指捏合或分开的动作来放大或缩小图片,查看细节。这种功能对于展示高分辨率图像或者需要用户仔细查看的内容尤其有用。同时,为了...

    Js图片裁切、图片拖放和缩放实例.rar

    在给定的"Js图片裁切、图片拖放和缩放实例.rar"中,我们可以深入探讨三个关键的JavaScript技术:图片裁切、图片拖放和图片缩放。 1. 图片裁切: 图片裁切是网页应用中常见的功能,通常用于上传头像或者预览图片。这...

    jQuery图片缩放例子代码

    下面我们将深入探讨jQuery图片缩放的原理、实现方式以及相关知识点。 首先,我们需要理解jQuery的基本用法。jQuery通过$符号作为函数调用,用于选择DOM元素。例如,`$('img')`会选择所有的图片元素。选择器可以是ID...

    页面中图片缩放拖动

    图片缩放主要依赖CSS3和JavaScript技术。在CSS3中,我们可以使用`transform`属性来改变元素的大小,其中`scale()`函数用于缩放元素。例如,设置`transform: scale(x, y)`可以使元素在x轴和y轴上分别按照x和y的比例...

    PictureMove_控制图片_鼠标缩放_图片缩放_图片移动_

    "PictureMove"项目关注的核心是图片的动态控制,包括鼠标缩放、图片缩放以及图片的自由移动,这些都是提升用户体验的重要功能。下面我们将深入探讨这些知识点。 首先,**鼠标缩放**是一种用户友好的交互方式,它...

    通过手势控制图片的缩放、移动、旋转

    本项目"通过手势控制图片的缩放、移动、旋转"正是这样一个实现,允许用户通过手势对图片进行自由的缩放、移动和旋转,极大地提升了用户体验。 首先,我们要理解手势识别的基本原理。在iOS中,手势识别主要由`...

Global site tag (gtag.js) - Google Analytics