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

来源：互联网 2023-03-16 23:54:42 309

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

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

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

书写hmtl代码。div id="box_bg"> div id="container"> div id="green" class="line">/div> div id="red" class="line">/div> div id="white" class="line">/div> div id="vs">/div> /div>/div>div style="width:440px; margin:0px auto;"> div id="aa2" class="scope">正方span id="aa">/span>票/div> div id="bb2" class="scope">反共span id="bb">/span>票/div> div id="all2" class="scope">总共span id="all">/span>票/div>/div>

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

书写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 }

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