网页中实现图片的自动放缩小

最新推荐文章于 2021-05-31 16:30:00 发布
最新推荐文章于 2021-05-31 16:30:00 发布
阅读量803 收藏
点赞数
文章标签： javascript function image table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rongyvfeng/article/details/2348440
版权

<html>
<head>
</head>
<body width="900" οnlοad="DrawImage(theimg)"> >
<script LANGUAGE="JAVASCRIPT">
function bbimg(o){
   var zoom=parseInt(o.style.zoom, 10)||100;

zoom+=event.wheelDelta/12;

if (zoom>0)

 o.style.zoom=zoom+'%';


   return false;
}
</script> 
<img src="20071.jpg" οnlοad="javascript:if(this.width>screen.width-screen.width/2) this.style.width=screen.width-screen.width/2" onmousewheel="return bbimg(this)" > 
<h1>3.滚轮图片缩放的代码
</h1>
<script language="javascript">
var count = 10;
function resizeimg(oImage)
{ 
count = Counting(count);
Resize(oImage,count);
return false;
}
function Counting(newzoom){ 
if (event.wheelDelta >= 120)
newzoom++;
else if (event.wheelDelta <= -120)
newzoom--;
if (newzoom<2) newzoom=2; 只允许缩小到20%
if (newzoom>50) newzoom=1; 只允许放大到500%
return newzoom; 
}
function Resize(oImage,newzoom){ 
oImage.style.zoom = newzoom + '0%'; 
count=newzoom;
}
</script>
<img src="20072.jpg" onDblClick="return Resize(this,10);return false;" 
onmousewheel="return resizeimg(this)" >


<h1>2.图片自动缩小到固定大小
</h1>
<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD){
  var image=new Image();
  var iwidth = 800;  //定义允许图片宽度
  var iheight = 700;  //定义允许图片高度
  image.src=ImgD.src;
  if(image.width>0 && image.height>0){
   flag=true;
   if(image.width/image.height>= iwidth/iheight){
    if(image.width>iwidth){  
    ImgD.width=iwidth;
    ImgD.height=(image.height*iwidth)/image.width;
    }else{
    ImgD.width=image.width;  
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
   else{
    if(image.height>iheight){  
    ImgD.height=iheight;
    ImgD.width=(image.width*iheight)/image.height;     
    }else{
    ImgD.width=image.width;  
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
   }
} 
//-->
</script>
<table width ="100%" >
<tr>
<td width ="100%">
<img src="20071.jpg" width="1024" height="768" name="theimg"> </td></tr>
</table>
</body>
</html>

rongyvfeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 图片的缩略图,纯CSS制作缩略图片
weixin_32334681的博客
06-04 2568
在这篇教程中，主要是跟着Alen Grakalic学习3种CSS制作缩略图的方法。我们在Web页面中时常碰到缩略图的应用，那么下面我将学习三种使用CSS的技巧来主内容显示图像的一部分。这几种技巧贵在于，我们不需要去切图片，而只要使用CSS代码，能帮我们在页面中显示我们需要显示的部分图像出来，而图像的其他部分将被隐藏起来。另外需要提醒大家的是，我们这里所说的图片是指内容图像()而不是背景图片，下面我...
JQuery实现input上传图片显示缩略图
EricHedgedog
03-04 1万+
JQuery实现input上传图片显示缩略图最近做一套手机商城页面，在退款申请页面有上传图片显示缩略图的功能，以前没有做过这个，所以整理了一下。HTML ： <p>上传图片：</p> <div id="imgPreview"></div> <span class="upload-img"><input id="fileUpload" accept="image/*" type="file"
前端之实现缩略图展示网页
热门推荐
珊瑚海的博客
05-18 1万+
有的时候，我们想对我们项目下的网页进行缩略图的展示，如下效果：   如果要实现上面的展示网页，需要三个步骤： 1.      生成网页的快照； 2.      把网页快照生成合适大小的缩略图； 3.      根据上面缩略图生成展示网页。 Ps：常见安装错误，请见本文档最后。 一、生成网页的快照 所谓生成网页的快照，就是对网页进行截图，我们这里用phantomjs 来实现。
网页中图片大小自动调整三种方法
cxzhq2002的杂记
11-10 4354
1.鼠标滚动图片大小调整 function bbimg(o){    var zoom=parseInt(o.style.zoom, 10)||100; zoom+=event.wheelDelta/12; if (zoom>0)  o.style.zoom=zoom+%;    return false; }   screen.width-screen.width/2) this.sty
HTM5网页图片自动缩放
12-25
HTM5网页图片自动缩放适合手机微信开发
图片自动缩小 点击放大
09-06
标题“图片自动缩小 点击放大”涉及到的是一种常见的网页图像处理技术，目的是为了优化网页加载速度和用户体验。在网页设计中，大尺寸的图片可能会导致页面加载时间延长，影响用户浏览体验。因此，通常会将图片自动...
JavaScript实现图片的放大缩小及拖拽功能示例
10-17
在JavaScript中实现图片的放大缩小和拖拽功能是一项常见的交互设计任务，这通常涉及到对HTML元素的属性操作以及处理鼠标事件。在这个示例中，我们将深入探讨如何利用JavaScript实现这一功能。 首先，为了实现图片的...
基于jQuery实现照片墙自动播放特效
11-29
5. **图片放大缩小动画**：当用户鼠标悬停在图片上时，可以使用jQuery的动画功能（`.fadeIn()`, `.fadeOut()`, `.animate()`等）来实现图片的放大缩小效果。例如，可以将图片的`opacity`属性从0.4变为1，同时改变其`...
大图片模拟天猫商城焦点图可自动扩大或者缩小
06-09
本教程将详细讲解如何利用HTML、CSS和JavaScript技术实现一个类似天猫商城的大图片焦点图，该图能自动扩大或缩小，从而提升用户交互体验。 首先，我们需要理解焦点图的基本构成。焦点图通常包括一个主图片区域，...
百度百科图片放大缩小JS代码
01-23
7. **图片缩放算法**：JS中实现图片放大缩小需要一定的图像处理算法，例如线性插值、双线性插值等，以保证图片放大后的质量。 8. **动画效果**：为了让放大缩小过程平滑，可能用到CSS3的过渡（transition）或JS的...
网页图片自动按照比例缩放到指定大小
08-14
有时候在网页中上传的图片尺寸过大，显示的时候造成错位，网页不美观。此源码可以将图片按照比例缩放到自定义大小。
JS网页图片按比例自适应缩放实现方法
10-26
主要介绍了JS网页图片按比例自适应缩放实现方法，有需要的朋友可以参考一下
图片等比例缩放，网页图片处理方法
12-17
图片等比例缩放，jQuery和js的两种图片等比例缩放效果，简单实用。
图片自动按比例缩小代码（防止页面被图片撑破）
04-28
提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。
html5怎么实现自动缩放图片,HTML5响应式（自适应）网页设计的实现
weixin_34098846的博客
05-30 2747
本文介绍了HTML5响应式(自适应)网页设计的实现，分享给大家，具体如下：第一步：在网页代码的头部，加入一行viewport元标签viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9。对于那些...
html自动调节图片的大小,网页中图片大小自动调整三种方法
weixin_33816734的博客
05-31 3454
functionbbimg(o){varzoom=parseInt(o.style.zoom,10)||100;zoom+=event.wheelDelta/12;if(zoom>0)o.style.zoom=zoom+'%';returnfalse;}screen.width-screen.width/2)this.style.width=screen.width-screen...
网页图片自动缩小代码
04-17 3667
<!-- .content-width {margin:auto; width:600px} --> 网页图片自动缩小代码，防止网页表格被撑破 .content-width {MARGIN: auto;WIDTH: 600px;} .content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!i
HTML5 css图片自动缩放
一直专注于互联网
11-16 2294
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
CSS实现网页图片的等比例缩放
叮咚侠的博客
03-31 2343
代码如下：
html 整个网页自适应放大缩小
最新发布
05-24
要让整个网页自适应放大缩小，可以使用响应式设计（Responsive Design）的方法。响应式设计是一种网页设计方法，它使得网页能够根据不同的屏幕大小和设备类型，自动调整布局、字体大小、图片大小等，以达到最佳的用户体验。 具体实现方法如下： 1. 使用Viewport元标签，设置视口的宽度和缩放比例： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 2. 使用相对单位（如em、rem、%）代替绝对单位（如px），这样可以使布局更加灵活： ```css .container { width: 90%; margin: 0 auto; font-size: 1em; } ``` 3. 使用媒体查询（Media Queries）来适应不同的屏幕大小，例如： ```css /* 在屏幕宽度小于600px时，将栏目的宽度设置为100% */ @media (max-width: 600px) { .column { width: 100%; } } ``` 通过以上方法，可以让网页在不同的设备上自适应放大缩小，提升用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值