jquery 神器之实现随机选择图片

最新推荐文章于 2022-10-02 21:30:43 发布

piterpig

最新推荐文章于 2022-10-02 21:30:43 发布

阅读量1.9k

点赞数

文章标签： jquery 筛选选择器

本文链接：https://blog.csdn.net/weixin_41963300/article/details/82421500

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq筛选选择器</title>
    <style>
        body{
            background-color: black;
        }
        .box{
            width: 617px;
            height: 617px;
            margin: 0 auto;
            background-color: white;
            border: 1px solid gray;

        }
        .img_box{
            width: 200px;
            height: 200px;
            margin-bottom: 2px;
            margin-right: 2px;
            background-color: pink;
            display: inline-block;
        }
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="img_box">
            <img src="../images/j0.jpg">
        </div>
        <div class="img_box">
            <img src="../images/j1.jpg">

        </div>
        <div class="img_box">
            <img src="../images/j2.jpg">

        </div>
        <div class="img_box">
            <img src="../images/j3.jpg">

        </div>
        <div class="img_box">
            <img src="../images/j4.jpg">

        </div>
        <div class="img_box">
            <img src="../images/j5.jpg">

        </div>
        <div class="img_box">
            <img src="../images/j6.jpg">

        </div>
        <div class="img_box">
            <img src="../images/j7.jpg">

        </div>
        <div class="img_box">
            <img src="../images/l0.jpg">
        </div>
    </div>
    <input type="button"  value="随机选择">
    <input type="button"  value="停止">
</body>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        $('.box > div ').mouseenter(function () {
            $(this).css('opacity','1').siblings().css('opacity','0.3');
        });
        var $box=$('.box');
        $box.mouseout(function () {
            $(this).children('div').css('opacity','1');
        })
        var s;
        $($box.siblings('input')[0]).click(function () {
                var r;
                //eval("$box.children('div')["+r+"]").css('opacity','1');
                s=setInterval(function () {
                r=Math.floor(Math.random()*9);
                $(eval("$box.children('div')["+r+"]")).css('opacity','1').siblings().css('opacity','0.1');
            },300)   //知识点：筛选出来后再进行选择之后得到的是DOM对象，要把它转化为$对象后才能调用css（）、siblings()等方法，这是新手容易出错的地方
        })
        $($box.siblings('input')[1]).click(function () {
            clearInterval(s);
        })
    })
</script>
</html>

piterpig

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 神器之实现随机选择图片

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jq筛选选择器&lt;/title&gt; &lt;style&gt; body{ back
复制链接

扫一扫