js动态创建图片

最新推荐文章于 2019-04-24 18:15:08 发布

weixin_30653023

最新推荐文章于 2019-04-24 18:15:08 发布

阅读量910

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/nqsan/p/3194735.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        //1window.onload事件
        window.onload = function () {
            document.getElementById('btn').onclick = function () {
                //初始化数据.
                var datas = {
                    "Images/1.jpg": ["Images/1_1.jpg", "张三", "178cm"],
                    "Images/2.jpg": ["Images/2_1.jpg", "李四", "170cm"]
                };
                //循环遍历每一条数据.for in
                var dvobj = document.getElementById('dvSmallPic');
                for (var key in datas) {
                    //1.创建一个img图片框.
                    var imgSmallObj = document.createElement('img');
                    imgSmallObj.src = key;
                    imgSmallObj.alt = datas[key][1];
                    imgSmallObj.style.marginRight = '32px'; //设置动态创建的图片之间的距离.marginRight.

                    //2给每个小图片添加onmouseover事件.

                    imgSmallObj.onmouseover = function () {
                        //获取层
                        var dvobjs = document.getElementById('dvDetails');
                        dvobjs.style.display = 'block';
                        //设置层的位置
                        dvobjs.style.position = 'absolute';
                        dvobjs.style.left = this.offsetLeft + 'px';
                        dvobjs.style.top = this.offsetTop + this.offsetHeight + 'px';

                    };
                    dvobj.appendChild(imgSmallObj);

                };


            };
        };
    </script>
</head>
<body>
    <input type="button" name="name" value="动态创建图片"id="btn" />
    <div id="dvSmallPic">
    </div>
    <div id="dvDetails">
        <img id="imgBigPic" style="display:none; border:1px solid blue; width:300px;height:240px;" src="#" alt="Alternate Text" />
        <p id="pname"></p>
        <p id="pheight"></p>
    </div>
</body>
</html>