首页 > 编程语言 > 详细

python 学习_第五模块 JS特效

时间:2019-08-06 17:29:17      阅读:88      评论:0      收藏:0      [点我收藏+]

python 学习_第五模块 JS特效

 1 图片切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>01 图片切换</title>
</head>
<body>
    <img src="images/image01.jpg" id="flower" width="200" height="200">
    <br>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <!-- 1. 获取事件源 需要的标签 -->
    <script type="text/javascript">
        var flower = document.getElementById(flower);
        var nextBth = document.getElementById(next);
        var prevBth = document.getElementById(prev);

        var minIndex=1;maxIndex=4;currentIndex=minIndex;

        // 2 监听按钮的点击
        nextBth.onclick = function(){
            if (currentIndex===maxIndex){
                // 最后一张
                currentIndex=minIndex;
            }else {
                currentIndex++;
            }
            flower.setAttribute(src,`images/image0${currentIndex}.jpg`);
        }

        prevBth.onclick = function(){
            if (currentIndex===minIndex){
                // 最后一张
                currentIndex=maxIndex;
            }else {
                currentIndex--;
            }
            flower.setAttribute(src,`images/image0${currentIndex}.jpg`);
        }

    </script>
</body>
</html>

 

 

 

2 显示和隐藏图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显示和隐藏图片</title>
</head>
<body>
    <button id=‘btn‘>隐藏</button>
    <br>
    <img src="images/img01.jpg" id="new">
    <script type="text/javascript">
        // 1 获取事件源
        var obtn  = document.getElementById("btn");
        var newImg = document.getElementsByTagName("img")[0];
        obtn.onclick = function(){
            if(obtn.innerHTML === 隐藏){
                newImg.style.display = none;
                obtn.innerHTML = 显示;
            }else{
                newImg.style.display = block;
                obtn.innerHTML = 隐藏;
            }
        }
    </script>
</body>
</html>

 

 

 

3 衣服相册

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>03 衣服相册</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            overflow: hidden;
        }

        ul li {
            float: left;
            width: 50px;
            height: 50px;
            margin-left:10px;
            margin-top: 10px;
            border: 2px solid #fff;
        }

        ul li.active{
            border-color: red;
        }

    </style>
</head>
<body>
    <img src="images/1.jpg" id="bigImg">
    <ul>
        <li  class="active">
            <a href="">
                <img src="images/1.jpg" width="46"  class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/2.jpg" width="46"  class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/3.jpg" width="46"  class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/4.jpg" width="46"  class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/5.jpg" width="46"  class="smallImg">
            </a>
        </li>
    </ul>
    <script type="text/javascript">
        // 1 获取事件源
        var bigImg = document.getElementById(bigImg);
        var smallImgs = document.getElementsByClassName(smallImg);

        for (var i=0;i<smallImgs.length;i++){
            smallImgs[i].onmouseover = function(){

                // 3.事件处理程序
                // 3.1 在悬浮到每个li标签之前,先把所有的li标签的类名都置为空值
                for(var j = 0; j < smallImgs.length; j++){
                    smallImgs[j].parentNode.parentNode.setAttribute(class, ‘‘);
                }

                // 3.2修改大图的src属性值
                var smallImgSrc = this.getAttribute(src);
                bigImg.setAttribute(src,smallImgSrc);

                // 3.3 给鼠标悬浮的img标签的父标签添加类
                this.parentNode.parentNode.setAttribute(class, active);
            }
        }

    </script>
</body>
</html>

 

 

4 关闭小广告

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04 关闭小广告</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #qe_code{
            width: 180px;
            height: 160px;
            margin: 100px auto;
            position: relative;
        }
        #qe_code img{
            position: absolute;
            right: 0;
        }
        #qe_code #close{
            position: absolute;
            width: 18px;
            height: 18px;
            border: 1px solid #e0e0e0;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
            color: #666;
        }
    </style>
</head>
<body>
    <div id="qe_code">
        <img src="images/phone_taobao.png" id="code">
        <span id="close">X</span>
    </div>
    <script type="text/javascript">
        var closeSpan = document.getElementById(close);
        var qe_code = document.getElementById(qe_code);
        closeSpan.onclick = function(){
            qe_code.style.display = none;
        }

    </script>
</body>
</html>

 

 

 

 

05 图片切换

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05 图片切换</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 430px;
            height: 70px;
            padding-top: 430px;
            background: url(‘images/big_pic1.jpg‘) no-repeat;
        }
        #box ul li{
            display: inline-block;
            margin-right: 15px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="item1">
                <img src="images/pic1.jpg">
            </li>
            <li id="item2">
                <img src="images/pic2.jpg">
            </li>
            <li id="item3">
                <img src="images/pic3.jpg">
            </li>
            <li id="item4">
                <img src="images/pic4.jpg">
            </li>
            <li id="item5">
                <img src="images/pic5.jpg">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 初学者 小白 书写的方式
        var item1 = document.getElementById(item1);
        var item2 = document.getElementById(item2);
        var item3 = document.getElementById(item3);
        var item4 = document.getElementById(item4);
        var item5 = document.getElementById(item5);
        var oBox = document.getElementById(box);
        item1.onmouseover = function(){
            oBox.style.background = `url(images/big_pic1.jpg) no-repeat`
        }
        item2.onmouseover = function(){
            oBox.style.background = `url(images/big_pic2.jpg) no-repeat`
        }
        item3.onmouseover = function(){
            oBox.style.background = `url(images/big_pic3.jpg) no-repeat`
        }
        item4.onmouseover = function(){
            oBox.style.background = `url(images/big_pic4.jpg) no-repeat`
        }
        item5.onmouseover = function(){
            oBox.style.background = `url(images/big_pic5.jpg) no-repeat`
        }

    </script>
    
</body>
</html>

 

 

 

 

 

 

 

 

 

 

python 学习_第五模块 JS特效

原文:https://www.cnblogs.com/augustyang/p/11310240.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!