处理图片的技巧

处理图片的技巧,第1张

概述以下代码都是从新版的动网论坛(DV7SP2)整理出来的。 <script>Function bbimg(o){var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';return false;}&...

以下代码都是从新版的动网论坛(DV7SP2)整理出来的。

<script>
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>

<%
Private Function bbimg(strText,ssize)
  Dim s
  s=strText
  Dim re
  Set re=new RegExp
  re.IgnoreCase =True
  re.Global=True
  re.Pattern="<img(.[^>]*)>"
  If ssize=500 Then  '显示贴子时默认宽度为500
   s=re.replace(s,"<img$1onmousewheel=""return bbimg(this)"" onload=""JavaScript:if(this.wIDth>screen.wIDth-"&ssize&")this.wIDth=screen.wIDth-"&ssize&";"">")
  Else  '显示签名图片
   s=re.replace(s,"<img$1onmousewheel=""return bbimg(this)"" onload=""JavaScript:if(this.wIDth>screen.wIDth-"&ssize&")this.wIDth=screen.wIDth-"&ssize&";if(this.height>100)this.height=100;"">")
  End If
  bbimg=s
End Function
%>

其中:onmousewheel=""return bbimg(this)"" 用于检测鼠标滚轮事件,bbimg函数实现图片大小随鼠标滚轮滚动而变大缩小。

不过,签名图片在某些情况下(高度大于100时)会被压扁,那是因为这行代码:if(this.height>100)this.height=100; 不知道为什么,宽度自动缩放会实现“锁定纵横比”效果,但是缩放高度却会把图片压扁(仅有部分图片会出现变形),目前有两个解决办法(可任选其一,以下代码文字来源于动网论坛,但我找不到是谁最先写出来的了):

1、修改if(this.height>100)this.height=100;  为:if(this.height>100)this.style.height=100; 

这样做可以保证大部分图片按比例缩放,只有少数特殊的图片会被变形。

2、修改if(this.height>100)this.height=100; 为:if (this.height>100){var rate=100 / this.height;this.style.wIDth=this.wIDth * rate;}

方法二的原理说明:其实就是一个算法,把高度的缩放改为宽度的缩放,因为无论什么图片对其wIDth进行缩放都不会造成变形(至少我还没有发现会变形的图片),所以想用哪个方法就由各位自己选择了。一般来说推荐第一个方法,如果发现还有图片缩小后变形,再试试第二个方法。

研究完了,马上在公司网站的文章系统上试一下(原来一直不知道怎么实现这一功能),效果果然不错!

总结

以上是内存溢出为你收集整理的处理图片的技巧全部内容,希望文章能够帮你解决处理图片的技巧所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/1210772.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-04
下一篇 2022-06-04

发表评论

登录后才能评论

评论列表(0条)

保存