可控制网页中图片自由缩放代码

合集下载

html容器中图片的拉伸与缩放

html容器中图片的拉伸与缩放

html容器中图⽚的拉伸与缩放html中能通过"background-image"设置背景图⽚,也能通过<img>标签来在容器中插⼊图⽚。

当图⽚⾃⾝⼤⼩与容器⼤⼩⽆法匹配时,就需要缩放使其填充容器看上去正常显⽰。

接下来分开讲解。

背景图⽚“background-image”⾸先我们要设置背景图⽚。

因为图⽚塞⼊容器中时,⽆论图⽚多⼤,他的宽度都是默认展开全部⽐例,⽽⾼度则需要⼿动设置,否则不会显⽰。

⽗容器设置了红⾊边框,以此分辨填充效果。

.mask_1 {height: 100%; /*这⾥需要设置⾼度为100%,因为图⽚默认以⾃⾝的宽度展开(⽆论他是否⼤过⽗级容器),若不设置⾼度,则图⽚将⽆法展⽰*/background-image: url("dragon.png");}.mask_2 {height: 100%;width: 100%;background-image: url(⼩图测试.jpg);}效果如下。

左图原图⽐容器⼤,右图更⼩。

可以看到默认情况下,⼤图以容器左上⾓为原点铺开;⼩图则是以剩余空间进⾏平铺。

接下来使⽤background-size来进⾏拉伸的控制。

这个属性能取三个值,默认是auto,也就是图⽚原始尺⼨塞进去,⽆论他是否能显⽰完全。

cover:该属性会按⽐例拉伸当前图⽚,直⾄其中较短那条边填满容器。

此举会填充整个容器,但不可避免地会出现裁剪——如果原图⽚长宽⽐与容器⽐例不⼀致的话。

.mask_1 {height: 100%;background-image: url("dragon.png");background-size: cover;}.mask_2 {height: 100%;width: 100%;background-image: url(⼩图测试.jpg);background-size: cover;background-repeat: no-repeat;/*禁⽌图⽚平铺空⽩,此项仅限于图⽚本⾝⼩于容器⼤⼩时*/}可以看到,⼤图⽚等⽐例缩放,短边为⾼,因此右侧被裁剪了;⽽⼩图⽚的短边为宽,因此下侧被裁剪了。

CSS实现图片等比例缩放成功(演示)

CSS实现图片等比例缩放成功(演示)

一、CSS实现图片等比例缩放成功(演示)可能会遇到这样的情况,当用户上传一张很大的图片的时候,这样网页的布局有可能会打乱,如果用JavaScript来处理这样的问题可能会影响网页的运行效率,最好的方法是用CSS来实现,先看效果:<style type="text/css">#test{max-width: 200px;width:expression(this.width > 200 ? "200px" : this.width);height:expression(this.height > 200 ? "200px" : this.height);overflow:hidden;}</style><img id="test" src="upload/201010/2010102715435469.jpg" alt="" />&nbsp;&nbsp;&nbsp;<img src="upload/201010/2010102715435469.jpg" alt="" />二、css实现图片上下左右居中且等比例缩放不规则图片在定宽高的DIV内,上下左右都居中,并且可以等比例缩放。

显示效果如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title><style type="text/css">.div1{/*非IE内核*/display:table-cell;vertical-align:middle;/*IEneihe*/*display:block;*font-size:175px;/*高度为200PX,则200*0.873约为175px*/text-align:center;width:200px;height:200px;}.div1 img{ vertical-align:middle;/*之前的是图片上下左右居中。

uieffect 用法

uieffect 用法

uieffect 用法1. 引言1.1 概述在现代网页开发中,为了提升用户体验和页面的美观性,我们经常需要添加各种特效和动画效果。

其中,UI Effect(简称uieffect)是一种非常常见且实用的技术。

通过使用uieffect,我们可以轻松地将阴影、渐变、缩放等效果应用到网页元素上。

1.2 文章结构本文旨在介绍uieffect的用法及其相关内容。

首先,我们将详细介绍uieffect 的功能和作用,并阐述使用uieffect的前提条件。

然后,我们将详细讲解uieffect 的具体使用方法以及常见错误和注意事项。

最后,我们将总结uieffect的优点和用途,并对未来uieffect的发展进行展望和思考。

1.3 目的本文旨在帮助读者全面了解并掌握uieffect的使用方法,并能够合理运用它以实现各种炫酷的效果。

同时,我希望通过介绍常见错误和注意事项,引导读者合理使用uieffect以保持良好用户体验和页面性能。

最后,通过对uieffect优点和未来发展进行分析与思考,我希望读者能更好地把握这一技术的潜力并发挥其最大的价值。

2. uieffect 用法2.1 介绍uieffect功能uieffect是一个强大的库,用于在网页开发中实现各种炫酷的UI特效。

它提供了许多效果选项,如阴影、渐变和缩放等,可以使网页内容更加生动和有吸引力。

通过使用uieffect,我们可以为用户创造出更好的视觉体验,并且提升网页的整体美感。

2.2 使用uieffect的前提条件在开始使用uieffect之前,您需要确保已将该库正确地引入到您的项目中。

您可以从官方网站上下载最新版本的uieffect库,并将其文件引入到您的HTML代码中。

请务必遵循该库的安装说明以及任何其他依赖关系。

2.3 uieffect的具体使用方法一旦成功引入了uieffect库,您就可以开始使用其中的效果了。

使用方法非常简单和灵活。

以下是一些基本示例:- 阴影效果:要给一个元素添加阴影效果,您可以在其样式中设置相应属性值。

JS+css图片自动缩放自适应大小

JS+css图片自动缩放自适应大小

JS+css图⽚⾃动缩放⾃适应⼤⼩我加了css的限制:复制代码代码如下:div img {}{max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px":"auto");overflow:hidden;}◎ max-width:600px; 在IE7、FF等其他⾮IE浏览器下最⼤宽度为600px。

但在IE6中⽆效。

 ◎ width:600px; 在所有浏览器中图⽚的⼤⼩为600px; ◎当图⽚⼤⼩⼤于600px,⾃动缩⼩为600px。

在IE6中有效。

 ◎ overflow:hidden; 超出的部分隐藏,避免控制图⽚⼤⼩失败⽽引起的撑开变形。

在放图⽚的页⾯⾥加了复制代码代码如下:<script language="JavaScript">var imgObj;for( i = 0; i < document . getElementsByTagName("img") . length; i++ ){imgObj = document . getElementsByTagName("img")[i];//建议只判断⾼度或者宽度其中⼀个,那样可以⾃动按⽐例缩放if ( imgObj . width > 500 ) //判断图⽚的宽度,如果⼤于700,则设置为700,值可以⾃⼰修改{imgObj . width = 500}if ( imgObj . height > 700 ) //判断图⽚的⾼度,如果⼤于700,则设置为700,值可以⾃⼰修改{imgObj . height = 700}}</script>单独的图⽚控制,⽤这个:复制代码代码如下:<script>var abc=document.getElementById("abc");var imgs=abc.getElementsByTagName("img");for (var i=0,g;g=imgs[i];i++)g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}} </script>测试在IE和FF下通过。

cimage缩放函数

cimage缩放函数

cimage缩放函数CImage缩放函数的作用是将一张图片按照指定的比例进行放大或缩小。

通过调用CImage类中的相关方法,我们可以实现对图片的尺寸调整,从而满足不同场景下的需求。

在使用CImage缩放函数时,我们首先需要确定需要操作的图片路径,并使用CImage类的Load方法加载图片。

接着,我们可以使用CImage类的GetWidth和GetHeight方法获取原始图片的宽度和高度。

为了实现图片的缩放,我们可以通过设置目标图片的宽度和高度,来确定缩放比例。

在确定缩放比例后,我们可以调用CImage类的Rescale方法来实现图片的缩放。

CImage缩放函数的使用示例如下:```cppCString strFilePath = _T("image.jpg"); // 图片路径CImage image;image.Load(strFilePath); // 加载图片int nOriginalWidth = image.GetWidth(); // 获取原始图片宽度int nOriginalHeight = image.GetHeight(); // 获取原始图片高度int nTargetWidth = nOriginalWidth / 2; // 目标图片宽度为原始图片宽度的一半int nTargetHeight = nOriginalHeight / 2; // 目标图片高度为原始图片高度的一半image.Rescale(nTargetWidth, nTargetHeight); // 缩放图片CString strTargetFilePath = _T("target_image.jpg"); // 目标图片保存路径image.Save(strTargetFilePath); // 保存缩放后的图片```通过以上代码,我们可以实现对指定图片的缩放操作,并将缩放后的图片保存到指定路径。

js实现图片放大和拖拽特效代码分享

js实现图片放大和拖拽特效代码分享

js实现图⽚放⼤和拖拽特效代码分享本⽂实例讲述了js实现图⽚放⼤和拖拽特效代码,分享给⼤家供⼤家参考。

具体如下:js实现图⽚放⼤和拖拽特效是⼀款⾮常实⽤的js特效,实现了图⽚的放⼤和拖拽功能,没⽤⽤到jquery插件,是⽤原⽣javascript实现的,除了点击放⼤和缩⼩按钮来控制图⽚的放⼤缩⼩,还可以使⽤⿏标的滚轮控制图⽚的缩放。

运⾏效果图: ---------------------- -----------------------⼩提⽰:浏览器中如果不能正常运⾏,可以尝试切换浏览模式。

为⼤家分享的js实现图⽚放⼤和拖拽特效代码如下<!DOCTYPE html><html><head><meta charset="utf-8"><title>js实现图⽚放⼤和拖拽特效</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" href="css/style.css"><script type="text/javascript" src="js/drag_map.js"></script><style type="text/css">body{font-size: 12px;font-family: "Verdana" , "Arial" , "Helvetica" , "sans-serif";} td{font-size: 12px; line-height: 150%;} TD{font-size: 12px; color: #000000;} A{font-size: 12px; color: #000000;} #Layer1{z-index: 100; position: absolute; top: 150px;} #Layer2{z-inde </style><script type="text/JavaScript">function MM_reloadPage(init) {if (init == true) with (navigator) {if ((appName == "Netscape") && (parseInt(appVersion) == 4)) {document.MM_pgW = innerWidth; document.MM_pgH = innerHeight; onresize = MM_reloadPage;}}else if (innerWidth != document.MM_pgW || innerHeight != document.MM_pgH) location.reload();}MM_reloadPage(true);</script></head><body onLoad="" onmouseup="document.selection.empty()" oncontextmenu="return false"onselectstart="return false" ondragstart="return false" onbeforecopy="return false"style="overflow-y: hidden; overflow-x: hidden" oncopy="document.selection.empty()"leftmargin="0" topmargin="0" onselect="document.selection.empty()" marginheight="0"marginwidth="0"><div id="Layer1"><table cellspacing="2" cellpadding="0" border="0"><tbody><tr><td>&nbsp;</td><td><img title="向上" style="cursor: hand" onClick="clickMove('down')" height="20" src="images/up.gif"width="20"></td><td>&nbsp;</td></tr><tr><td><img title="向左" style="cursor: hand" onClick="clickMove('right')" height="20" src="images/left.gif"width="20"></td><td><img title="还原" style="cursor: hand" onClick="realsize();" height="20" src="images/zoom.gif"width="20"></td><td><img title="向右" style="cursor: hand" onClick="clickMove('left')" height="20" src="images/right.gif"width="20"></td></tr><tr><td>&nbsp;</td><td><img title="向下" style="cursor: hand" onClick="clickMove('up')" height="20" src="images/down.gif"width="20"></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img title="放⼤" style="cursor: hand" onClick="bigit();" height="20" src="images/zoom_in.gif"width="20"></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img title="缩⼩" style="cursor: hand" onClick="smallit();" height="20" src="images/zoom_out.gif"width="20"></td><td>&nbsp;</td></tr></tbody></table></div><p><br></p><div id="hiddenPic" style="z-index: 1; left: 0px; visibility: hidden; width: 0px;position: absolute; top: 150px; height: 0px"><img src="/large/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg" border="0" name="images2"></div><div class="dragAble" id="block1" onMouseOver="dragObj=block1; drag=1;" style="z-index: 10;left: 0px; width: 0px; position: absolute; top: 150px; height: 0px" onMouseOut=""drag="0"><img onmousewheel="return onWheelZoom(this)" style="zoom: 0.7" src="images/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg" border="0" name="images1"></div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div></body></html>核⼼代码如下:function onWheelZoom(obj){ //滚轮缩放zoom = parseFloat(obj.style.zoom);tZoom = zoom + (event.wheelDelta>0 ? 0.05 : -0.05);if(tZoom<0.1 ) return true;obj.style.zoom=tZoom;return false;}js关键代码:drag = 0move = 0var ie=document.all;var nn6=document.getElementById&&!document.all;var isdrag=false;var y,x;var oDragObj;function moveMouse(e) {if (isdrag) {oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";return false;}}function initDrag(e) {var oDragHandle = nn6 ? e.target : event.srcElement;var topElement = "HTML";while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;}if (oDragHandle.className=="dragAble") {isdrag = true;oDragObj = oDragHandle;nTY = parseInt(oDragObj.style.top+0);y = nn6 ? e.clientY : event.clientY;nTX = parseInt(oDragObj.style.left+0);x = nn6 ? e.clientX : event.clientX;document.onmousemove=moveMouse;return false;}}document.onmousedown=initDrag;document.onmouseup=new Function("isdrag=false");function clickMove(s){if(s=="up"){dragObj.style.top = parseInt(dragObj.style.top) + 100;}else if(s=="down"){dragObj.style.top = parseInt(dragObj.style.top) - 100;}else if(s=="left"){dragObj.style.left = parseInt(dragObj.style.left) + 100;}else if(s=="right"){dragObj.style.left = parseInt(dragObj.style.left) - 100;}}function smallit(){var height1=images1.height;var width1=images1.width;images1.height=height1/1.2;images1.width=width1/1.2;}function bigit(){var height1=images1.height;var width1=images1.width;images1.height=height1*1.2;images1.width=width1*1.2;}function realsize(){images1.height=images2.height;images1.width=images2.width;block1.style.left = 0;block1.style.top = 0;}function featsize(){var width1=images2.width;var height1=images2.height;var width2=701;var height2=576;var h=height1/height2;var w=width1/width2;if(height1<height2&&width1<width2){images1.height=height1;images1.width=width1;}else{if(h>w){images1.height=height2;images1.width=width1*height2/height1;}else{images1.width=width2;images1.height=height1*width2/width1;}}block1.style.left = 0;block1.style.top = 0;}function onWheelZoom(obj){ //滚轮缩放zoom = parseFloat(obj.style.zoom);tZoom = zoom + (event.wheelDelta>0 ? 0.05 : -0.05);if(tZoom<0.1 ) return true;obj.style.zoom=tZoom;return false;}以上就是为⼤家分享的js实现图⽚放⼤和拖拽特效代码,希望⼤家可以喜欢。

HTML+CSS图片大小自适应~PC电脑端、手机端

HTML+CSS图片大小自适应~PC电脑端、手机端

HTML+CSS图⽚⼤⼩⾃适应~PC电脑端、⼿机端
写页⾯的时候经常会遇到需要图⽚⾃适应容器⼤⼩这样的情况:
<style>
div{width:400px;height:400px;border:1px solid #000; }
img{width:100%;height:100%;}
</style>
不管容器有多⼤,只要将img的宽⾼设置成100%(这⾥的100%是相对于⽗级宽⾼⽽⾔)就能⾃适应容器⼤⼩。

那是不是就这这么简单完事⼉了呢?如果你不介意图⽚被放⼤后可能出现失真的话也的确是这样就ok了。

假如你介意图⽚放⼤后会失真,我们可以改进上⾯的代码,只需要将img的样式简单修改.
img{max-width:100%;max-height:100%;}
max-width:100%和width:100%的区别在于,max-width是相对于img⾃⾝的尺⼨⽽⾔的。

意思是图⽚最⼤宽度为⾃⾝尺⼨的宽,在这⾥就是100px。

⽽width的100%我们上⾯已经说过了是相对于⽗级宽度的,所以为了不让图⽚被放⼤后失真我们可以设置img的最⼤宽度为⾃⾝尺⼨⼤⼩,更通俗的讲就是只允许缩⼩不允许放⼤img。

具体情况中是选择width:100%还是max-width:100%还是依据个⼈的需求⽽定,另外在响应式设计中这个问题稍微会复杂⼀点。

图⽚适应⼿机端要控制的是装图⽚的容器宽度
img{
display: block;(可不加 banner可以⽤)
height: auto;
max-width: 100%;(或者width:100%)
}
将以上标签加⼊之后保存,再⽤⼿机打开即是⾃适应⽹页了。

minimum-scale 默认值

minimum-scale 默认值

minimum-scale 默认值minimum-scale是一个用于控制网页在移动设备上显示比例的属性。

在移动设备上浏览网页时,网页会自动缩放以适应屏幕宽度,以便内容能够完全显示。

这个属性的默认值是1.0,表示网页按照设备的实际像素比例进行缩放,即不进行额外的缩放。

最初,移动设备的屏幕宽度较小,网页在移动设备上展示时可能会出现排版错乱、字体过小等问题。

为了解决这些问题,开发者们开始使用viewport标签来控制网页的展示比例,并且引入了minimum-scale属性。

通过设置minimum-scale属性,开发者可以限制网页缩放的最小比例。

当用户在移动设备上浏览该网页时,最小比例将会生效,确保内容不会过小而难以阅读。

这是一个非常有用的属性,可以通过以下方式设置:```html<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0">```其中`minimum-scale=1.0`表示最小缩放比例为1.0,即禁止网页进行额外的缩放。

开发者还可以根据实际需要,设置不同的最小缩放比例。

需要注意的是,通过设置minimum-scale,开发者可以限制网页进行缩小,但无法限制网页进行放大。

这是因为在移动设备上,如果网页的内容无法在当前宽度下显示完整,用户可以通过手势进行放大操作。

如果希望禁止用户对网页进行放大,可以使用maximum-scale属性来限制最大缩放比例。

移动设备上的网页展示问题一直是前端开发中的一个挑战,而viewport和minimum-scale属性的出现,为开发者提供了更多控制网页展示的手段。

通过合理设置minimum-scale属性,可以确保移动设备上的网页内容得到适当的展示,提升用户体验。

总结起来,minimum-scale是一个控制网页在移动设备上最小缩放比例的属性。

JS实现等比例缩放图片

JS实现等比例缩放图片

JS实现等⽐例缩放图⽚有时候我们前端页⾯只有500×500像素的宽和⾼的布局,但是后台返回的数据图⽚是1000×1000,那么这种情况下如果我直接返回的话那么图⽚肯定有⼀部分没有显⽰出来,在这种情况下我是想能不能在我们前端开发实现图⽚等⽐例缩放。

⽐如如下HTML代码:<div id="demo1"><img src="/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt=""></div>CSS代码如下:#demo1{width:800px;height:300px;overflow:hidden;}外层div的css样式定了宽度是800像素⾼度是300像素,但是这张图⽚的宽度和⾼度分别是1060像素和300像素,如果我们不做任何处理的话,那么图⽚肯定会有260像素被隐藏掉了,⽽我们现在想要图⽚被渲染出来后根据外层容器800像素×300像素的宽度和⾼度分别等⽐例缩放,这样的话不管图⽚的宽度和⾼度是多少,都可以⾃适应!下⾯我们可以先看看JSFIddle效果是什么样的!第⼀张图⽚是没有任何处理的,第2张⼩的是根据宽度800像素进⾏等⽐例缩放后的。

HTML代码如下:<img src="/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" width="1060" height="300" alt=""><div id="demo1"><img src="/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" alt=""></div>CSS代码如下:#demo1{width:800px;height:300px;overflow:hidden;}JS代码如下:/*** 已知图⽚的宽度和⾼度的等⽐例缩放*/function knowImgSize(id) {var idWidth = $(id).width(), // 容器的宽度和⾼度idHeight = $(id).height();$(id + ' img').each(function(index,img){var img_w = $(this).width(),img_h = $(this).height();// 如果图⽚⾃⾝宽度⼤于容器的宽度的话那么⾼度等⽐例缩放if(img_w > idWidth) {var height = img_h * idWidth / img_w;$(this).css({"width":idWidth, "height":height});}});}// 初始化$(function(){knowImgSize("#demo1");});由于⽐较简单这⾥我就不提供demo下载了,具体的效果可以看上⾯jsfiddle链接页⾯!当页⾯加载的图⽚尺⼨未知的情况下,上述代码则不能进⾏有效的缩放.那么我们现在有没有办法也可以实现类似的?当然我们是否还记得上⼀篇⽂章介绍的上⼀篇我们介绍不需要等待图⽚加载完去做某件事,我们可以使⽤预加载,并且不需要预设width与height属性,因为浏览器能够获取图⽚的头部数据。

JSP图片上传/放大缩小/裁减的源代码

JSP图片上传/放大缩小/裁减的源代码

3000分求JSP 图片上传/放大缩小/裁减的源代码guestdsf竹省省市滋发息加友铜牌会员1 # 大 中 小 发表于 2009-08-27 10:33:003000分求JSP 图片上传/放大缩小/裁减的源代码。

能裁减固定大小比如(120*100)的就行。

有预览,能显示图片长宽和大小(file size)最好。

本人结帖率是99.87%, 可用分8000+非常感谢!!如果没有JSP 源代码,PHP 源代码也可以。

package myBean; import java.io.*; public class uploadpic {String picPath;//图片路径 (如:F:picturea.gif ) public String pictype[];//设置图片的后缀名 FileInputStream in; int piclength;//设置图片的最大kb public void setpicPath(String picPath)//获得图片的路径 {this.picPath=picPath; } 设置图片的最大长度{this.piclength=piclength;}public int getpiclength(){return piclength;}public boolean testlength()//判断图片的长度是否大于设定的最大长度try{in=new FileInputStream(picPath);if(in.available()/1024>piclength)return false;}catch(IOException e){System.out.println(e.getMessage());}return true;}public void setpictype(String[] pictype)//设置图片的扩展名{this.pictype=pictype;}public boolean testpictype()//判断图片的扩展名是否是规定的{if(pictype!=null){for(int i=0;i <pictype.length;i ){if(picPath.endsWith(pictype))return true;}return false;}return false;}}以下是在jsp页面中调用uploadpic首先要引入此bean所在的包<%@page import="myBean.uploadpic" %><jsp:useBean id="pic" scope="page" class="myBean.uploadpic" /> 下一条语句是得到上一层页面,也就是用户提交的图片路径!picp=codetostring.codeToString(request.getParameter("picPath"));pic.setpicPath(picp);pic.setpiclength(100);//以kb为单位if(pic.testlength())out.print("length ok <br>");elseout.print("length ok");String p1,p2;p1=".jpg";p2=".gif";String[] type={p1,p2};pic.setpictype(type);if(pic.testpictype())out.print("typeok");elseout.print("type error");made by zonecens 不知道2楼的怎么样,我来学习一个!帮顶!好像百度一招很多百度一下,找到相关网页约11,400,000篇,用时0.036秒3000连个星星都升不了这个是JAVA代码package ftp;import .ftp.*;import .*;import java.awt.*;import java.awt.event.*;import java.applet.*;import java.io.*;class FTPextends Applet {FtpClient aftp;DataOutputStream outputs;TelnetInputStream ins;TelnetOutputStream outs;TextArea lsArea;Label LblPrompt;Button BtnConn;Button BtnClose;TextField TxtUID;TextField TxtPWD;TextField TxtHost;int ch;public String a = "没有连接主机";String hostname = "";public void init() {setBackground(Color.white);setLayout(new GridBagLayout());GridBagConstraints GBC = new GridBagConstraints();LblPrompt = new Label("没有连接主机");LblPrompt.setAlignment(Label.LEFT);BtnConn = new Button("连接");BtnClose = new Button("断开");BtnClose.enable(false);TxtUID = new TextField("", 15);TxtPWD = new TextField("", 15);TxtPWD.setEchoCharacter('*');TxtHost = new TextField("", 20);Label LblUID = new Label("User ID:");Label LblPWD = new Label("PWD:");Label LblHost = new Label("Host:");lsArea = new TextArea(30, 80);lsArea.setEditable(false);GBC.gridwidth = GridBagConstraints.REMAINDER;GBC.fill = GridBagConstraints.HORIZONTAL; ( (GridBagLayout) getLayout()).setConstraints(LblPrompt, GBC);add(LblPrompt);GBC.gridwidth = 1;( (GridBagLayout) getLayout()).setConstraints(LblHost, GBC);add(LblHost);GBC.gridwidth = GridBagConstraints.REMAINDER; ( (GridBagLayout) getLayout()).setConstraints(TxtHost, GBC);add(TxtHost);GBC.gridwidth = 1;( (GridBagLayout) getLayout()).setConstraints(LblUID, GBC);add(LblUID);GBC.gridwidth = 1;( (GridBagLayout) getLayout()).setConstraints(TxtUID, GBC);add(TxtUID);GBC.gridwidth = 1;( (GridBagLayout) getLayout()).setConstraints(LblPWD, GBC);add(LblPWD);GBC.gridwidth = 1;( (GridBagLayout) getLayout()).setConstraints(TxtPWD, GBC);add(TxtPWD);GBC.gridwidth = 1;GBC.weightx = 2;( (GridBagLayout) getLayout()).setConstraints(BtnConn, GBC);add(BtnConn);GBC.gridwidth = GridBagConstraints.REMAINDER;( (GridBagLayout) getLayout()).setConstraints(BtnClose, GBC);add(BtnClose);GBC.gridwidth = GridBagConstraints.REMAINDER;GBC.fill = GridBagConstraints.HORIZONTAL;( (GridBagLayout) getLayout()).setConstraints(lsArea, GBC);add(lsArea);}public boolean connect(String hostname, String uid,String pwd) {this.hostname = hostname;LblPrompt.setText("正在连接,请等待.....");try {aftp = new FtpClient(hostname);aftp.login(uid, pwd);aftp.binary();showFileContents();}catch (FtpLoginException e) {a = "无权限与主机:" + hostname + "连接!";LblPrompt.setText(a);return false;}catch (IOException e) {a = "连接主机:" + hostname + "失败!";LblPrompt.setText(a);return false;}catch (SecurityException e) {a = "无权限与主机:" + hostname + "连接!";LblPrompt.setText(a);return false;}LblPrompt.setText("连接主机:" + hostname + "成功!");return true;}public void stop() {try {aftp.closeServer();}catch (IOException e) {}}public void paint(Graphics g) {}public boolean action(Event evt, Object obj) { if (evt.target == BtnConn) {LblPrompt.setText("正在连接,请等待....."); if (connect(TxtHost.getText(), TxtUID.getText(), TxtPWD.getText())) {BtnConn.setEnabled(false);BtnClose.setEnabled(true);}return true;}if (evt.target == BtnClose) {BtnConn.enable(true);BtnClose.enable(false);LblPrompt.setText("与主机" + hostname + "连接已断开!");return true;}return super.action(evt, obj);}public boolean sendFile(String filepathname) { boolean result = true;if (aftp != null) {LblPrompt.setText("正在粘贴文件,请耐心等待....");String contentperline;try {a = "粘贴成功!";String fg = new String("\");int index = stIndexOf(fg);String filename = filepathname.substring(index + 1);File localFile;localFile = new File(filepathname); RandomAccessFile sendFile = new RandomAccessFile(filepathname, "r");//sendFile.seek(0);outs = aftp.put(filename);outputs = new DataOutputStream(outs); while (sendFile.getFilePointer() < sendFile.length()) {ch = sendFile.read();outputs.write(ch);outs.close();sendFile.close();}catch (IOException e) {a = "粘贴失败!";result = false;}LblPrompt.setText(a);showFileContents();}else {result = false;}return result;}public void showFileContents() {StringBuffer buf = new StringBuffer();lsArea.setText("");try {ins = aftp.list();while ( (ch = ins.read()) >= 0) { buf.append( (char) ch);}lsArea.appendText(buf.toString());ins.close();}catch (IOException e) {}}public static void main(String args[]) { Frame f = new Frame("FTP Client");f.addWindowListener(new WindowAdapter() {public void windowClosing(WindowEvent e) { System.exit(0);}});FTP ftp = new FTP();ftp.init();ftp.start();f.add(ftp);f.pack();f.setVisible(true);}}2楼 2004-10-13 08:56 angel7532 [引用] [回复]这个是HTML网页<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>FTP下载 </title><script type="text/javascript">var javawsInstalled = false;var isIE = false;var isICE = erAgent.indexOf("ICEBrowser") >=0;if (navigator.mimeTypes && navigator.mimeTypes.length) javawsInstalled = navigator.mimeTypes['application/x-java-jnlp-file'];elseisIE = true;function insertLink(url, name) {if (javawsInstalled) {document.write("<a href="" + url + "">" + name + " </a>");} else {if (isICE) {document.write("JBuilder's Web View does not support Web Start (no appropriate Web Start plugin is available). ");document.write("Other popular (external) browsers are supported");} else {document.write("Need to install Java Web Start");}document.write(" -- for more information, visit");document.write("<a href="/products/javawebstart/">" );document.write("the Java Web Start page");document.write(" </a>");}}</script><script type="text/vbscript">on error resume nextIf isIE ThenIf Not(IsObject(CreateObject("JavaWebStart.IsInstalled"))) ThenjavawsInstalled = falseElsejavawsInstalled = trueEnd IfEnd If</script></head><body><h1>Java Web Start application </h1> <script type="text/javascript"><!--insertLink("FTPEXE.jnlp","FTP下载");// --></script><noscript><a href="FTPEXE.jnlp">FTP下载 </a></noscript></body></html>3楼 2004-10-13 09:21 szabo [引用] [回复]angel7532(卡卡西):哪我服务器上要不要作一些配置或安装其他软件呢?4楼 2004-10-15 09:30 szabo [引用] [回复] 不能沉啊。

使用 JavaScript 实现网页的缩放效果

使用 JavaScript 实现网页的缩放效果

使用 JavaScript 实现网页的缩放效果在现代互联网时代,网页的适配已经成为一个重要的问题。

不同的设备和屏幕尺寸要求网页能够自动适应并提供最佳的浏览体验。

其中,网页的缩放效果是一种常见的适配方式,通过改变网页的大小来适应不同的屏幕尺寸。

本文将介绍如何使用 JavaScript 实现网页的缩放效果。

一、获取屏幕尺寸和网页元素在实现网页缩放效果之前,我们首先需要获取屏幕的尺寸和需要缩放的网页元素。

通过 JavaScript 的内置对象 `window`,我们可以轻松地获取到屏幕的宽度和高度,如下所示:```javascriptvar screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;```同时,我们也需要获取到需要缩放的网页元素,可以通过 `document` 对象的`getElementById` 方法或其他选择器来获取到指定的元素,如下所示:```javascriptvar targetElement = document.getElementById("target");```二、计算缩放比例在获取到屏幕尺寸和网页元素之后,我们需要计算缩放比例。

缩放比例可以通过屏幕的宽度与网页元素的宽度之比来计算,如下所示:```javascriptvar scale = screenWidth / targetElement.offsetWidth;```三、应用缩放效果有了缩放比例后,我们可以通过设置CSS 的`transform` 属性来应用缩放效果。

html中图片自适应浏览器和屏幕,宽度高度自适应

html中图片自适应浏览器和屏幕,宽度高度自适应

html中图⽚⾃适应浏览器和屏幕,宽度⾼度⾃适应1、(宽度⾃适应):在⽹页代码的头部,加⼊⼀⾏viewport元标签。

<meta name="viewport" content="width=device-width,initial-scale=1"/>viewport是⽹页默认的宽度和⾼度,上⾯这⾏代码的意思是,⽹页宽度默认等于屏幕宽度(width=device-width),原始缩放⽐例(initial-scale=1)为1.0,即⽹页初始⼤⼩占屏幕⾯积的100%。

2、(字体⾃适应):字体也不能使⽤绝对⼤⼩(px),⽽只能使⽤相对⼤⼩(em)。

body {font: normal 100% Helvetica, Arial,sans-serif;}3、(流动布局):各个区块的位置都是浮动的,不是固定不变的。

.main {float: right;width: 70%; }.leftBar {float: left;width: 25%;}float的好处是,如果宽度太⼩,放不下两个元素,后⾯的元素会⾃动滚动到前⾯元素的下⽅,不会在⽔平⽅向overflow(溢出),避免了⽔平滚动条的出现。

4、(⾃适应⽹页设计):的核⼼,就是CSS3引⼊的MediaQuery模块。

它的意思就是,⾃动探测屏幕宽度,然后加载相应的CSS⽂件。

<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css"/>上⾯的代码意思是,如果屏幕宽度⼩于400像素(max-device-width: 400px),就加载tinyScreen.css⽂件。

Vue实现图片预览效果实例(放大、缩小、拖拽)

Vue实现图片预览效果实例(放大、缩小、拖拽)

Vue实现图⽚预览效果实例(放⼤、缩⼩、拖拽)前⾔这张图是显⽰的图⽚放⼤的⼀个预览情况,这⾥是参考预览操作实现的⼀个背景为⿊⾊的部分,上层的图⽚可实现滚轮放⼤或者点击上部的放⼤镜图标进⾏放⼤,代码是基于Ant Design Vue框架的基础上这⾥先分解部分,后⾯有全部代码1.需要有⿊⾊背景⽤于预览背景:这⾥的背景要占满整个屏幕(这⾥的⼀般是参考其他插件预览的样式进⾏模拟设计的),样式在后⽅代码内2.展⽰图⽚并且把图⽚展⽰到背景板最中间。

3.最重要的下⽅的两部分:滚轮放⼤缩⼩图⽚:bbimg() {let e = e || window.eventthis.params.zoomVal += e.wheelDelta / 1200if (this.params.zoomVal >= 0.2) {this.test = `transform:scale(${this.params.zoomVal});`} else {this.params.zoomVal = 0.2this.test = `transform:scale(${this.params.zoomVal});`return false}},图⽚拖拽:imgMove(e) {console.log('e', e)let oImg = e.targetlet disX = e.clientX - oImg.offsetLeftlet disY = e.clientY - oImg.offsetTopconsole.log('disX', disX)document.onmousemove = (e) => {e.preventDefault()let left = e.clientX - disXlet top = e.clientY - disYthis.test = this.test + `left: ${left}px;top: ${top}px;`}document.onmouseup = (e) => {document.onmousemove = nulldocument.onmouseup = null}},这⾥的test和classStyle是作为图⽚的动态样式,虽然名字起得着急,但是不影响使⽤整体实现的功能:1. 点击图⽚,可以进⾏滚轮放⼤及缩⼩,2. 点击后按压左键可进⾏拖拽查看图⽚3. 点击上⽅的放⼤及缩⼩图标也可以进⾏放⼤等操作,4. 点击 x 可关于预览5. 点击关闭后,恢复⼤⼩,避免点击其他照⽚影响⼤⼩下⾯是全部实现代码:<template><a-card style="width: 100%"><div><img:src="file"alt=""@click="handlePhotoShow(file)"/><!-- preview="0"preview-text="图⽚" --></div><div class="showImg" v-if="pictShow" @mousewheel="bbimg(this)"><div class="setting_box"><a-iconclass="setting_zoom"v-if="zoomInShow == false"type="zoom-in"@click="handleZoomIn"/><a-iconcolor="#fff"class="setting_zoom"v-if="zoomInShow == true"type="zoom-out"@click="handleZoomOut"/><a-icon color="#fff" class="setting_close" type="close" @click="handleClose" /> </div><img :src="file" alt="" :class="classStyle" :style="test" @mousedown="imgMove" /> </div></a-card></template><script>export default {data() {return {test: '',pictShow: false,zoomInShow: false,params: {zoomVal: 1,left: 0,top: 0,currentX: 0,currentY: 0,flag: false,},file: '',}},computed: {classStyle() {return this.zoomInShow ? 'a1' : 'a2'},},methods: {// 实现图⽚放⼤缩⼩bbimg() {let e = e || window.eventthis.params.zoomVal += e.wheelDelta / 1200if (this.params.zoomVal >= 0.2) {this.test = `transform:scale(${this.params.zoomVal});`} else {this.params.zoomVal = 0.2this.test = `transform:scale(${this.params.zoomVal});`return false}},// 实现图⽚拖拽imgMove(e) {console.log('e', e)let oImg = e.targetlet disX = e.clientX - oImg.offsetLeftlet disY = e.clientY - oImg.offsetTopconsole.log('disX', disX)document.onmousemove = (e) => {e.preventDefault()let left = e.clientX - disXlet top = e.clientY - disYthis.test = this.test + `left: ${left}px;top: ${top}px;`}document.onmouseup = (e) => { document.onmousemove = null document.onmouseup = null}},handleZoomIn() {this.zoomInShow = true},handleZoomOut() {this.zoomInShow = false},handlePhotoShow(file) {console.log('file', file)this.file = filethis.pictShow = true},handleClose() {this.pictShow = falsethis.test = `transform:scale(1)`},},}</script><style scoped lang="less">.showImg {width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 1);position: fixed;*position: absolute;z-index: 20;margin: 0 auto;top: 0;left: 0;display: flex;justify-content: center;align-items: center;.setting_box {width: 100%;height: 50px;line-height: 50px;font-size: 20px;background-color: rgba(0, 0, 0, 0.3); position: absolute;top: 0;z-index: 999;.setting_zoom,.setting_close {position: absolute;z-index: 1000;top: 20px;color: #fff;opacity: 1;}.setting_zoom {right: 50px;}.setting_close {right: 10px;}}}.a1 {max-width: 200vw;max-height: 180vh;position: absolute;z-index: 22;margin-top: 40px;cursor: move;}.a2 {max-width: 95vw;max-height: 90vh;position: absolute;z-index: 22;margin-top: 40px;cursor: move;}.zoom-box {cursor: zoom-in;}.photo_box {margin: 0 5px 5px 0;}</style>因为具体也是查看了很多博客等资源最后完成的。

用HTML5实现鼠标滚轮事件放大缩小图片的功能

用HTML5实现鼠标滚轮事件放大缩小图片的功能

⽤HTML5实现⿏标滚轮事件放⼤缩⼩图⽚的功能你我都知道在HTML5⽹页中添加⿏标滚轮事件能够更好的让⽤户与⽹页进⾏交互操作。

⽽在HTML5中,⿏标滚轮并不仅仅就只能上下滑动⽹页,实际上你还可以依靠这个完成更多的功能,⽐如视野平⾯的放⼤与缩⼩。

⼤部分浏览器都是⽀持⿏标滚轮事件的,所以你可以先订阅⿏标滚轮事件的⽅法,每当事件被触发时,你能获取⼀个名为wheelDelta 的属性,它代表刚才⿏标滚轮改变的⼤⼩,其中正值表⽰滚轮往下滑动,负值表⽰滚轮往上滑动。

数值的绝对值越⼤,滑动范围越⼤。

但不幸的是依然有⼀款浏览器是不⽀持⿏标滚轮事件的。

那就是FireFox。

Mozilla 已经实现了⼀个名为"DOMMouseScroll"的事件的处理,它会传递⼀个名为 event 且附带了名为 detail 属性的事件参数过来,然⽽,这个 detail 属性不同于wheelDelta,它只能返回正值,即只能坚持⿏标滚轮向下滚动的值。

你应该特别注意⼀下,Apple公司在Safari浏览器中也禁⽤了⿏标滚动控制页⾯上下滑动,但是此功能依然在webkit引擎中正常使⽤的,所以你写的代码是不会触发什么问题的。

添加⿏标滚轮事件处理⽅法⾸先我们在⽹页中添加⼀个图⽚,待会就能⽤⿏标滚轮控制此图⽚的缩放XML/HTML Code复制内容到剪贴板1. <img id="myimage" src="myimage.jpg" alt="my image" />现在来添加⿏标滚轮事件处理代码XML/HTML Code复制内容到剪贴板1. var myimage = document.getElementById("myimage");2. if (myimage.addEventListener) {3. // IE9, Chrome, Safari, Opera4. myimage.addEventListener("mousewheel", MouseWheelHandler, false);5. // Firefox6. myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);7. }8. // IE 6/7/89. else myimage.attachEvent("onmousewheel", MouseWheelHandler);为了让不同浏览器都能⽀持的处理做法在下⾯这个案例中,我们将对Firefox的detail值取反然后返回1或者-1的其中⼀个XML/HTML Code复制内容到剪贴板1. function MouseWheelHandler(e) {2. // cross-browser wheel delta3. var e = window.event || e; // old IE support4. var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));现在我们直接决定图⽚的⼤⼩范围。

div+css怎么让图片自适应大小

div+css怎么让图片自适应大小
例: <div style="width:50%; height:50%; "> <img src="img/0.jpg" width="100%" height="100%" style="max-height:343px; max-width:571px;" /> </div> 插入图片的信息设置: <img src="img/0.jpg" width="100%" height="100%" style" />
您使用的浏览器不受支持建议使用新版浏览器
div+css怎 么 让 图 片 自 适 应 大 小
意思是图片能百分百显示在容器里,这个容器可以是table的td,也可以是DIV。以下用div做容器来说明。 图片随页面的变化而变化,那么最好把div的宽度设置成百分比,而不是像素,这样div就不会被固定大小,从而能自适应页面的大小。 <div style=" width="x%"> <!-------x%你可以自己设置,比如50%,80%,100%等--------> <img style=" width="100%" src="图片路径" /> </div>

vue图片放大和缩小的方式

vue图片放大和缩小的方式

vue图⽚放⼤和缩⼩的⽅式⼀、使⽤vue-directive-image-previewer1、安装命令npm install vue-directive-image-previewer -D2、引⼊main.jsimport VueDirectiveImagePreviewer from 'vue-directive-image-previewer'import 'vue-directive-image-previewer/dist/assets/style.css'e(VueDirectiveImagePreviewer)3、在页⾯中使⽤<img v-image-preview src =“url” />经过以上操作就可以了,但是⽬前仅⽀持放⼤图⽚,⽐较可惜。

4、卸载vue-directive-image-previewercnpm uninstall vue-directive-image-previewer⼆、使⽤viewerjs1、安装命令npm install v-viewer --save2、全局引⼊import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'e(Viewer)Viewer.setDefaults({Options: {'inline': true, // 启⽤ inline 模式'button': true, // 显⽰右上⾓关闭按钮'navbar': true, // 显⽰缩略图导航'title': true, // 显⽰当前图⽚的标题'toolbar': true, // 显⽰⼯具栏'tooltip': true, // 显⽰缩放百分⽐'movable': true, // 图⽚是否可移动'zoomable': true, // 图⽚是否可缩放'rotatable': true, // 图⽚是否可旋转'scalable': true, // 图⽚是否可翻转'transition': true, // 使⽤ CSS3 过度'fullscreen': true, // 播放时是否全屏'keyboard': true, // 是否⽀持键盘'url': 'data-source' // 设置⼤图⽚的 url}})3、页⾯中使⽤<viewer><img :src="record.PreviewFileUrl"style="width:80px;height:45px;"alt=""title="点击放⼤" /></viewer>。

C#编程实现图片的打开、放大、缩小

C#编程实现图片的打开、放大、缩小

C#编程实现图片的打开、放大、缩小一、调用打开文件对话框1.选用openfiledialog1对话框控件。

2.定义一个文件名称,例如: private string FileName;3.代码调用openFileDialog1.Filter = "所有图像文件(*.bmp;*.gif.;*.jpg)|*.bmp;*.gif;*.jpg";openFileDialog1.Title = "打开文件"; //文件过滤;openFileDialog1.ShowDialog(); //打开对话框;FileName = openFileDialog1.FileName; //对fileName进行赋值;if (FileName != "") //对filename进行判断,不为空的情况下在picturebox中打开图片{FileName = openFileDialog1.FileName;Bitmap pic = new Bitmap(FileName);pictureBox1.Image = pic;}二、图片放大缩小时自动产生滚动条1.选用Panel控件,调整控件大小位置合适,并将Autoscroll属性更改为TRUE。

2.将picturebox控件拖放到panel控件上,可根据自己的需要选择picturebox的AutoMode属性。

//图片放大代码int x, y;x = pictureBox1.Location.X - 5;if (pictureBox1.Location.Y <= 0){y = 0;}else{y = pictureBox1.Location.Y - 4;}pictureBox1.Location = new Point(x, y);pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;pictureBox1.Size = new Size(pictureBox1.Width + 10, pictureBox1.Height + 14);//图片缩小代码int x, y;x = pictureBox1.Location.X + 5;if (pictureBox1.Location.X < 300){y = 0;}else{y = pictureBox1.Location.Y + 4;}pictureBox1.Location = new Point(x, y);pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;pictureBox1.Size = new Size(pictureBox1.Width - 10, pictureBox1.Height - 14);。

WPf图片的放大缩小移动

WPf图片的放大缩小移动

WPF下实现图片的放大缩小移动在windows 7里面有自带的图片查看器,这个软件可以打开一张图片然后以鼠标在图片中的焦点为原点来进行缩放,并且放大后可以随意拖动。

下面我们在WPF中实现这个功能。

在实现这个功能之前先说下使用的主要函数和步骤ScaleTransform:进行缩放的函数。

TranslateTransform:进行平移的函数。

:缩放图片后,把缩放后图片上的坐标转换为在原始图片的坐标,从而使图片正常缩放。

·步骤如下:1. 定义一个TranslateTransform实例来修改图片显示的起始位置。

2.定义一个ScaleTransform实例来缩放图片的大小,你可以通过设置CenterX和CenterY的值来指定图片缩放的原点。

这里使用来转换放缩原点3.将两个Transform放到一个TransformGroup里面,这样Image控件就可以在显示的时候综合使用两个Transform的效果了。

4.将TransformGroup放到当前窗体的Resource里面,这样窗体里面所有的Image控件都可以引用到这个实例。

5.在鼠标移动事件里面修改TranslateTransform对应的值。

·XAML代码:<Grid x:Name="IMG" Width="500" Height="300" Background="Black"><><TransformGroup x:Key="Imageview"><ScaleTransform/><TranslateTransform/></TransformGroup></>// 创建TransformGroup 集合,设立关键Key,并加入缩放和移动时所需函数。

CSS实现放大缩小关闭按钮(实例代码)

CSS实现放大缩小关闭按钮(实例代码)

CSS实现放⼤缩⼩关闭按钮(实例代码)这种效果最常见是在我们的浏览器页⾯上,先给⼤家展⽰效果图:如上图所⽰,使⽤CSS 绘制上述三个按钮:<template><div class="windowAction"><button class="min">缩⼩</button><button class="fullpage">放⼤</button><button class="close">关闭</button></div></template><script>export default {data() {return {flag_fullpageWebView: 1};}};</script><style lang="scss" scoped>.windowAction {margin-top: -5px;-webkit-app-region: no-drag;min-width: 70px;text-align: right;button {&:hover {color: #a8aabd;}}.min {width: 14px;height: 14px;background-color: transparent;font-size: 0;margin-right: 18px;position: relative;color: #878896;&:after {content: "";width: 100%;position: absolute;left: 0;bottom: 0;border-bottom: 2px solid;}}.fullpage {width: 16px;height: 16px;color: #878896;border: 2px solid;background-color: transparent;font-size: 0;margin-right: 18px;}.close {width: 18px;height: 18px;font-size: 0;background-color: transparent;position: relative;color: #878896;transform: rotate(45deg) translate(-2px, 2px);&:before,&:after {content: "";position: absolute;}&:before {width: 100%;left: 0;top: 50%;transform: translateY(-50%);border-top: 2px solid;}&:after {height: 100%;left: 50%;top: 0;transform: translateX(-50%);border-left: 2px solid;}}}</style>总结以上所述是⼩编给⼤家介绍的CSS实现放⼤缩⼩关闭按钮,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

可控制网页中图片自由缩放代码
网页中控制图片缩放代码,一般情况下,是很难做到这一点的,因为小图从数据库调用出来的时候小,而当调用的图片是高清的数码照时,你才知道那有多头痛,完全把Tabel挤得不像人样,全挤破了,难看得不敢见人啊,要把图片控制在一定的规格里缩放,我想到的是用JavaScript,终于写出来了,测试了N多回才成功的,请看代码:
网页前边加(注意JavaScript是区分大小写的,我最不喜欢就他这一点,你们不用注意了,我已经写好测试完了才发出来共享的,直接复制一点问题都没有)
<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD){
var image=new Image();
var iwidth = 480; //定义允许图片宽度
var iheight = 530; //定义允许图片高度
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>
在body里显示图片时
<img src="图片调用路径.jpg" border=0 >
OK,就这样搞定了,那不管是小图还是大图,也只能在480X530里游动啦!。

相关文档
最新文档