首页 > Web开发 > 详细

jQuery实现全网热播视频

时间:2021-01-24 18:44:05      阅读:102      评论:0      收藏:0      [点我收藏+]
<section id="play">
    <h1>全网热播视频</h1>
    <ul>
        <li><img src="images/flv01.jpg"><p>昊花梦</p><span>1</span></li>
        <li><img src="images/flv02.jpg"><p>好先生</p><span>2</span></li>
        <li>
            <ol>
                <li><span>3</span>三八线<p>加入看单</p></li>
                <li><span>4</span>吉详天宝<p>加入看单</p></li>
                <li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
                <li><span>6</span>仙剑云之凡<p>加入看单</p></li>
                <li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
                <li><span>8</span>琅琊榜<p>加入看单</p></li>
                <li><span>9</span>那年青春我们正好<p>加入看单</p></li>
                <li><span>10</span>乡村受情8(上)<p>加入看单</p></li>
            </ol>
        </li>
    </ul>
</section>

jQuery代码:

$(function(){
            $(‘#play ul>li:not(:last)‘).css("marginRight","10px");
            $("#play ul>li:last").css("background","#f0f0f0");
            $("ol li>span:first,ul>li:not(:last)>span").css("background","#f0a30f");
            $("#play ul>li:last li>span:not(:first)").css("background","#a4a3a3");
            $("ol li").mouseover(function (){
                $(this).find("p").show();
            })
            $("ol li").mouseout(function (){
                $(this).find("p").hide();
            })
            $("#play ul>li:last li:lt(5)").css({
                background:"url(‘./images/orange.jpg‘) no-repeat right -3px"
            })
            $("#play ul>li:last li:gt(4),ul>li:last li:eq(1)").css({
                background:"url(‘./images/green.jpg‘) no-repeat right -3px"
            })
        })

最后的效果:

技术分享图片

jQuery实现全网热播视频

原文:https://www.cnblogs.com/Blcjme/p/14321637.html

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