单击图片放大实例

使用wode另存为web页的功能，都会出现类似下列的结构
<p class=MsoNormal align=center style='text-align:center'>
<span lang=EN-US>

<![if !vml]>
<img onclick="fangda_x(this)"  width=387 height=115 src="./9070500.files/image037.jpg" v:shapes="_x0000_i1040">
<![endif]>
</span>
</p>
其中：

<![if !vml]>  若不支持vml
<![endif]>
注：vml是w3c组织的平面矢量图标准，目前ws对其支持不力，但在office及word中对其有所扩展。

使用时必须有下面的声明
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/tr/rec-html40">
<head>
<style>
v\:* {behavior:url(#default#vml);}
o\:* {behavior:url(#default#vml);}
w\:* {behavior:url(#default#vml);}
.shape {behavior:url(#default#vml);}
</style>

在你的应用中，由于只对img标签进行了处理，而未对支持vml的情况进行加工，所以就会出现你所遇到的情况。

解决的办法有二：
1。去处所有与vml相关的内容。优点是体积变小，缺点是有可能造成显示格式的变化
2。对vml相关部分增加相应处理。优点是修改量小，确保样式，缺点是体积增大

在js文件中增加一个函数

function fangda(the) {
  var x_x=parseInt(the.style.width);
  var y_x=parseInt(the.style.height);
  var i_x=1.2;
  if (event.ctrlKey) {
    x_x=x_x/i_x;
    y_x=y_x/i_x;
  }else {
    x_x=x_x*i_x;
    y_x=y_x*i_x;
  }
  the.style.width=x_x;
  the.style.height=y_x;
}

对html文档的对应部分加入事件处理
<p class=MsoNormal align=center style='text-align:center'>
<span lang=EN-US>

<![if !vml]>
<img onclick="fangda_x(this)"  width=387 height=115 src="./9070500.files/image037.jpg" v:shapes="_x0000_i1040">
<![endif]>
</span>
</p>

注意：是加在标签v:shape里，而不是v:imagedata

没有相关文章

没有评论

单击图片放大实例

文章TOP15