体验效果：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. 发布两款JQ小插件（图片查看器 + 分类选择器），开源

    图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...

  2. java中文乱码解决之道（八）-----解决URL中文乱码问题

    我们主要通过两种形式提交向服务器发送请求:URL.表单.而表单形式一般都不会出现乱码问题,乱码问题主要是在URL上面.通过前面几篇博客的介绍我们知道URL向服务器发送请求编码过程实在是实在太混乱了.不 ...

  3. R in Action 读书笔记（5）

    MindMapper原文件

  4. ASP.NET MVC 5 - 给数据模型添加校验器

    在本节中将会给Movie模型添加验证逻辑.并且确保这些验证规则在用户创建或编辑电影时被执行. 拒绝重复 DRY ASP.NET MVC 的核心设计信条之一是DRY: "不要重复自己(DRY ...

  5. Servlet程序中玩验证码

    验证码思想:所谓验证码就是产生若干随机数,存放到session中,然后在servlet中获取session中的该值与页面输入值相比较,进而判断正误.   产生验证码的方法: 随机数放在图片中,封装为一 ...

  6. 特邀美国EMC实战专家Mark来华授课

    “轻松搞定EMC-PCB和系统设计”课程介绍 本次课程特邀美国EMC领域权威专家Mark Montrose主讲,将涵盖满足产品电磁兼容性和信号完整性的基本原理.课程涉及多个领域,不仅仅针对PCB设计, ...

  7. ActiveMQ的介绍及使用实例.

    今天就来说下 这个项目中使用ActiveMQ的情况, MQ: message queue, 顾名思义就是消息队列的意思. 一: 使用场景:  消息队列在大型电子商务类网站,如京东.淘宝.去哪儿等网站有 ...

  8. SSISDB1：使用SSISDB管理SSIS Projects

    使用Project Deployment Model,将SSIS Project部署到Integration Services Catalog之后,SSISDB负责管理SSIS Project.在SS ...

  9. canvas学习笔记一

    为了研究pixi库,就顺带从头到位学习下canvas吧 判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...

  10. UDP（强行关闭了一个现有的连接远程主机）

    事件回顾:客户端连接服务器 ,一段时间后会发生服务器“挂掉”的情况,为了找到原因,在调试模式下运行服务器,捕捉到了一下异常: 红色框出来的即为异常原因:强行关闭了一个现有的连接远程主机 然后就发生了可 ...