zoukankan      html  css  js  c++  java
  • 自适应图片大小的弹出窗口

    <script language="javascript" type="text/javascript">
    <!--
    var imgObj;
    function checkImg(theURL,winName){
    // 对象是否已创建
    if (typeof(imgObj) == "object"){
    // 是否已取得了图像的高度和宽度
    if ((imgObj.width != 0&& (imgObj.height != 0))
    // 根据取得的图像高度和宽度设置弹出窗口的高度与宽度,并打开该窗口
    //
     其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
    OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20+ ",height=" + (imgObj.height+30));
    else
    // 因为通过 Image 对象动态装载图片,不可能立即得到图片的宽度和高度,所以每隔100毫秒重复调用检查
    setTimeout("checkImg('" + theURL + "','" + winName + "')"100)
    }

    }


    function OpenFullSizeWindow(theURL,winName,features) {
    var aNewWin, sBaseCmd;
    // 弹出窗口外观参数
    sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
    // 调用是否来自 checkImg 
    if (features == null || features == ""){
    // 创建图像对象
    imgObj = new Image();
    // 设置图像源
    imgObj.src = theURL;
    // 开始获取图像大小
    checkImg(theURL, winName)
    }

    else{
    // 打开窗口
    aNewWin = window.open(theURL,winName, sBaseCmd + features);
    // 聚焦窗口
    aNewWin.focus();
    }

    }

    //-->
    </script>
    使用时将上面的代码放在网页文档的<head></head>标记对中,然后在链接的点击事件中调用OpenFullSizeWindow函数,如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
  • 相关阅读:
    应用服务器性能优化总结
    Web性能优化:图片优化
    图片优化
    浏览器端的九种缓存机制介绍
    MySQL 与 MongoDB的操作对比
    js类型判别大合集
    节流函数和防抖函数的注意事项
    前端和后端交互的方式
    js中关于假值和空数组的总结
    LeetCode 367. 有效的完全平方数
  • 原文地址:https://www.cnblogs.com/ghd258/p/253311.html
Copyright © 2011-2022 走看看