jquery simple vote 简单的投票模拟

最新推荐文章于 2024-06-03 09:56:37 发布

sysutangxiaoxi

最新推荐文章于 2024-06-03 09:56:37 发布

阅读量553

点赞数

本文链接：https://blog.csdn.net/u014687259/article/details/24260555

版权

结果图如下： demo

<!DOCTYPE html>
<html>
<head>
<title>JQuery Simple Vote</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#container div a').click(function(){
            $(this).parent().animate({
                width:'+=100px'
            },500);
            $(this).prev().html(parseInt($(this).prev().html())+1);
            return false;
        })
    })
</script>
<style type="text/css">
    *{
        padding:0;
        margin:0;
        font-family:Arial
    }
    body{
        background:#ffffff url('trentanove.gif') repeat right top;
    }
    #container{
        margin-top:20px;
        color:#fff;
    }
    #container #question{
        display:block;
        padding:20px;
        font-weight:bold;
        letter-spacing:-3px;
        margin-bottom:20px;
        padding:10px;
        font-size:40px;
    }
    #container div{
        font-weight:bold;
        letter-spacing:-3px;
        font-size:34px;
        background:#0099cc;
        margin-bottom:15px;
        padding:10px;
        color:#fff;
        border-left:20px solid #333;
        width:400px;
        -webkit-border-radius:0.5em;
        -moz-border-radius:0 0.5em 0.5em 0;
        border-radius:0 1.5em 1.5em 0
    }
    #container div a{
        border-radius:0.3em;
        text-decoration:none;
        color:#0099cc;
        padding:5px 15px;
        background:#333;
        margin:0 20px;
    }
    #container div a:hover{
        color:#fff;
    }
</style>
</head>
<body>

  <div id="container">
      <span id="question">What is your favorite server side language?</span>
      <div><span>0</span><a href="">Vote</a>PHP</div>
      <div><span>0</span><a href="">Vote</a>Ruby</div>
      <div><span>0</span><a href="">Vote</a>Java</div>
      <div><span>0</span><a href="">Vote</a>ASP</div>
      <div><span>0</span><a href="">Vote</a>Perl</div>
      <div><span>0</span><a href="">Vote</a>ColdFusion</div>
  </div>

</body>
</html>