首页导航栏 - 网络工程 | 网站建设 | 设计在线 | 精彩图片 | 职业前线 | 创业之路 | 启步工具 | 教程资讯 | 休闲娱乐
启步网 > 网站建设 > 网页制作
超强的控制图片大小的代码,适合各大系统
作者: 不详 阅读: 来源:落伍者 时间:2006-11-11 0:04:48
字体

    可自动控制图片大小,自动加新窗口打开链接,自动居中正文中的图片的强悍代码 ^_^

效果预览:

http://www.7ibu.com/pcenter/meinv/2006/1110/339.htm

使用方法:

保存下面代码为imgzoom.htc,找个目录放好,我是放在js目录下的;

或者点这里保存:

http://www.7ibu.com/js/imgzoom.htc 


<script language="javascript">
  var _width = element.width;
  var _hieght = element.height;
  var _maxpixel = _width;
  var _which = "w";
  var maxwidth = 700;
  var maxheight = 525;
 
  element.onmousewheel = test;
  if (element.width > maxwidth) {
    element.width = maxwidth;
    element.removeAttribute("height");
        }
   
        if (element.parentElement.tagName != "A"){   
             var _html = "";
             _html += "<div align=center><a href=\""+element.src+"\" target=\"_blank\">";
             _html += element.outerHTML;
             _html += "</a></div>";
             element.outerHTML = _html;
        }
  function test() {
    return zoomimg(element)
  }
function zoomimg(pic){
  var zoom=parseInt(pic.style.zoom,10)||100;
  zoom+=event.wheelDelta/12;
  if (zoom>0) pic.style.zoom=zoom+'%';
  return false;
}
</script>

第二步,在需要控制的页面(如TSYS的新闻页模板)里加入下面的代码,或者写到CSS里去,


<style type="text/css">
  #articlebody img {
    behavior: url("/js/imgzoom.htc");
  }
</style>

然后content显示的地方套个层,如:<div  id="articlebody">$content$content$lt;</div>
这样就OK了,很简单,具体大小设置可以在imgzoom.htc里修改相应代码,相信大家都看的懂,这是我目前发现的控制正文图片大小最好的了,有更好的,欢迎大家提供分享!~

另外,这段代码有个BUG,就是图片不能用<P>属性来控制,代码已经默认设置图片为居中了,比如说下面这段代码就会出现脚本错误.


<p align=center> <img src="http://www.im286.com/images/im286/logo.gif"> </p>

正确的应该是这样:


<img src="http://www.im286.com/images/im286/logo.gif"><br>

责任编辑:一路狂奔
帐号:
密码:

Google
Google提供的相关资源
参与评论(条评论)
请遵守国家法律
笔名:
邮箱:
( 以上评论仅代表网友个人意见,不代表本站观点 )
相关资源
  • 实用HTML文件的增强标记 [2007-2-25]
  • 网页素材地址资源大收集 [2007-2-13]
  • 影响SEO的页面制作细节 [2007-2-13]
  • 访客至上的网页设计秘笈 [2007-2-13]
  • 网页不需要漂亮 [2007-2-13]
  • 网页制作经典代码系列—翻牌的广告代码 [2007-2-7]
  • 网页制作经典代码系列—幻灯片广告样式1 [2007-2-7]
  • 网页制作经典代码系列专题 [2007-2-7]
  • 可翻页排序的表格:Make all your tables sortable [2007-2-1]
  • 几个很有特点的网页代码效果 [2007-2-1]
  •