jquery雙方投票對決
編輯：JQuery特效代碼
體驗效果：http://hovertree.com/texiao/jquery/21/
這是一款基於jquery實現的仿搜狐投票動畫特效源碼，運行該源碼可見VS圖標首先出現在中間位置，緊接著隨著投票比例做左右移動。移動動畫效果平滑自然。具有非常好的用戶體驗。該源碼兼容目前最新的各類主流浏覽器。
另外實現了投票的效果。
代碼如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿搜狐投票效果演示 - 何問起</title><base target="_blank" />
<link href="http://hovertree.com/texiao/jquery/21/css/hovertree.css" rel="stylesheet" type="text/css" />
</head>
<body>
<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="hovertree2" class="scope">正方<span id="hovertree"></span>票</div>
<div id="keleyi2" class="scope">反方<span id="keleyi"></span>票</div>
<div id="myslider2" class="scope">總共<span id="myslider"></span>票</div>
</div>
<div style="width:440px; margin:0px auto;"><input value="投正方" id="tohovertree" type="button" />
<input value="投反方" id="tokeleyi" type="button" style="float:right" />
<div class="clearHovertree"></div>
</div>
<div class="hvtholder"><a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjae/habowri1.htm">原文</a><br />
<br />點擊按鈕投票，並注意VS的移動。
</div>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
playZoneMenu();
$("#tohovertree").on("click", function () { hovertreecom++; playZoneMenu(); })
$("#tokeleyi").on("click", function () { keleyicom++; playZoneMenu(); })
});
var hovertreecom = 20;
var keleyicom = 6;
function playZoneMenu()
{// play ZoneMenu
$("#white").animate({ width: 0,left:"250px"}, 1000 ,function(){
$("#vs").fadeIn("slow",function(){
$("#myslider").html(hovertreecom + keleyicom); $("#hovertree").html(hovertreecom); $("#keleyi").html(keleyicom);
var newLeft = hovertreecom / (hovertreecom + keleyicom) * 500 - 20 + "px"; //20為vs 的一半
$("#vs").animate({left:newLeft}, 1000);
$("#red").animate({width:newLeft}, 1000);
});
});
}
</script>
</body>
</html>
這是一款基於jquery實現的仿搜狐投票動畫特效源碼，運行該源碼可見VS圖標首先出現在中間位置，緊接著隨著投票比例做左右移動。移動動畫效果平滑自然。具有非常好的用戶體驗。該源碼兼容目前最新的各類主流浏覽器。
另外實現了投票的效果。
代碼如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿搜狐投票效果演示 - 何問起</title><base target="_blank" />
<link href="http://hovertree.com/texiao/jquery/21/css/hovertree.css" rel="stylesheet" type="text/css" />
</head>
<body>
<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="hovertree2" class="scope">正方<span id="hovertree"></span>票</div>
<div id="keleyi2" class="scope">反方<span id="keleyi"></span>票</div>
<div id="myslider2" class="scope">總共<span id="myslider"></span>票</div>
</div>
<div style="width:440px; margin:0px auto;"><input value="投正方" id="tohovertree" type="button" />
<input value="投反方" id="tokeleyi" type="button" style="float:right" />
<div class="clearHovertree"></div>
</div>
<div class="hvtholder"><a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjae/habowri1.htm">原文</a><br />
<br />點擊按鈕投票，並注意VS的移動。
</div>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
playZoneMenu();
$("#tohovertree").on("click", function () { hovertreecom++; playZoneMenu(); })
$("#tokeleyi").on("click", function () { keleyicom++; playZoneMenu(); })
});
var hovertreecom = 20;
var keleyicom = 6;
function playZoneMenu()
{// play ZoneMenu
$("#white").animate({ width: 0,left:"250px"}, 1000 ,function(){
$("#vs").fadeIn("slow",function(){
$("#myslider").html(hovertreecom + keleyicom); $("#hovertree").html(hovertreecom); $("#keleyi").html(keleyicom);
var newLeft = hovertreecom / (hovertreecom + keleyicom) * 500 - 20 + "px"; //20為vs 的一半
$("#vs").animate({left:newLeft}, 1000);
$("#red").animate({width:newLeft}, 1000);
});
});
}
</script>
</body>
</html>
- 上一頁:jq的html()方法
- 下一頁:jq的show()方法
小編推薦
熱門推薦