zoukankan      html  css  js  c++  java
  • JavaScript 图片弹框显示

            function fnCreate(src) {

                /* 要创建的div的classname */
                var ClassName = "thumbviewbox" ;
     
                if (src == '' ) {
                    return false ;
                }
     
               /* 优先创建图片,如果图片没有加载成功,回调自己 */
                var img = document.createElement('img' );
                img.setAttribute( 'src', src);
             //显示图片的大小
                var imgwd = "300px" ;
                var imghg = "300px" ;
     
                if (imgwd < 1) {
                    var timer = setTimeout("fnCreate('" + src + "')", 100);
                    return false ;
                } else {
                    clearInterval(timer);
                }
     
                /* 清除已经弹出的窗口,防止冒泡 */
                em = document.getElementsByClassName(ClassName)
     
                for (var i = em.length - 1; i >= 0; i--) {
                    var p = em[i];
                    p.parentNode.removeChild(p);
                }
     
               /* 各项参数 */
                var htmlWidth = window.innerWidth;             //可见区域宽度
                var htmlHeight = window.innerHeight;           //可见区域高度
                var divleft = 0;                                                 //将要创建的div的左边距
                var divtop = 0;                                                //将要创建的div的右边距
                var closefunction = 'em=document.getElementsByClassName("' + ClassName + '");for(var i=em.length-1;i>=0;i--){var p=em[i];p.parentNode.removeChild(p);}';     //关闭div的代码
     
                img.setAttribute( 'onclick', closefunction);
     
               /* 计算通过图片计算div应该在的位置,保证弹窗在页面中央 */
                if (imgwd > htmlWidth * 0.8) {
                    img.setAttribute( 'width', htmlWidth * 0.8);
                    divleft = htmlWidth * 0.1;
                    if (imghg > htmlHeight * 0.8) {
                        divtop = htmlHeight * 0.1;
                    } else {
                        divtop = (htmlHeight - imgwd) / 2;
                    }
                } else {
                    img.setAttribute( 'width', imgwd);
                    divleft = (htmlWidth - imgwd) / 2;
                    if (imghg > htmlHeight * 0.8) {
                        divtop = htmlHeight * 0.1;
                    }
                    else {
                        divtop = (htmlHeight - imgwd) / 2;
                    }
                }
     
                /* 创建关闭按钮 */
                var closebtn = document.createElement('a');
                closebtn.setAttribute( 'class', 'close' );
                closebtn.setAttribute( 'href', 'javascript:;' );
                closebtn.setAttribute( 'style', 'position:absolute;top:-20px;right:-5px;cursor:pointer;background:#444;color:#FFF;' );
                closebtn.innerHTML = '[close/关?闭??]';
                closebtn.setAttribute( 'onclick', closefunction);
     
                /* 创建弹窗 */
                var element = document.createElement('div');
                element.appendChild(img);
                element.appendChild(closebtn);
                element.setAttribute( 'class', ClassName);
                element.setAttribute( 'style', 'border:5px solid #444;position:absolute;top:' + Math.round(divtop) + 'px;left:' + Math.round(divleft) + 'px;border-radius:5px;background:#FFF;z-index:9999;' );
                document.body.appendChild(element);
            }
  • 相关阅读:
    IOS Charles(代理服务器软件,可以用来拦截网络请求)
    Javascript中addEventListener和attachEvent的区别
    MVC中实现Area几种方法
    Entity Framework Code First 中使用 Fluent API 笔记。
    自定义JsonResult解决 序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用
    序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用
    An entity object cannot be referenced by multiple instances of IEntityChangeTracker 的解决方案
    Code First :使用Entity. Framework编程(8) ----转发 收藏
    Code First :使用Entity. Framework编程(6) ----转发 收藏
    Code First :使用Entity. Framework编程(5) ----转发 收藏
  • 原文地址:https://www.cnblogs.com/liusuqi/p/3147582.html
Copyright © 2011-2022 走看看