JQUERY插件：仿QQ今日话题正反方投票百分比显示

最新推荐文章于 2017-10-18 13:36:00 发布

「已注销」

最新推荐文章于 2017-10-18 13:36:00 发布

阅读量1k

点赞数

分类专栏： web 文章标签： jquery插件 qq function stylesheet float div

本文链接：https://blog.csdn.net/taoliujun/article/details/6779045

版权

web 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>title</title>
<link rel="stylesheet" href="global.css"/>
<script src="jquery.js"></script>
<script src="qqscroll.js"></script>
<script>
$(function(){
 $("#div1").qqscroll({"q_num":297,"q_max":1182});
});
</script>
</head>
<body>
<div id="div1" style="width:400px;overflow:hidden;margin:10px;height:20px;"></div>
</body>
</html>

/*
插件：仿QQ今日话题正反方投票百分比显示
更新：2010.08.05
作者：陶留军
QQ：  290762903
*/

/*
插件参数
 $(dom).qqscroll({"q_num":297,"q_max":1182});
*/
(function($)
{
 $.fn.qqscroll = function(options)
 {
  var defaults=
  {
   //缺省option
   q_num:'50',//量
   q_max:'100',//总量
   q_speed:'2',//增长速度(事实上的q_speed = q_w*q_speed*0.01)
   q_speedf:50,//间隔时间
   q_bgcolor:'#bada79',//背景色
   q_bdcolor:'#9ac04b',//边框色
   q_filtercolor:'#e8be72',//填充色
   q_numcolor:'#666666',//字体颜色
   q_numw:'35',//字体宽度
  }
  var o = $.extend(defaults, options);
  return this.each(function()
  {
   //代码执行部分
   var t=$(this);
   var t_h=t.height();
   var t_w=t.width();
   var t_middiv=(t_w-o.q_numw*2-2);
   var t_html='<span id="q_numspan" style="float:left;overflow:hidden;width:'+o.q_numw+'px;height:'+t_h+'px;line-height:'+t_h+'px;color:'+o.q_numcolor+';">0%</span><div style="float:left;overflow:hidden;height:'+(t_h-2)+'px;position:relative;width:'+t_middiv+'px;background:'+o.q_bgcolor+';border:1px solid '+o.q_bdcolor+'"><div id="t_qqscroll" style="overflow:hidden;position:absolute;width:0px;height:100%;background:'+o.q_filtercolor+';text-align:right;color:'+o.q_numcolor+';"></div></div><span style="float:left;overflow:hidden;width:'+o.q_numw+'px;height:'+t_h+'px;line-height:'+t_h+'px;color:'+o.q_numcolor+';">'+'100%'+'</span>';   
   t.html(t_html);   
   var q_speedwidth=t_middiv*o.q_speed*1000*0.01/1000; //javascript的SB一样的精度机制
   var q_div=$("#t_qqscroll");
   var q_divwidth=0;//因为width只能是整数，这里声明一个 精度变量
   function bar(){
    if(q_div.width()<(t_middiv*(o.q_num*1000/o.q_max/1000))){
     $("#q_numspan").text(Math.round((q_divwidth*1000/t_middiv)*100/1000)+"%");
     //q_div.text(Math.round(o.q_max*Math.round(q_divwidth*1000/t_middiv/1000*100)*0.01));
     q_divwidth+=q_speedwidth;
     q_div.width(q_divwidth);
     setTimeout(function(){bar()},o.q_speedf);
    }
    else{     
     q_div.width((t_middiv*(o.q_num*1000/o.q_max/1000)));
     //q_div.text(o.q_num);
     $("#q_numspan").text(Math.round(o.q_num/o.q_max*100)+"%");
     return false;
    }
   }   
   setTimeout(function(){bar()},o.q_speedf);  
  }
  );
 };
}
)
(jQuery);

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQUERY插件：仿QQ今日话题正反方投票百分比显示

title$(function(){ $("#div1").qqscroll({"q_num":297,"q_max":1182});});/*插件：仿QQ今日话题正反方投票百分比显示更新：2010.08.05作者：陶留军QQ： 290
复制链接

扫一扫

专栏目录