Rumah > Artikel > hujung hadapan web > JavaScript使用三种方式实现修改图象大小详解
JavaScript使用三种方式实现修改图象大小详解
- 黄舟asal
- 2017-07-26 13:57:061607semak imbas
大家知道，丰富多彩的Web网络课件离不开图片的支持，图像在增加网页生动性的同时，也增加了网页的大小，使下载速度减慢。在网站中如何让一图片能以适当大小在页面上显示是值得研究的问题。为此，笔者把自己的一些经验写出来供广大从事脚本编写者参考，以此共勉。
需求分析：本网站采用新闻管理系统，首页新闻栏目中，需要从数据库中调用图片文件作为图片新闻中的图片，从而形成文字绕排形式。根据布局需要，图片的宽度不能超过200px。
要让图片能以适当大小显示的问题，实质是一个大图片等比例缩小的问题。如何通过图像的URL获得图像的大小（width,height）是问题的关键，假设k=Width/Height表示图像的比例值，当K>=1时，只要width不超过200px，则height一定70bab0ba7e2687fddc390ea8334f0c3f=1限定width，K74529a984a411188a2f12277e585fc9f中的ID，定义图的宽度和高度
页面的873c4d80998f5627c84fe017b9b46671元素可以定义其显示范围，即图的高度Height和宽度（Width）。处理事件触发时，动态地改变图的两个属性就可达到效果。
<script>
functionshow()
{var w,h;
var k;
var con;
w=smallslot.width;
h=smallslot.height;
k=w/h;
if(k>=1){
if (w>=200){
w=200;
h=w/k;
}}
else
{if(h>=150){
h=150;
w=k?h;
}
}
return w;
}
</script>
<imgborder=0 ID="smallslot" src="4.jpg" onload="javascript:width=x;"align="left">
<script languge="javascript">
varx=show();
</script>在这段代码中，将处理后的图像的width作为show()函数的返回值。在873c4d80998f5627c84fe017b9b46671中用onload事件调用图像的Width。
问题：首页上的图片新闻中图片没有显示，单击地址栏中的“转到”按钮，才能正常显示。实践告诉我又一次失败！因为上网者惟一习惯做的是输入网址、键入回车这两个动作。 在此基础上，笔者做了以下尝试： （1）93f0f5c25f18dab9d176bd4f6de5d30e和9c3bca370b5104690d9ef395f2c5f8d1之间加入“e5e2c15931610f9f2b0a8fbd6773405a”。每隔10秒自动刷新屏幕，结果图片能正常显示，但不断刷屏让视觉很不舒服。 （2）window.location.reload()重新装载页面，可是结果是一直处于装载页面过程中，使网页不能正确显示。 （3）e99ba76f4b23f69032b64306ab7dbacd200) this.width=200;"align="left">，测试能够通过，但如果图像width22212fe5a72ff2fc170b229a64c8e5d5200px，则页面显示效果为高度超过150。这样如果没有K=width或者K=height的约束，页面效果是不合理的，因此不能采用。
方案三：将873c4d80998f5627c84fe017b9b46671中的Onload()事件放到ff8b6c3e371e9f96acceec65cada5d84中完成装载页面时事件的触发
仔细分析方案二，笔者发现主要原因是onload事件是页面载入时触发的事件。Onload在9617a69a9711c47d4c7e5f42d8a4909e元素中使用，当IE解释到此处，需装载页面才能触发“javascript:width=x;”，因此要重新装载页面才能显示图片。另外，Onload()一般用在9c5594a5fc8d2e506f1a8147102c836b元素中，预先完成装载页面时触发的事件。所以，我将873c4d80998f5627c84fe017b9b46671中的Onload()事件放到了9c5594a5fc8d2e506f1a8147102c836b中去，代码如下：
<body onload="window.smallslot.width=show();">
<script>
function show()
{…..
//show()
}
</script>
<img border=0 ID="smallslot"src="1.jpg" align="left">
this is atest! 再次测试，通过了，而且首页调用成功！我成功了！ 经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。
Atas ialah kandungan terperinci JavaScript使用三种方式实现修改图象大小详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!