个人中心
gpt4 book ai didi

javascript - 受javascript影响时如何影响元素

转载 作者：行者123 更新时间：2023-11-28 11:07:54 28 4
gpt4 key购买 nike

尝试在翻转时更改框的背景颜色(向您展示我的意思会容易得多:(http://iam.colum.edu/students/jordan.max/demo/demo.php)。我是 jQuery 的新手并且做了一个教程，并且很容易能够对代码进行去工程化并弄清楚该怎么做才能让它做我想做的事。我相对轻松地做到了这一点，直到我尝试在翻转元素时更改背景颜色。这很奇怪，因为当我使用“检查元素”，然后我在对象上单击鼠标，它说我在“元素”中设置了背景，但这在我的 CSS 中不存在。不想混淆(这听起来可能确实令人困惑，这就是为什么我给出了链接)，希望有人知道我的问题是什么。

演示.php

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Sponsor Flip Wall With jQuery &amp; CSS | Tutorialzine demo</title>

        <link rel="stylesheet" type="text/css" href="styles.css" />
        <link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
        <script type="text/javascript" src="jquery.flip.min.js"></script>

        <script type="text/javascript" src="script.js"></script>

    </head>

    <body>

        <h1>Sponsor Flip Wall With jQuery &amp; CSS</h1>
        <h2><a href="http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/">Go Back to Portfolio &raquo;</a></h2>

<?php

    // Each sponsor is an element of the $sponsors array:

    $sponsors = array(
        array('github','The biggest social network in the world.','http://www.facebook.com/'),
        array('twitter','The leading software developer targeted at web designers and developers.','http://www.adobe.com/')
    );


    // Randomizing the order of sponsors:

    shuffle($sponsors);

?>



        <nav id="main">

            <figure class="sponsorListHolder">


        <?php

            // Looping through the array:

            foreach($sponsors as $company)
            {
                echo'
                <div class="sponsor" title="Click to flip">
                    <div class="sponsorFlip" > 
                            <p>'.$company[0].'</p>
                    </div>

                    <div class="sponsorData">
                        <div class="sponsorDescription">
                            '.$company[1].'
                        </div>
                        <div class="sponsorURL">
                            <a href="'.$company[2].'">'.$company[2].'</a>
                        </div>
                    </div>
                </div>

                ';
            }

        ?>

                <aside class="clear"></aside>
            </figure>

        </nav>
        <footer>
            <p class="note">None of these companies are actually sponsors of Tutorialzine.</p>
        </footer>
    </body>
</html>

脚本.js

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.sponsorFlip').bind("click",function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:

            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden from view with display:none)
                    // into the clicked .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});

样式.css

*{
    /* Resetting the default styles of the page */
    margin:0;
    padding:0;
}

body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:lightgreen;
    font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
    margin-bottom:30px;

}

.sponsor{
    width:400px;
    height:400px;
    float:left;
    margin:4px;
    padding: 30px;
    background: #F66F89;
    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.sponsor:active{
    background: #F66F89;
}

.sponsorFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;  
    background: #61D89F;
    color:#0196e3;
    font-family: 'Oregano', cursive;
    font-size: 2em;
}

.sponsorFlip:hover{
    border:1px solid #999;

    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}



.sponsorFlip img{
    /* Centering the logo image in the middle of the sponsorFlip div */
    /* Not being used right now 
    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -70px;
    */
} 
.sponsorData{
    /* Hiding the .sponsorData div */
    display:none;
}

.sponsorDescription{
    font-size:11px;
    padding:50px 10px 20px 20px;
    font-style:italic;

}

.sponsorURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}


/* The styles below are only necessary for the styling of the demo page: */


#main{
    position:relative;
    margin:0 auto;
    width:960px;
}

h1{
    padding:30px 0;
    text-align:center;
    text-shadow:0 1px 1px white;
    margin-bottom:30px;
    background-color: #F66F89;
}

h1,h2{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

h2{
    font-size:14px;
    font-weight:normal;
    text-align:center;

    position:absolute;
    right:40px;
    top:40px;
}

.note{
    font-size:12px;
    font-style:italic;
    padding-bottom:20px;
    text-align:center;
}

a, a:visited {
    color:#0196e3;
    text-decoration:none;
    outline:none;
    color: lightgreen;
}

a img{
    border:none;
}

最佳答案

如果我没记错的话你可以使用“color”作为参数

   elem.flip({
                direction:'lr',
                speed: 350,
                color: 'blue', //color
                onBefore: function(){}
    })

关于javascript - 受javascript影响时如何影响元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22162335/

28 4 0
文章推荐： ios - Swift 配置自定义单元格
文章推荐： javascript - 为什么在 Javascript 中创建元素全局变量是不好的？
文章推荐： html - 放置 float 属性后按钮不起作用
文章推荐： javascript - CSS 颜色叠加
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com