• 今日工作心得——javascript结合jquery使图片适应窗口大小


    今天做“公共通知管理”的功能时,想实现一个效果就是点击通知标题,弹出一个窗口对该通知的内容进行预览,进而方便管理。因为通知一般比较简单所以限定了弹出窗口的大小,但是这种情况下一些有较大图片的通知页面会被挣得变形,因此需要对较大的图片进行控制使其适应窗口的大小。

    考虑采用js实现,因为js的功底不是很扎实,好多都是对照的网上的方法实现的,做个记录,方便以后查找。

    首先是弹出窗口的部分

    使用的window.open()函数,这个函数有n多的参数,一时记不住,每次都是用的时候网上查,整理一下方便以后使用:

      alwaysLowered yes/no 指定窗口隐藏在所有窗口之下。

      alwaysRaised yes/no 指定窗口浮在所有窗口之上。

      dependent yes/no 指定打开的窗口为父窗口的一个子窗口。并随父窗口的关闭而关闭。

      directions yes/no 指定Navigator 2和3的目录栏是否在新窗口中可见。

      height pixel value 设定新窗口的像素高度。

      hotkeys yes/no 在没有菜单栏的新窗口设置安全退出热键。

      innerHeight pixel value 设置新窗口中文档的像素高度。

      innerWidth pixel value 设置新窗口中文档的像素宽度。

      location yes/ no 指明地址栏在新窗口中是否可见。

      menubar yes /no 指明菜单栏在新窗口中是否可见。

      outerHeight pixel value 设定窗口(包括装饰边框)的像素高度。

      outerWidth pixel value 设定窗口(包括装饰边框)的像素宽度。

      resizable yes /no 指明新窗口是否可以调整。

      screenX pixel value 设定新窗口离屏幕边界的像素长度。

      screenY pixel value 设定新窗口离屏幕上边界的像素长度。

      scrollbars yes /no 指明滚动栏在新窗口中是否可见。

      status yes /no 指明状态栏在新窗口中是否可见。

      titlebar yes /no 指明菜单题目栏在新窗口是否可见。

      toolbar yes /no 指明工具栏在新窗口中是否可见。

      Width pixel value 设定窗口的像素宽度。

      z-look yes /no 在文档中包含各个 <pplet>标签的数组。

      fullscreen yes / no 打开的窗体是否进行全屏显示

      left pixel value 设定新窗口距屏幕左方的距离

      top pixel value 设定新窗口距屏幕上方的距离

    然后是在新窗口弹出时控制一下里边的图片大小,使用了如下代码:

    代码
        <script language="javascript" type="text/javascript" src="../JS/jquery.js"></script>
        <script language="javascript" type="text/javascript">
        $(
            
    function()
            {
               
    var $imgs = $("img");
               
    for(var i=0;i<$imgs.length;i++)
                {
                  
    if($imgs[i].width>document.body.clientWidth)
                  {                 
                    $imgs[i].height
    =$imgs[i].height*((document.body.clientWidth-80)/$imgs[i].width);
                    $imgs[i].width=document.body.clientWidth-80;
                    $imgs[i].onclick
    =function(){window.open(this.src)};
                    $imgs[i].title
    ="点击查看大图";
                    $imgs[i].style.cursor
    ="pointer";
                  }
                }
            }
          )    
        
    </script>

    代码比较简单,但在开始写的时候有基础知识不扎实,出了不少的麻烦。以下的问题需要注意

    1.jQuery的标签选择符,""里边就加标签名就ok,$("img").

    2.$("img")选择出来的数组的长度length是小写,开始用大写就不行了

    3.document.body.clientWidth表示的是文档的宽度,可以近似的作为窗口的宽度,它随着窗口大小的改变而改变。因此可以使用他与图片大小进行比较确定图片大小的值。

    4.screen.width等是指的浏览器的宽度。在这里不适用

    5.DOM元素的属性名称及大小写一定要记住,最烦的事了啊……

  • 相关阅读:
    python 不可变类型
    python 不定长参数
    Codeforces Round #749
    [提高组集训2021] Round1
    AtCoder Regular Contest 128
    [提高组互测] Day6
    [提高组互测] Day5
    [提高组互测] Day1
    [提高组互测] Day2
    [提高组集训2021] 一拳超人
  • 原文地址:https://www.cnblogs.com/yuanyuan/p/1677341.html
Copyright © 2020-2023  润新知