js特效------实例

最新推荐文章于 2021-01-18 20:31:17 发布

junlingshiwo

最新推荐文章于 2021-01-18 20:31:17 发布

阅读量790

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_45722135/article/details/108209314

版权

JS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

《1 js特效---图标切换

我们要建这样的页面效果，就是在几张照片中切换不停，我们所需要用js来搭建切换效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 2000px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="box">
<img id="icon" src="img/icon_01.png" alt="">
<p></p>
<button id="prev">上一张</button>
<button id="next">下一张</button>

</div>
<script>
    window.onload=function (ev) {
        // 1获取标签
        var icon=document.getElementById('icon');
        var prev=document.getElementById('prev');
        var next=document.getElementById('next');

        // 2点击
           //定义索引
        var currentIndex=1; minIndex=1,maxIndex=9;

        prev.onclick=function (ev1) {
            if (currentIndex===minIndex){//最小边界
                currentIndex=maxIndex;
            }else {
                currentIndex--;
            }
            icon.setAttribute('src','img/icon_0'+currentIndex+'.png');
            console.log(icon.src);


        }

        next.onclick=function (ev1) {
            if (currentIndex===maxIndex){//最大边界
                currentIndex=minIndex;
            }else {
                currentIndex++;
            }
            icon.setAttribute('src','img/icon_0'+currentIndex+'.png');
            console.log(icon.src);

        }


    }

</script>

</body>
</html>

搭建好页面样式后，我们就使用js来做切换。

用js来搭建，我们第一步就需要获取所需要的标签，取到需要的标签后就得进行点击，来让图片进行切换，就需要第二部点击，

但点击后到最后一张图标，需要重新切换到第一张图标上，我们就得做边界值，让判断是否到最后一张切换到第一张。所搭建如上。

《2 关闭小广告

像电脑在使用时经常会有小广告的出现，我们想要关掉广告，就需要使用js。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: relative;
            display: inline-block;
        }
        #close{
            position: absolute;
            right: 18px;
            top:18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <img id="icon"  src="img/img_02.jpg" alt="" width="258">;
    <img id="close" src="img/close.jpg" alt="" width="40">;

    <script>
        window.onload=function (ev) {
            // 1 获取标签
            var close=document.querySelector('#close');
            // 2监听点击
            close.onclick=function () {
                // console.log(this);
                // this.parentNode.remove();//第一种关闭
                this.parentNode.style.display='none';//第二种关闭

            }



        }
    </script>
</div>

</body>
</html>

同样都是需要获取标签，再来点击需要发生的。

《3 风景相册

风景相册就是点击下边的小图，来切换大图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        body{margin: 50px;}
        #fj{list-style: none;}
        #fj li{float: left;margin-left: 10px;}
        #big_img{margin-left: 10px;}
        #des{margin: 10px;color: orangered;font-size: 20px;}
    </style>
</head>
<body>
<!--大图描述-->
<p id="des">蒲公英</p>
<!--大图展示-->
<img id="big_img" src="img/1.jpg" alt="" width="520">
<!--小图列表-->
<ul id="fj">
    <li>
        <a href="img/1.jpg"title="蒲公英">
            <img src="img/1.jpg" title="蒲公英" width="100">
        </a>
    </li>
    <li>
        <a href="img/2.jpg"title="热球">
            <img src="img/2.jpg" title="热气球" width="100">
        </a>
    </li>
    <li>
        <a href="img/3.jpg"title="别致小屋">
            <img src="img/3.jpg" title="别致小屋" width="100">
        </a>
    </li>
    <li>
        <a href="img/4.jpg"title="高山湖水">
            <img src="img/4.jpg" title="高山湖水" width="100">
        </a>
    </li>
    <li>
        <a href="img/5.jpg"title="高速公路">
            <img src="img/5.jpg" title="高速公路" width="100">
        </a>
    </li>
</ul>

<script>
    window.onload=function (ev) {
        // 1获取需要标签
        var des=document.getElementById('des');
        var big_img=document.getElementById('big_img');
        var fj=document.getElementById('fj');
        var aLists=fj.getElementsByTagName('a')
        console.log(aLists);

        // 2事件绑定
        for (var i=0;i < aLists.length;i++){
            var a=aLists[i];
            console.log(a);
            a.onclick=function (ev1) {
                des.innerText=this.title;
                big_img.setAttribute('src',this.href);

                return false;

            }
        }



    }
</script>

</body>
</html>

将其样式都做好，再用js来做图片变换。

《4 二维码的显示和隐藏

如下图所示：

就是先将小的图标显示出来，当鼠标进入小图标，大的二维码就会显示出来，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        #e_coder{
            width: 50px;height: 50px;
            background: url("images/e_coder_normal.png")no-repeat;
            position: fixed;top: 40%;left: 0;cursor: pointer;
        }
        #e_app{
            position: absolute;left: 50px;top: -50px;
        /* 隐藏*/
            display: none ;
        }
    </style>
</head>
<body>
<div id="e_coder">
    <div id="e_app">
        <img src="images/e_coder.jpg" alt="公众号" width="150">
    </div>
</div>

<script>
    window.onload=function (ev) {
        // 1 获取需要的标签
        var e_coder=document.getElementById('e_coder');
        var e_app=document.getElementById('e_app');

        // 2 监听进入鼠标
        e_coder.onmouseover=function (ev1) {
            // 2.1 改变背景图片
            this.style.background='url("images/e_coder_selected.png")no-repeat';
            // 2.2 显示二维码
            e_app.style.display='block';
        }

            // 3 监听鼠标离开
            e_coder.onmouseout=function (ev1) {
                // 2.1 改变背景图片
                this.style.background='url("images/e_coder_normal.png")no-repeat';
                // 3.2隐藏二维码
                e_app.style.display='none';




            }

    }

</script>

</body>
</html>

既然要显示二维码，就得隐藏二维码。如上图所示。

junlingshiwo

关注

0
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
js特效------实例

《1 js特效---图标切换我们要建这样的页面效果，就是在几张照片中切换不停，我们所需要用js来搭建切换效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 2000px; .
复制链接

扫一扫