在任意位置点击图片显示

最新推荐文章于 2024-01-30 10:55:59 发布

Peter清风

最新推荐文章于 2024-01-30 10:55:59 发布

阅读量539

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_34783311/article/details/54584293

js 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
   <title></title>
   <link rel="stylesheet" type="text/css" href="">
   <style type="text/css">
   body{
     width: 100%;
     height:500px;
   }
   #d1{

    height: 100px;
    border:1px solid blue;
    background: gray;
    cursor: pointer;
   }
   #im{
margin-left: 30px;
   width:200px;
   height: 200px;
   border:1px solid blue;
   background-size: cover;
box-shadow: 5px 5px rgba(0,0,0,6);

   }
   #bd{
    border:1px solid blue;
    padding-top: 100px;

   }

   </style>
   <script type="text/javascript">
   // //事件源
   // function fn(e){
//           var obj=document.getElementById("d1");
//           var x=e.clientX;
//           var y=e.clientY;
//           d1.style.background="red";
//           d1.style.color="white";
//           obj.innerHTML="坐标:"+x+","+y;
   // }
   function show(e){
    var obj=document.createElement('img')
    obj.src="image/4.jpg";
    //随机产生30-100之间的数，并向下取整
    w=Math.floor(Math.random()*(100-30)+30);
    obj.width=w;
    //获得事件源
     var x=e.clientX;
     var y=e.clientY;
     if(x<1000)
     //css样式中absolute与top、left、right、bottom一起用
     {obj.style.position="absolute";
     obj.style.top=y+"px";
     obj.style.left=x+"px";
     document.body.appendChild(obj);
   }
}
   </script>
</head>
<body id="bd"onclick="show(event)">

</body>
</html>