javascript-Lesson14:实例图片放大、秒表、进度条、遮罩层、侧边导航栏、图展、拖拽

本文链接：https://blog.csdn.net/lailjx123/article/details/104500140

实例之一

图片放大
秒表
进度条
遮罩层
- - 重点：
侧边导航栏
- - 重点：
图展
拖拽
- - 重点：

图片放大

<!--
生成日期：2020/2/24
文件名称：图片放大
版本：1.0
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片放大</title>
    <style>
        img{
            border:1px solid darkred;
        }
        img:hover {
            border: 1px solid cadetblue;
        }
        .big{
            display: none;
            position: absolute;
        }
    </style>
    <script>
        onload = function(){
            imgs = document.getElementsByTagName("img")
            for(i=0;i<imgs.length-1;i++){
                 imgs[i].index = i+1;
                 imgs[i].onmouseover = function () {
                     imgs[4].style.display="block";
                     imgs[4].src="./images/shirt_"+this.index+"_big.jpg";
                 }
                 imgs[i].onmousemove = function (event) {
                     x = event.clientX
                     y = event.clientY
                     imgs[4].style.left = x + "px"
                     imgs[4].style.top =  y + "px"
                 imgs[i].onmouseout = function () {
                         imgs[4].style.display = "none"

                 }
                 }
            }
        }
    </script>
</head>
<body>
<img src="images/shirt_1.jpg" />
<img src="images/shirt_2.jpg" />
<img src="images/shirt_3.jpg" />
<img src="images/shirt_4.jpg" />
<img class="big" src="" width="300"/>
</body>
</html>

秒表

<!--
生成日期：2020/2/25
文件名称：2_秒表
版本：1.0
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_秒表</title>
    <style>
        span{
            display: inline;
            width:50px;
            height: 20px;
            border: 1px solid rosybrown;
        }
        div{
            height:200px;
            width:200px;
            border: solid 1px darkred;
            position: absolute;
            right: 100px;
            top:200px;
        }
    </style>
    <script>
        //获取时分秒的元素
        onload = function(){
        hour = document.getElementById("hour");
        minute = document.getElementById("minute");
        second = document.getElementById("second");
        count = 0;  //用于读秒
        flag = 0;  // 用于控制函数执行
        }

        //函数用于计时
        function count_time() {
            if(flag == 0){
                flag = 1;
                timer = setInterval(function(){
                    count++;

                    second.innerText = count%60;  //秒数
                    minute.innerText = Math.floor(count/60)%60; //分数
                    hour.innerText = Math.floor(count/3600)   //时数
                }, 1000)}
        }

        //函数用于暂停和保留记录
        function pause() {
            clearInterval(timer);
            flag = 0;
            let oDiv = document.getElementsByTagName("div");
            let record = hour.innerText + "时" + minute.innerText + "分" + second.innerText + "秒"+"<br>"
            oDiv[0].innerHTML += record;
        }

    </script>

</head>
<body>
<span id="hour">0</span>时
<span id="minute">0</span>分
<span id="second">0</span>秒
<hr>
<button onclick="count_time()">点击计时</button>
<button onclick="pause()">暂停</button>
<div></div>


</body>
</html>

进度条

<!--
生成日期：2020/2/25
文件名称：示例3_进度条
版本：1.0
-->
<!DOCTYPE html>
<p lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例3_进度条</title>
    <style>
        #outer{
            width:200px;
            height:20px;
            border: 1px solid lightgray;
        }
        #progress{
            width:0px;
            height:20px;
            background: red;
        }
    </style>
    <script>
        onload = function () {
            progressBar = document.getElementById("progress");
            span = document.getElementsByTagName("span")[0];
            i = 0;
            timer = setInterval(function () {
                i++;
                if(i>200){
                    clearInterval(timer);
                };
                progressBar.style.width = i + "px";
                span.innerText = parseInt(i/2)
            },20);

        }
    </script>
</head>
进度条
<div id="outer"><div id="progress"></div></div>
<p>进度：<span></span><span>%</span></p>

</body>
</html>

遮罩层

重点：

实体名称实体字符

unicode汉堡图标：☰
unicode图标
子元素mid垂直居中
隐藏到铺满 height:0% - height:100%
出现动画效果：transition:0.5s

<!--
生成日期：2020/2/25
文件名称：示例4_遮罩层
版本：1.0
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例4_遮罩层</title>
    <style>
        *{margin:0}
        span{
            font-size: 30px;
        }
        #cover{
            position: absolute;
            top:0px;
            left: 0px;
            height:0%;
            width:100%;
            /*transition: 0.5s;*/
            background: rgba(10,20,30,0.8);
            transition: .5s;
            overflow: hidden;
            line-height: 100%;
        }
        #mid{
            position: absolute;
            left:0;
            top:0;
            bottom:0;
            right: 0;
            margin: auto;/*以上是小样式特定写法，居中显示*/
            width:300px;
            height:250px;
            background-color: red;
            text-align:right;
            box-sizing: border-box;
            padding-right: 10px;
            padding-top:5px;
        }
    </style>
</head>
<body>
<div id="cover">
    <div id="mid">
        <span onclick="hide();">&times;</span>
    </div>
</div>
<button id="button" onclick="show();">&#9776;</button>
<script>
    oCover = document.getElementById("cover");
    oMid = document.getElementById("mid");
    function show(){
        // console.log(window.getComputedStyle(oCover).height);
        oCover.style.height = "100%";
    }
    function hide() {
        oCover.style.height = "0%"
    }
</script>
</body>
</html>

侧边导航栏

重点：

左边导航栏设为fixed定位，z-index=1，就会在右边页面上显示
左边导航栏的left设为-250px,则不显示

<!--
生成日期：2020/2/26
文件名称：示例5_侧边导航栏
版本：1.0
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例5_侧边导航栏</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #left{
            position: fixed;
            z-index: 1;
            left:-250px;
            top:0;
            width:250px;
            height:100%;
            background-color: rgba(20,20,20,0.8);
            transition: 0.5s;
            padding-top:5px;
            padding-left:5px;
            color:#FFF;
        }
        #right{
            transition:margin-left .5s;
            padding:16px;
            /*border:1px solid blue;*/
        }
        #close{
            text-align: right;
        }
        ul{
            margin-top:10px;
            margin-left:20px;
            list-style: none;
        }
        li{
            padding:5px;
            line-height: 40px;
            font-size: 24px;
        }
        span:hover,li:hover{
            color:black;
        }
        span{
            font-size: 40px;
        }

    </style>
    <script>
        onload = function(){
            left = document.getElementById("left");
            right = document.getElementById("right");
            big = document.getElementById("big");
        }
        function show(){

            left.style.left = "0px";
            right.style.marginLeft = '250px';
            document.body.style.backgroundColor="rgba(40,40,40,0.6)";
            document.body.style.transition = "0.5s"
        }
        function closeIt() {
                left.style.left ="-250px";
                right.style.marginLeft='0px';              document.body.style.backgroundColor="rgb(255,255,255)"
                document.body.style.transition = "0.5s"
        }
    </script>
</head>
<body>
    <div id="left">
            <span onclick="closeIt()">&times;</span>
        <ul>
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
            <li>link4</li>
        </ul>
    </div>
    <div id="right">
        <span onclick="show()">&#9776;</span>
    </div>

</body>
</html>

图展

多个元素事件的，使用for循环。如本例鼠标移动到任何一个小图片。
this代表事件触发的当前元素。

<!--
生成日期：2020/2/26
文件名称：示例6_图展
版本：1.0
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例6_图展</title>
    <style>
        #big{
            width:155px;
            height: 160px;
        }
    </style>
    <script>
        onload = function(){
            imgs = document.getElementsByTagName("img");
            for(var i=1;i<imgs.length-1;i++){
                imgs[i].onmouseover = function(){
                    imgs[0].src = this.src.replace("small","big");           
                    console.log(this.src)
                }
            }
        }
    </script>


</head>
<body>
<table>
    <tr>
        <td colspan="3" rowspan="3"><img id="big" src="images/small_1.jpg"</td>
        <td><img src="images/small_1.jpg"</td>
        <td><img src="images/small_2.jpg"</td>
    </tr>
    <tr>
        <td><img src="images/small_3.jpg"</td>
        <td><img src="images/small_4.jpg"</td>
    </tr>
    <tr>
        <td><img src="images/small_5.jpg"</td>
        <td><img src="images/small_6.jpg"</td>
    </tr>
    <tr>
        <td><img src="images/small_7.jpg"</td>
        <td><img src="images/small_8.jpg"</td>
        <td><img src="images/small_9.jpg"</td>
        <td><img src="images/small_10.jpg"</td>
        <td><img src="images/small_11.jpg"</td>
    </tr>
</table>
</body>
</html>

拖拽

重点：

clientX和offsetX的代表含义，clientX-offsetX代表要移动的距离
onmousemove和onmouseup都是针对document对象
onmousedown触发的函数包含了onmousemove和onmouseup的函数，才能将offsetX的值传给后两者
onmouseup触发的函数是取消onmousemove这个事件触发的函数
document.onmousemove = null; （或者=false)

<!--
生成日期：2020/2/26
文件名称：示例6_拖拽
版本：1.0
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例6_拖拽</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        div{
            position: absolute;
            width:80px;
            height:200px;
            background-color: orange;
        }
    </style>
    <script>
        onload = function () {
            let oDiv = document.getElementsByTagName("div")[0];
            oDiv.onmousedown = function(e){
                let offset_x = e.offsetX;
                let offset_y = e.offsetY;
                console.log(offset_x,offset_y);
                document.onmousemove = function (ev) {
                    let client_x = ev.clientX;
                    let client_y = ev.clientY;
                    oDiv.style.left = client_x-offset_x+"px";
                    oDiv.style.top = client_y-offset_y+"px";
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                 }
            };
        }
    </script>
</head>
<body>
    <div></div>
</body>
</html>