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

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

另外实现了投票的效果。

代码如下：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery仿搜狐投票效果演示 - 何问起</title><base target="_blank" />
  6. <link href="http://hovertree.com/texiao/jquery/21/css/hovertree.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="box_bg">
  10. <div id="container">
  11. <div id="green" class="line"></div>
  12. <div id="red" class="line"></div>
  13. <div id="white" class="line"></div>
  14. <div id="vs"></div>
  15. </div>
  16. </div>
  17.  
  18. <div style="width:440px; margin:0px auto;">
  19. <div id="hovertree2" class="scope">正方<span id="hovertree"></span>票</div>
  20. <div id="keleyi2" class="scope">反方<span id="keleyi"></span>票</div>
  21. <div id="myslider2" class="scope">总共<span id="myslider"></span>票</div>
  22. </div>
  23. <div style="width:440px; margin:0px auto;"><input value="投正方" id="tohovertree" type="button" />
  24. <input value="投反方" id="tokeleyi" type="button" style="float:right" />
  25. <div class="clearHovertree"></div>
  26. </div>
  27. <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 />
  28. <br />点击按钮投票，并注意VS的移动。
  29. </div>
  30.  
  31. <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
  32. <script type="text/javascript">
  33. $(document).ready(function () {
  34. playZoneMenu();
  35. $("#tohovertree").on("click", function () { hovertreecom++; playZoneMenu(); })
  36. $("#tokeleyi").on("click", function () { keleyicom++; playZoneMenu(); })
  37.  
  38. });
  39. var hovertreecom = 20;
  40. var keleyicom = 6;
  41. function playZoneMenu()
  42. {// play ZoneMenu
  43. $("#white").animate({ width: 0,left:"250px"}, 1000 ,function(){
  44. $("#vs").fadeIn("slow",function(){
  45. $("#myslider").html(hovertreecom + keleyicom); $("#hovertree").html(hovertreecom); $("#keleyi").html(keleyicom);
  46. var newLeft = hovertreecom / (hovertreecom + keleyicom) * 500 - 20 + "px"; //20为vs 的一半
  47. $("#vs").animate({left:newLeft}, 1000);
  48. $("#red").animate({width:newLeft}, 1000);
  49. });
  50. });
  51. }
  52. </script>
  53. </body>
  54. </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. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  2. Hybrid App移动应用开发初探

    一.移动App类型及其优缺点 1.1 Native App Native App(原生App)是用原生语言(Object-C/Java/C#/....)开发,用户需要下载安装的手机应用. 优点是 可以 ...

  3. 《HiWind企业快速开发框架实战》（0）目录及框架简介

    <HiWind企业快速开发框架实战>(0)目录及框架简介 本系列主要介绍一款企业管理系统快速开发框架,该框架旨在快速完成企业管理系统,并实现易维护可移植的目标. 使用逐个系统模块进行编码的 ...

  4. C++高精度计时器——微秒级时间统计

    在C++中,经常需要通过计时来统计性能信息,通过统计的耗时信息,来分析性能瓶颈,通常情况下,可能毫秒级别的时间统计就足够用了,但是在毫厘必争的性能热点的地方,毫秒级别的统计还是不够的,这种情况下,就需 ...

  5. Android N 多窗口模式，你需要知道的一切

    Android N中最大.最引人注意的变化就是Mutil-window模式.对于一个开发者,我们最关心的就是:Mutil-window模式下怎么配置mutil-window模式.Activity的生命 ...

  6. 慎重管理SQL Server服务的登录（启动）账户和密码

    今天是大年初三,先跟大家拜个年,祝大家新年快乐.今天处理了一个alwaysOn问题——辅助副本因为磁盘空间不足一直显示[未同步——可疑],在日志中可以看到数据库处于挂起状态,与主副本失去同步.原以为只 ...

  7. angularjs controller 继承

    前沿 最近在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 CRUD ...

  8. Spring学习记录(七)---表达式语言-SpEL

    SpEL---Spring Expression Language:是一个支持运行时查询和操作对象图表达式语言.使用#{...}作为定界符,为bean属性动态赋值提供了便利. ①对于普通的赋值,用Sp ...

  9. Css概要与选择器，刻度单位

    目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先 ...

  10. LINQ系列：LINQ to ADO.NET概述

    LINQ to ADO.NET 包括两种独立的技术: LINQ to DataSet 和 LINQ to SQL. 使用 LINQ to DataSet 可以对DataSet 执行丰富而优化的查询,而 ...