用jquery制作全网热播视频页面

使用选择器:not( ) 设置图片与右侧内容间距10px
使用选择器:last设置右侧列表背景颜色为#f0f0f0
使用层次选择器、:first、:not( )设置前三个视频名称前的数字1、2、3背景颜色为#f0a30f,后面的数字背景颜色为#a4a3a3
3、5、6、7后的箭头向上,4、8、9、10后的箭头向下
鼠标移至右侧列表上时,显示对应的隐藏内容“”加入清单,鼠标离开后隐藏内容
实现思路
(1)使用$(document).ready( )创建文档加载事件
(2)使用:lt( )设置向上的背景箭头,使用:gt( )设置向下的背景箭头,使用:eq( ) 设置右侧第二行的向下的背景箭头
(3)鼠标移至元素添加mouseover事件,设置隐藏元素显示出来,使用find( )获取当前

  • 下的

    元素;鼠标离开添加mouseout事件设置元素隐藏
    (4)使用css( )方法所选取的元素添加CSS样式
    这里写图片描述

    这里写图片描述
    这里写图片描述

  • $(document).ready(function () {
        $("ul>li:not(:last)").css({"margin-right": "10px"});
        $("ul>li:not(:last) span,ul>li:last li:first span").css({"background-color": "#f0a30f"});
        $("ol li:gt(0) span").css({"background-color": "#a4a3a3"});
        $("ul>li:last").css({"background-color": "#f0f0f0"});
        $(" ol li:eq(0),ol li:eq(2),ol li:eq(3),ol li:eq(4)").css({
            "background-image": "url(images/orange.jpg)",
            "background-repeat": "no-repeat",
            "background-position": "right -2px"
        });
        $(" ol li:eq(1),ol li:eq(5),ol li:eq(6),ol li:eq(7)").css({
            "background-image": "url(images/green.jpg)",
            "background-repeat": "no-repeat",
            "background-position": "right -2px"
        });
        $("ol").mouseover(function () {
            $("ol li p").show();
        });
        $("ol").mouseout(function () {
            $("ol li p").hide();
        });
    });
    <body>
    <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>
    </body>
    *{margin: 0; padding: 0;font-family: "微软雅黑";font-size: 14px;}
    ul,ol,li{list-style: none;}
    #play{margin: 0 auto; width:680px; overflow: hidden;}
    #play h1{line-height: 40px; font-size: 22px;}
    #play ul>li{
        float: left;
        width: 220px;
        height: 308px;
        overflow: hidden;
        position: relative;
    }
    #play ol li{height: 37px; padding: 0px 0px 0 10px; position: relative;}
    #play ul>li>span{display: block; position: absolute; left: 0; bottom: 0; font-size: 25px; color: #ffffff; font-weight: bold; padding: 5px 10px; z-index: 100;}
    #play ul>li>p{position: absolute; left: 50px; bottom: 10px; color: #ffffff;}
    #play ol{padding-top: 13px; padding-right: 5px;}
    #play ol li span{display:inline-block; color: #ffffff; margin-right: 5px; width: 20px; height: 20px; font-size: 12px; font-weight: bold; text-align: center;}
    #play ol li p{position: absolute; right: 0; top: 3px; color: #ffffff; background: #f0a30f; padding: 0 8px; font-size: 12px; display: none;}
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值