jquery仿搜狐投票动画代码

体验效果：http://hovertree.com/texiao/jquery/21/

这是一款基于jquery实现的仿搜狐投票动画特效源码，运行该源码可见VS图标首先出现在中间位置，紧接着随着投票比例做左右移动（正方何问起，反方何雯琪）。移动动画效果平滑自然。具有非常好的用户体验。该源码兼容目前最新的各类主流浏览器。

另外实现了投票的效果。

jquery仿搜狐投票动画代码

代码如下：

<!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仿搜狐投票动画代码

相关文章