ProgressBarWars.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. $.fn.extend({ProgressBarWars: function(opciones) {
  2. var ProgressBarWars=this;
  3. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  4. var styleUnique = Date.now();
  5. var StringStyle="";
  6. defaults = {
  7. porcentaje:"100",
  8. tiempo:1000,
  9. color:"",
  10. estilo:"yoda",
  11. tamanio:"30%",
  12. alto:"6px"
  13. }
  14. var opciones = $.extend({}, defaults, opciones);
  15. if(opciones.color!='')
  16. {
  17. StringStyle="<style>.color"+styleUnique+"{ border-radius: 6px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  18. $(ProgressBarWars).before(StringStyle);
  19. if(opciones.flag){
  20. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  21. }
  22. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  23. this.mover = function(ntamanio) {
  24. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  25. };
  26. return this;
  27. }
  28. });
  29. $.fn.extend({ProgressBarWars1: function(opciones) {
  30. var ProgressBarWars=this;
  31. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  32. var styleUnique = Date.now();
  33. var StringStyle="";
  34. defaults = {
  35. porcentaje:"100",
  36. tiempo:1000,
  37. color:"",
  38. estilo:"yoda",
  39. tamanio:"30%",
  40. alto:"6px"
  41. }
  42. var opciones = $.extend({}, defaults, opciones);
  43. if(opciones.color!='')
  44. {
  45. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  46. $(ProgressBarWars).before(StringStyle);
  47. if(opciones.flag){
  48. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space1"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  49. }
  50. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  51. this.mover = function(ntamanio) {
  52. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  53. };
  54. return this;
  55. }
  56. });
  57. $.fn.extend({ProgressBarWars2: function(opciones) {
  58. var ProgressBarWars=this;
  59. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  60. var styleUnique = Date.now();
  61. var StringStyle="";
  62. defaults = {
  63. porcentaje:"100",
  64. tiempo:1000,
  65. color:"",
  66. estilo:"yoda",
  67. tamanio:"30%",
  68. alto:"6px"
  69. }
  70. var opciones = $.extend({}, defaults, opciones);
  71. if(opciones.color!='')
  72. {
  73. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  74. $(ProgressBarWars).before(StringStyle);
  75. if(opciones.flag){
  76. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space2"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  77. }
  78. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  79. this.mover = function(ntamanio) {
  80. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  81. };
  82. return this;
  83. }
  84. });
  85. $.fn.extend({ProgressBarWars3: function(opciones) {
  86. var ProgressBarWars=this;
  87. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  88. var styleUnique = Date.now();
  89. var StringStyle="";
  90. defaults = {
  91. porcentaje:"100",
  92. tiempo:1000,
  93. color:"",
  94. estilo:"yoda",
  95. tamanio:"30%",
  96. alto:"6px"
  97. }
  98. var opciones = $.extend({}, defaults, opciones);
  99. if(opciones.color!='')
  100. {
  101. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  102. $(ProgressBarWars).before(StringStyle);
  103. if(opciones.flag){
  104. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space3"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  105. }
  106. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  107. this.mover = function(ntamanio) {
  108. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  109. };
  110. return this;
  111. }
  112. });
  113. $.fn.extend({ProgressBarWars4: function(opciones) {
  114. var ProgressBarWars=this;
  115. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  116. var styleUnique = Date.now();
  117. var StringStyle="";
  118. defaults = {
  119. porcentaje:"100",
  120. tiempo:1000,
  121. color:"",
  122. estilo:"yoda",
  123. tamanio:"30%",
  124. alto:"6px"
  125. }
  126. var opciones = $.extend({}, defaults, opciones);
  127. if(opciones.color!='')
  128. {
  129. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  130. $(ProgressBarWars).before(StringStyle);
  131. if(opciones.flag){
  132. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space4"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  133. }
  134. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  135. this.mover = function(ntamanio) {
  136. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  137. };
  138. return this;
  139. }
  140. });
  141. $.fn.extend({ProgressBarWars5: function(opciones) {
  142. var ProgressBarWars=this;
  143. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  144. var styleUnique = Date.now();
  145. var StringStyle="";
  146. defaults = {
  147. porcentaje:"100",
  148. tiempo:1000,
  149. color:"",
  150. estilo:"yoda",
  151. tamanio:"30%",
  152. alto:"6px"
  153. }
  154. var opciones = $.extend({}, defaults, opciones);
  155. if(opciones.color!='')
  156. {
  157. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  158. $(ProgressBarWars).before(StringStyle);
  159. if(opciones.flag){
  160. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space5"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  161. }
  162. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  163. this.mover = function(ntamanio) {
  164. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  165. };
  166. return this;
  167. }
  168. });
  169. $.fn.extend({ProgressBarWars6: function(opciones) {
  170. var ProgressBarWars=this;
  171. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  172. var styleUnique = Date.now();
  173. var StringStyle="";
  174. defaults = {
  175. porcentaje:"100",
  176. tiempo:1000,
  177. color:"",
  178. estilo:"yoda",
  179. tamanio:"30%",
  180. alto:"6px"
  181. }
  182. var opciones = $.extend({}, defaults, opciones);
  183. if(opciones.color!='')
  184. {
  185. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  186. $(ProgressBarWars).before(StringStyle);
  187. if(opciones.flag){
  188. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space6"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  189. }
  190. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  191. this.mover = function(ntamanio) {
  192. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  193. };
  194. return this;
  195. }
  196. });
  197. $.fn.extend({ProgressBarWars7: function(opciones) {
  198. var ProgressBarWars=this;
  199. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  200. var styleUnique = Date.now();
  201. var StringStyle="";
  202. defaults = {
  203. porcentaje:"100",
  204. tiempo:1000,
  205. color:"",
  206. estilo:"yoda",
  207. tamanio:"30%",
  208. alto:"6px"
  209. }
  210. var opciones = $.extend({}, defaults, opciones);
  211. if(opciones.color!='')
  212. {
  213. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  214. $(ProgressBarWars).before(StringStyle);
  215. if(opciones.flag){
  216. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space7"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  217. }
  218. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  219. this.mover = function(ntamanio) {
  220. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  221. };
  222. return this;
  223. }
  224. });
  225. $.fn.extend({ProgressBarWars8: function(opciones) {
  226. var ProgressBarWars=this;
  227. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  228. var styleUnique = Date.now();
  229. var StringStyle="";
  230. defaults = {
  231. porcentaje:"100",
  232. tiempo:1000,
  233. color:"",
  234. estilo:"yoda",
  235. tamanio:"30%",
  236. alto:"6px"
  237. }
  238. var opciones = $.extend({}, defaults, opciones);
  239. if(opciones.color!='')
  240. {
  241. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  242. $(ProgressBarWars).before(StringStyle);
  243. if(opciones.flag){
  244. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space8"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  245. }
  246. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  247. this.mover = function(ntamanio) {
  248. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  249. };
  250. return this;
  251. }
  252. });
  253. $.fn.extend({ProgressBarWars9: function(opciones) {
  254. var ProgressBarWars=this;
  255. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  256. var styleUnique = Date.now();
  257. var StringStyle="";
  258. defaults = {
  259. porcentaje:"100",
  260. tiempo:1000,
  261. color:"",
  262. estilo:"yoda",
  263. tamanio:"30%",
  264. alto:"6px"
  265. }
  266. var opciones = $.extend({}, defaults, opciones);
  267. if(opciones.color!='')
  268. {
  269. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  270. $(ProgressBarWars).before(StringStyle);
  271. if(opciones.flag){
  272. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space9"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  273. }
  274. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  275. this.mover = function(ntamanio) {
  276. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  277. };
  278. return this;
  279. }
  280. });
  281. $.fn.extend({ProgressBarWars10: function(opciones) {
  282. var ProgressBarWars=this;
  283. var theidProgressBarWars=$(ProgressBarWars).attr("id");
  284. var styleUnique = Date.now();
  285. var StringStyle="";
  286. defaults = {
  287. porcentaje:"100",
  288. tiempo:1000,
  289. color:"",
  290. estilo:"yoda",
  291. tamanio:"30%",
  292. alto:"6px"
  293. }
  294. var opciones = $.extend({}, defaults, opciones);
  295. if(opciones.color!='')
  296. {
  297. StringStyle="<style>.color"+styleUnique+"{ border-radius: 2px;display: block; width: 0%; box-shadow:0px 0px 10px 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+", 0 0 1px "+opciones.color+";background-color: #fff;}</style>";opciones.estilo="color"+styleUnique;}
  298. $(ProgressBarWars).before(StringStyle);
  299. if(opciones.flag){
  300. $(ProgressBarWars).append('<span class="barControl" style="width:'+opciones.tamanio+';"><div class="barContro_space10"><span class="'+opciones.estilo+'" style="height: '+opciones.alto+';" id="bar'+theidProgressBarWars+'"></span></div></span>');
  301. }
  302. $("#bar"+theidProgressBarWars).animate({width: opciones.porcentaje+"%"},opciones.tiempo);
  303. this.mover = function(ntamanio) {
  304. $("#bar"+$(this).attr("id")).animate({width:ntamanio+"%"},opciones.tiempo);
  305. };
  306. return this;
  307. }
  308. });
  309. (function($){
  310. $.fn.extend({
  311. Scroll:function(opt,callback){
  312. //参数初始化
  313. if(!opt) var opt={};
  314. var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
  315. var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
  316. var timerID;
  317. var _this=this.eq(0).find("ul:first");
  318. var lineH=_this.find("li:first").height(), //获取行高
  319. line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数,默认为一屏,即父容器高度
  320. speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度,数值越大,速度越慢(毫秒)
  321. timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒)
  322. if(line==0) line=1;
  323. var upHeight=0-line*lineH;
  324. //滚动函数
  325. var scrollUp=function(){
  326. _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
  327. _this.animate({
  328. marginTop:upHeight
  329. },speed,function(){
  330. for(i=1;i<=line;i++){
  331. _this.find("li:first").appendTo(_this);
  332. }
  333. _this.css({marginTop:0});
  334. _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
  335. });
  336. }
  337. //Shawphy:向下翻页函数
  338. //var scrollDown=function(){
  339. // _btnDown.unbind("click",scrollDown);
  340. // for(i=1;i<=line;i++){
  341. // _this.find("li:last").show().prependTo(_this);
  342. // }
  343. // _this.css({marginTop:upHeight});
  344. // _this.animate({
  345. // marginTop:0
  346. // },speed,function(){
  347. // _btnDown.bind("click",scrollDown);
  348. // });
  349. //}
  350. //Shawphy:自动播放
  351. var autoPlay = function(){
  352. if(timer)timerID = window.setInterval(scrollUp,timer);
  353. };
  354. var autoStop = function(){
  355. if(timer)window.clearInterval(timerID);
  356. };
  357. //鼠标事件绑定
  358. _this.hover(autoStop,autoPlay).mouseout();
  359. _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
  360. _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
  361. }
  362. })
  363. })(jQuery);