zoukankan      html  css  js  c++  java
  • js写的随机照片墙

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    html,body{ height:100%;}
    .btn{
    50px; /*宽:50像素*/
    height:50px;/*高:50像素*/
    background:white;/*背景颜色:黑色*/
    border-radius:50%; /*矩形圆角*/
    margin-left:40px;
    }
    .btnBg{
    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.offsetHeightmybody.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>

  • 相关阅读:
    步步为营——算法初阶 1.算法概述
    Spring学习【Spring概述】
    Codeforces 490F Treeland Tour 树上的最长上升子序列
    汽车电商竞争白热化,“五大门派”谁能登顶?
    程序猿的出路
    Android Studio Share Project On Github
    hdu 1022 Train Problem I(栈的应用+STL)
    Scala, Groovy, Clojure, Jython, JRuby and Java ----我们的工作语言
    Oracle GoldenGate (ogg) 11.2.1.0.20 是最后一个支持oracle db 10g的 ogg版本号
    javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方式
  • 原文地址:https://www.cnblogs.com/branton-design/p/6323146.html
Copyright © 2011-2022 走看看