体验效果：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>

更多：http://www.cnblogs.com/roucheng/p/texiao.html

jquery仿搜狐投票动画代码的更多相关文章

  1. 基于jQuery仿去哪儿城市选择代码

    基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lin ...

  2. Jquery仿彩票更换数字动画效果

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script> ...

  3. 仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...

  4. 一款jQuery仿海尔官网全屏焦点图特效代码

    一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...

  5. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

  6. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  7. 【HTML&CSS】搜狐页面代码编写

    <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"& ...

  8. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  9. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

随机推荐

  1. HTML和CSS经典布局6

    如下图: 需求: 1. 如图 2. 可以从任意div标签开始. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  2. Windows错误码解析

    C或者C++开发肯定经常会遇到各种错误码,由于每个错误码只是一个枚举或者一个整形数值,调试或者输出日志的时候,无法知道这个错误码的具体含义,这时候就需要将此错误码解释出来.对于自己定义的错误码,可以通 ...

  3. 人人都是 DBA（XII）查询信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  4. Generate input file for OVITO

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  5. 你可能不知道的7个CSS单位

    如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...

  6. [ASP.NET MVC 大牛之路]01 - 开篇

    匆匆2014,转眼就到末尾了.在这一年,你还有哪事情些想做而没有做? 2014年在我身上发生了两件意义重大的事,一是正月初一宝宝出生,我升级成为了爸爸:二是进入了一家创业公司,成为了技术负责人. 去年 ...

  7. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  8. PHP面向对象笔记

    一.构造函数.析构函数(1)构造函数:__construct()说明:对象被实例化时调用,可带参数例: $obj = new A($a,$b); (2)析构函数:_destruct()说明:页面执行结 ...

  9. 基于JQuery的浮动DIV显示提示信息并自动隐藏

    /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...

  10. 重温 w3cshool css3

    border-radius: 2em 1em 4em / 0.5em 3em;  兼容性IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Opera 支持 border-radi ...