体验效果：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. 利用JNI技术在Android中调用、调试C++代码

    参考:http://blog.micro-studios.com/?p=4212 代码:http://pan.baidu.com/s/1sjukSDf

  2. 免费开源分布式系统日志收集框架 Exceptionless

    前言 从去年就答应过Eric(Exceptionless的作者之一),在中国会帮助给 Exceptionless 做推广,但是由于各种原因一直没有做这件事情,在此对Eric表示歉意.:) Except ...

  3. [.net 面向对象程序设计进阶] (15) 缓存(Cache)(二) 利用缓存提升程序性能

    [.net 面向对象程序设计进阶] (15) 缓存(Cache)(二) 利用缓存提升程序性能 本节导读: 上节说了缓存是以空间来换取时间的技术,介绍了客户端缓存和两种常用服务器缓布,本节主要介绍一种. ...

  4. gulp思考

    Gulp,一个基于流的构建工具. 这是自己写的一个构建的demo,只是一个纯演示的示例,并没有完成什么项目工作.下面根据这个demo介绍一下Gulp. 上代码: gulpfile.js 'use st ...

  5. VS代码提示不出现或者提示变成英文或者各种奇葩问题的解决

    万能法==>重置 代码提示变成英文的了 打开开发员命令提示 输入:devenv.exe /setup /resetuserdata /resetsettings 重新打开,会和你第一次安装完毕一 ...

  6. jQuery 2.0.3 源码分析core - 选择器

         声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!      打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...

  7. [转]PHP的执行流程,PHP扩展加载过程

    原文:http://www.imsiren.com/archives/535 为了以后能开发PHP扩展..就一定要了解PHP的执行顺序..这篇文章就是为C开发PHP扩展做铺垫. web环境 我们假设为 ...

  8. Python第一天 - 函数

    ---恢复内容开始--- (一)定义一个函数 def 函数名(参数): 函数体 return 返回值 例: def mySum(x , y): return int(x)+int(y)print(my ...

  9. 【结果很简单,过程很艰辛】记阿里云Ons消息队列服务.NET接口填坑过程

    Maybe 这个问题很简单,因为解决方法是非常简单,但填坑过程会把人逼疯,在阿里云ONS工作人员.同事和朋友的协助下,经过一天的调试和瞎捣鼓,终于解决了这个坑,把问题记下来,也许更多人在碰到类似问题的 ...

  10. Attach Volume 操作（Part I） - 每天5分钟玩转 OpenStack（53）

    上一节我们创建了 volume,本节讨论如何将 volume attach 到 Instance,今天是第一部分. Volume 的最主要用途是作为虚拟硬盘提供给 instance 使用.Volume ...