<!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"οnclick="show(event)">
</body>
</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"οnclick="show(event)">
</body>
</html>
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
