[jQUery case] event related cases

Movie Leaderboard

Display when mouse moves in and hide when mouse moves out

  • jQuery code

    $(function(){
            // Move in event
            $('li').mouseenter(function(){
                $(this).addClass('current')
            })
    
            // Remove event
            $('li').mouseleave(function () {
                $(this).removeClass('current')
            })
    })
    

    Add and delete classes to li to show and hide

  • css code

    *{
            margin: 0;
            padding: 0;
        }
    
        .cont{
            width: 300px;
            height: 450px;
            border: 2px solid black;
            margin: 100px auto;
        }
    
        .cont>h1{
            font-size: 20px;
            line-height: 35px;
            color: deeppink;
            padding-left: 10px;
            border-bottom: 1px dashed gainsboro;
        }
    
        ul>li{
            list-style: none;
            padding: 5px 10px;
            border: 1px dashed gainsboro;
        }
    
        ul>li>span{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #cccccc;
            text-align: center;
            line-height: 20px;
            margin-right: 5px;
        }
    
        ul>li:nth-child(-n+3)>span{
            background: deeppink;
        }
    
        .text{
            overflow: hidden;
            display: none;
        }
    
        .text>img{
            margin-top: 5px;
            width: 80px;
            height: 120px;
            float: left;
        }
    
        .text>p{
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;
            line-height: 20px;
        }
    
        .current .text{
            display: block;
        }
    
  • Page structure

    <div class="cont">
        <h1>Movie Leaderboard</h1>
        <ul>
            <li>< span > 1 < / span > film introduction
                <div class="text">
                    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                    <p> tells the story of the 70 years of the founding of new China, which is closely related to the common people and the Republic. It was released in Chinese mainland in September 30, 2019. On January 11, 2020, the first "light and shadow China" film honor ceremony won the 2019 honorary Promotion Film</p>
                </div>    
            </li>
            <li>< span > 2 < / span > film introduction
                <div class="text">
                    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                    <p> tells the story of the 70 years of the founding of new China, which is closely related to the common people and the Republic. It was released in mainland China in September 30, 2019. On January 11, 2020, the first "light and shadow China" film honor ceremony won the 2019 honorary Promotion Film</p>
                </div>    
            </li>
            <li>< span > 3 < / span > film introduction
                <div class="text">
                    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                    <p> tells the story of the 70 years of the founding of new China, which is closely related to the common people and the Republic. It was released in Chinese mainland in September 30, 2019. On January 11, 2020, the first "light and shadow China" film honor ceremony won the 2019 honorary Promotion Film</p>
                </div>    
            </li>
            <li>< span > 4 < / span > film introduction
                <div class="text">
                    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                    <p> tells the story of the 70 years of the founding of new China, which is closely related to the common people and the Republic. It was released in Chinese mainland in September 30, 2019. On January 11, 2020, the first "light and shadow China" film honor ceremony won the 2019 honorary Promotion Film</p>
                </div>    
            </li>
            <li>< span > 5 < / span > film introduction
                <div class="text">
                    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                    <p> tells the story of the 70 years of the founding of new China, which is closely related to the common people and the Republic. It was released in Chinese mainland in September 30, 2019. On January 11, 2020, the first "light and shadow China" film honor ceremony won the 2019 honorary Promotion Film</p>
                </div>    
            </li>
            <li>< span > 6 < / span > film introduction
                <div class="text">
                    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                    <p> tells the story of the 70 years of the founding of new China, which is closely related to the common people and the Republic. It was released in Chinese mainland in September 30, 2019. On January 11, 2020, the first "light and shadow China" film honor ceremony won the 2019 honorary Promotion Film</p>
                </div>    
            </li>
        </ul>
    </div>
    

TAB tab

Effect mouse move in to switch pictures

  • jQuery code

    $(function(){
            $('.nav>li').mouseenter(function () {
                // Change the background color of the moved in tab
                $(this).addClass('current');
                // Restore non current tab background color
                $(this).siblings().removeClass('current'); // siblings() method: non current element found
                
                // Get index of current tab
                var index = $(this).index(index);
                // Find pictures by index
                var $li = $('.imgs>li').eq(index);
                
                // Hide other pictures that are not current
                $li.siblings().removeClass('show');
                // Display corresponding pictures
                $li.addClass('show');
            })
        })
    
  • css part

    *{
            margin: 0;
            padding: 0;
        }
    
        .box{
            width: 460px;
            height: 300px;
            border: 2px solid #000000;
            margin: 200px auto;
            overflow: hidden;
            position: relative;
        }
    
        .nav>li{
            list-style: none;
            width: 115px;
            height: 50px;
            line-height: 50px;
            float: left;
            background: orange;
            text-align: center;
            font-weight: bolder;
        }
    
        .nav>.current{
            background: #cccccc;
        }
    
        .imgs>li{
            list-style: none;
            display: none;
        }
    
        .imgs>li>img{
            height: 250px;
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translateX(-150px);
        }
    
        .imgs>.show{
            display: block;
        }
    
  • Page structure

    <div class="box">
        <ul class="nav">
            <li class="current">mobile phone</li>
            <li>doorbell</li>
            <li>Washing machine</li>
            <li>Wrist watch</li>
        </ul>
        <ul class="imgs">
            <li class="show"><img src="imgs/1.jpg"></li>
            <li><img src="imgs/2.jpg"></li>
            <li><img src="imgs/3.jpg"></li>
            <li><img src="imgs/4.jpg"></li>
        </ul>
    </div>
    

Tags: JQuery Mobile

Posted on Fri, 19 Jun 2020 07:26:54 -0400 by Phreak E