jQuery腾讯肌肤缺水指数测试

来源:https://www.sucaihuo.com/js/262.html 2015-08-20 03:12浏览(839) 收藏

群里有人分享出来的肌肤测试效果。
jQuery腾讯肌肤缺水指数测试
分类:其它特效 > jQuery插件 难易:中级
查看演示 下载资源 下载积分: 20 积分

HTML

<div class="tc_wt_box six"> 
     <h2>你的工作是咩?</h2> 
     <ul> 
      <li class="one" bcolor="yellow">学生党</li> 
      <li class="two" bcolor="red">苦逼<br />加班族</li> 
      <li class="two" bcolor="yellow">个体<br />老板</li> 
      <li class="one" bcolor="yellow">家庭主妇</li> 
      <li class="one" bcolor="blue">自由人</li> 
      <li class="one" bcolor="orange">上班族</li> 
     </ul> 
    </div> 
    <div class="tc_wt_box sev"> 
     <h2>如果不是萌妹子,那你是?</h2> 
     <ul> 
      <li class="one" bcolor="red">女汉子</li> 
      <li class="one" bcolor="orange">女强人</li> 
      <li class="one" bcolor="blue">白富美</li> 
      <li class="one" bcolor="yellow">文艺控</li> 
      <li class="one ml" bcolor="orange">女屌丝</li> 
      <li class="one" bcolor="yellow">萌妹子</li> 
      <li class="one" bcolor="blue">小清新</li> 
     </ul> 
</div>

引入jQuery库、测试css和js

<link type="text/css" href="style/css/page.css" rel="stylesheet" />
<script type="text/javascript" src="style/js/jquery.js"></script> 
<script type="text/javascript" src="style/js/test.js"></script

js/test.js

//问题答案点击
function change(now) {
    $('.test .tc_wt_box').eq(now).show().find('h2').animate({
        'margin-top': '150px',
        'opacity': '1'
    },
    600,
    function() {
        $('.test .tc_wt_box').eq(now).find('li').each(function(i) {
            $(this).delay(i * 100).fadeIn(350);
        });
    });
}
标签: qq测试test腾讯
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2