<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
html,body{ height:100%;}
.btn{
width:50px; /*宽：50像素*/
height:50px;/*高：50像素*/
background:white;/*背景颜色:黑色*/
border-radius:50%; /*矩形圆角*/
margin-left:40px;
}
.btnBg{
width:90px; /*宽：50像素*/
height:50px;/*高：50像素*/
background:green;/*背景颜色:黑色*/
border-radius:25px; /*矩形圆角*/
}
.images img{
position:absolute; /*绝对定位,图片重叠 改变位置：left，top*/
border:white solid 9px;
box-shadow:#333 5px 5px 5px;
transition:all 1s;
}
.images img:hover{
z-index:999;
}
</style>
</head>
<body>
<div class="btnBg" id="btnBg"><div class="btn" id="mybtn"></div></div>
<div class="images">
<img class="imglist" id="img1" src="images/1.jpg"><!--0-->
<img class="imglist" id="img2" src="images/2.jpg"><!--1-->
<img class="imglist" id="img3" src="images/3.jpg"><!--2-->
<img class="imglist" id="img4" src="images/5.jpg"><!--3-->
<img class="imglist" id="img5" src="images/6.jpg"><!--4-->
<img class="imglist" id="img6" src="images/7.jpg"><!--5-->
<img class="imglist" id="img7" src="images/8.jpg"><!--6-->
</div>
</body>
<script>
//js脚本
//黑色圆点 单击 黑色圆点移动
var mybtn = document.getElementById("mybtn");//创建变量（对象）
var btnBg = document.getElementById("btnBg");//创建变量（对象）
var mybody = document.body;
var flag = 1; //0代表关闭，1代表打开
mybtn.onclick = function(){
//判断 打开还是关闭
if(flag == 1){ //如果flag的值 ==（判等） 1
mybtn.style.marginLeft = "0";
flag = 0; //设置flag为关闭状态
btnBg.style.background = "gray";
mybody.style.background = "white";
}else{//否则，flag的值不是1
mybtn.style.marginLeft = "40px";
flag = 1; //设置flag为打开状态
btnBg.style.background = "green";
mybody.style.background = "gray";
}
}
//获取当前窗口的高度和宽度 mybody.offsetHeight\mybody.offsetWidth
//随意摆放图片 —— 随机 Math.random()
//alert(Math.random()*mybody.offsetWidth); //(0,1) -> (0,mybody.offsetWidth)
var imglist = document.getElementsByClassName("imglist");
for(var i=0;i<=6;i++){
imglist[i].style.top = Math.random()*(mybody.offsetHeight-400)+"px";
imglist[i].style.left = Math.random()*(mybody.offsetWidth-200)+"px";
imglist[i].style.transform = "rotate(" + parseInt(Math.random()*60-30) + "deg)";
}
var img1 = document.getElementById("img1");
img1.onmouseover = function(){
//alert();
img1.style.transform = "rotate(0deg) scale(2,2)";
}
img1.onmouseout = function(){
//alert();
img1.style.transform = "rotate(0deg) scale(1,1)";
}
</script>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
