JS&RE 控制图片显示大小, 弹出窗口自适应大小,自居中, 结合UBB与正则使用 By Stabx

原创 2006年05月24日 18:36:00
标题: JS&RE 控制图片显示大小, 弹出窗口自适应大小,自居中, 结合UBB与正则使用 By Stabx
正文:

QUOTE:


实现功能:
1. 图片宽度如果大于 ##, 则显示为 ##, 小于则显示为默认. /Javascript 
2. 点击图片弹出图片链接, 窗口自动适应图片大小, 并且弹出窗口居中显示. /Javascript
注: 可在页面上使用任何次数, 不需指定ID.

其他:
1. 正则替换 UBB 输入格式的图片地址为 热链接 /Regular Expression - encode
2. 正则解码 HTML IMG 标签. /Regular Expression - decode 

shawl.qiu 
2006-5-24

 

CODE:

Javascript 函数:

 

 

CODE:

正则替换:


//这是 ASP VBSCRIPT 中的正则
Regular Expression:
1. 正则替换 UBB IMG 标签为 HTML IMG 标签:
正则内容:
         re.Pattern = "/[img/]((http/:////)|())(.*?)/[//img/]"
         str = re.Replace(str,"<img onload=""this.width=show(this.width)"" onClick=""openautosize(this.src)"" src=$2$3$4>") 

2. 正则解码 HTML IMG 标签为 UBB IMG 标签
正则内容:
         re.Pattern = "<img.*?src=(.*)?/>"
         Str = re.Replace(Str,"[img]$1[/img]")

注: 使用正则特别特别要注意的就是各个正则的使用顺序.

 

 


<script LANGUAGE="JAVASCRIPT">
     //检查图片大小是否大于预期大小, 大于则显示为预期大小
     function show(chkw) { //chk size
                 if(chkw>500) {
                     chkw=500;
                     }
                 else {
                     chkw=chkw;
                 }
                 return chkw;
             }//script by shawl.qiu
     //example: <img src="images/03.jpg" onClick="openautosize(this.src)" onload="this.width=show(this.width)">
    
     //弹出窗口, 自适应图片大小,并自动居中显示
     function openautosize(ourl) { //ourl 为接收图片地址
             dimg = new Image(); //建立图像对象
             dimg.src = ourl; //确定图像地址
             w = dimg.width ; //图像宽度
             h = dimg.height; //图像高度
             x = (screen.width - w) / 2; //减去图片宽度, 然后宽/2
             y = (screen.height - h) / 2; //减去图片高度, 然后宽/2
             window.open(ourl,"newwindow","location=1,width="+w+",height="+h+",top="+y+",bottom="+y+",left="+x+",right="+x) ;
         }//shawl.qiu script
     //example:  <img src="images/03.jpg" onClick="openautosize(this.src)" onload="this.width=show(this.width)">
</script>

示例:
               <img src="images/03.jpg" onClick="openautosize(this.src)" onload="this.width=show(this.width)" ><br>
         <img src="images/01.jpg" onClick="openautosize(this.src)" onload="this.width=show(this.width)" >

相关文章推荐

JS实现图片居中且大小自适应

  • 2017年05月11日 13:35
  • 2KB
  • 下载

图片映射(HTML Map)自适应窗口大小,再也不用为匹配尺寸而发愁了

在上一节图片映射那么拽中,我们讲了图片映射的使用方法,然而很多小伙伴们抱怨图片不能根据页面的窗口调整而自适应,图片地图成了摆设,今天给大家分享一个插件,有了它,小伙伴们再也不用担心图片地图走错门了。话...
  • shehun1
  • shehun1
  • 2014年04月11日 22:10
  • 14233

点击一个超链接,弹出固定大小的新窗口(js实现)

1、最基本的弹出窗口代码                 因为这是一段javascripts代码,所以它们应该放在标签和</script>之间。是对一些版本低的浏览器起作用,在这些老浏览器...

jQuery自适应窗口大小导航菜单

  • 2015年12月30日 15:39
  • 40KB
  • 下载

自适应窗口大小,兼容各浏览器

  • 2011年07月31日 11:48
  • 421KB
  • 下载

Qt实现图像自适应窗口大小之scaled()函数使用

很多应用都需要显示图片,比如视频类应用、拍照类应用,但是在大数情况下用户都会改变窗口大小, 以获得最佳效果,在Qt中如果只设置了显示图片而没有对自适应窗口做出设置,用户拖拽边框的时候, 整个控...

自适应父窗口大小的例子

  • 2015年08月06日 17:02
  • 9.76MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS&RE 控制图片显示大小, 弹出窗口自适应大小,自居中, 结合UBB与正则使用 By Stabx
举报原因:
原因补充:

(最多只允许输入30个字)