jquery css3投票点击结果预览动画效果

代码语言:html

所属分类:图表

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.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">

    #container {
      
    }
    #container #question {
        display: block;
       
        font-weight: bold;
        letter-spacing: -3px;
        margin-bottom: 20px;
        padding: 10px;
        font-size: 40px;
    }
    #container div {
        font-weight: bold;
        letter-spacing: -3px;
        background: #0099cc;
        margin-bottom: 15px;
        padding: 10px;
        font-size: 34px;
        color: #ffffff;
        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;
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0