多语言展示
当前在线:1671今日阅读:75今日分享:44

jQuery正方反方辩论投票动画特效

jQuery正方反方辩论投票动画特效
工具/原料

adobe dreamweaver

方法/步骤
1

新建html文档。

2

书写hmtl代码。

    
        
        
        
        
    
    
正方
    
反共
    
总共

3

书写css代码。body { font-size: 12px; color: #666 }#box_bg { width: 440px; height: 10px; background: url(../images/bg.gif) no-repeat; padding: 24px 48px; margin: 0px auto; }#container { height: 10px; position: relative; }.line { height: 10px; position: absolute; }#white, #green { width: 100%; }#green { background: url(../images/green.gif) repeat-x #00FF00; height: 10px; }#red { background: url(../images/red.gif) repeat-x #FF0000; height: 10px; width: 50%; }#white { background-color: #fff }#vs { width: 40px; height: 40px; background: url(../images/vs.gif) no-repeat; line-height: 40px; text-align: center; position: absolute; left: 205px; top: -10px; display: none }.scope { height: 24px; text-align: center; }.scope span { color: #FF3300; font-weight: bold; padding: 0px 5px; }#all2 { margin: 0 auto }#aa2 { float: left }#bb2 { float: right }

4

书写并添加js代码。