`
Franciswmf
  • 浏览: 796891 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

animate poll plugin

 
阅读更多
(function ($){
	var defaults = {
		title:null,//上方的标题
		titleColor:'#C3C3C3',
		titleFontSize:'15px',
		titleAlign:'center',
		width:'500px',//一共的宽度
		speed:1000,//显示效果的时间(毫秒)
		bgImg:'../../images/bg.gif',//背景
		multiple:false,//是否多选
		showPoll:false,//是否显示投票
		data:'',//数据
		itelTotal:6,//一共支持的颜色数量
		itemStyle:{
			fontSize:'12px',//每条文字的大小
			bgColor:'#fffae2'//每条的背景颜色
		}
	};
	$.fn.poll = function (id,options){
		options = $.extend(defaults,options);
		var dataObj = eval("("+options.data+")");//数据JSON
		var o = this;
		var total=0;
		$.each(dataObj.root,function (i,n){//统计一共的投票数
			total+=parseInt(n.value);
		});
		$(this).append("<table id='"+id+"' border='0' style='font-size:"+options.itemStyle.fontSize+";' width='"+defaults.width+"'></table>");//设置TABLE的长度
		if(null != options.title) //是否显示标题
		$("table",this).append("<tr><td colspan=4 align='"+options.titleAlign+"' ><span style='color:"+options.titleColor+";font-size:"+options.titleFontSize+";'>"+options.title+"</span></td></tr>");
		
		var itemDiv;
		$.each(dataObj.root,function (i,n){
		    var index=0;//当前个数,超过5个循环取
			var percentage = (n.value/total*100).toFixed(2);//取后两位百分比
			if(isNaN(percentage)){
				percentage=0;
			}
			var imgWidth = parseFloat(percentage);
			if(imgWidth>0)
			{
				if(i>(options.itelTotal-1))
					index = i-(options.itelTotal-1);
				else
					index = i;
				itemDiv="<div style='background-color:"+options.itemStyle.bgColor+";font-size:"+options.itemStyle.fontSize+"'><div divWidth='"+imgWidth+"' style='width:0%;background-image:url("+options.bgImg+");' class='poll_plan"+index+"' ><div class='plan_e' style='background-image:url("+options.bgImg+");'><div class='plan_c'  style='background-image:url("+options.bgImg+");'></div></div></div></div>";
			}
			else
			{
				itemDiv='';
			}
			$("table",o).append("<tr><td width='30%' align='right' >"+n.name+":</td><td width='60%' bgcolor='"+options.itemStyle.bgColor+"' >"+itemDiv+"</td><td width='10%' nowrap >"+n.value+"("+percentage+"%)</td></tr>");
			
			if(options.showPoll){//是否显示投票
				if(options.multiple){//是否是多选
					$("tr:last").append("<td><input type='checkbox' name='poll_"+id+"' value='"+n.id+"'/></td>");
				}else {
					$("tr:last").append("<td><input type='radio' name='poll_"+id+"' value='"+n.id+"'/></td>");
				}
			}
		});
		$("div",o).each(function(i,n){
			if($(n).attr('divWidth'))
			{
				$(n).animate( { width: $(n).attr('divWidth')+'%'}, options.speed );
				$(n).removeAttr("divWidth");
			}
		});
		return this;
	};
	$.fn.getChecked=function (){
		var checked_val;
		return $(":checked",this);
	};
})(jQuery);
分享到:
评论

相关推荐

    animate.min.css动画特效

    Animate.min.css是一个非常实用的CSS库,专门用于创建各种丰富的动画效果。这个库是由开发者Daniel Eden精心设计和编写的,它极大地简化了在Web开发中添加动态视觉效果的过程。通过在HTML元素上简单地应用预定义的...

    animate(CSS动画库)

    Animate.css 是一个强大的开源CSS动画库,它提供了一系列预先定义好的动画效果,使得开发者无需从零开始编写复杂的CSS代码,就能轻松实现各种炫酷的动态效果。这个库被广泛应用于网页设计,提升用户体验,吸引用户...

    animate动画特效重复调用

    在jQuery库中,`animate()`函数是一个非常强大的工具,用于创建自定义的平滑动画效果。这个函数允许开发者控制HTML元素的各种属性,如宽度、高度、位置等,并以指定的速度平滑地改变这些属性。在标题和描述中提到的...

    animate.css-4.1.1.zip

    Animate.css是一个流行的开源库,专为网页设计师和开发者提供了一系列预先定义好的动画效果。这个"animate.css-4.1.1.zip"压缩包包含了Animate.css的4.1.1版本,这是一个更新到最新状态的库,确保了你能够获得最新的...

    Animate动画库及演示

    Animate.css是一个广受欢迎的开源CSS3动画库,它为网页开发者提供了一系列预先设计好的、易于使用的动画效果。这个库极大地简化了在Web项目中添加动态元素的过程,无需编写复杂的JavaScript或者CSS关键帧动画。让...

    Animate-CC课件汇总整本书电子教案全套课件完整版ppt教学教程.ppt

    "Animate CC课件汇总整本书电子教案全套课件完整版ppt教学教程.ppt" Animate CC 是基于 Adobe Flash Professional CC 的基础上发展得来的二维动画制作软件。 Animate CC 拥有大量的新特性,特别是在保留原本的 ...

    AnimateCC二维动画设计与制作-课程标准.pdf

    AnimateCC二维动画设计与制作课程标准 本课程旨在培养数字媒体应用技术专业(影视动画方向)学生的二维动画设计与制作能力,目标是让学生掌握计算机二维动画设计与制作的基本知识与创作技巧,能制作不同类型的简单...

    swiper+animate.docx

    ### Swiper结合Animate实现整屏滚动效果的知识点详解 #### 一、Swiper与Animate概述 Swiper是一款功能强大且灵活的触摸滑动组件库,适用于网页和移动应用中的多种场景,如幻灯片展示、产品轮播图、广告轮播等。其...

    Animate-CC-2019-动漫制作案例教程全书电子教案完整版课件.ppt

    Animate CC 2019 动漫制作案例教程全书电子教案完整版课件 Animate CC 2019 是 Adobe 公司推出的动漫制作软件,广泛应用于动画、漫画、游戏、广告、教育等领域。本教程旨在帮助读者快速掌握 Animate CC 2019 的基础...

    Animate.css 一款强大的预设css3动画库

    Animate.css 是一个强大的预设CSS3动画库,它为开发者提供了丰富的动画效果,极大地简化了在Web项目中添加动态效果的工作。这个库包含了各种各样的动画类型,如淡入淡出、滑动、旋转、缩放等,适用于按钮、图标、...

    animate插件

    Animate.css是一款广受欢迎的开源CSS动画库,专为网页设计师和开发者设计,旨在简化和加速网页动态效果的实现。这款插件提供了丰富的预定义动画效果,涵盖了过渡、旋转、缩放、滑动等多种视觉表现形式,让网页元素的...

    wow.js+animate

    "wow.js+animate" 是一种结合了Wow.js和Animate.css技术的解决方案,用于在网页上创建引人入胜的动画效果。让我们深入探讨这两个关键组件以及如何将它们整合到你的网页项目中。 **Wow.js** 是一个JavaScript库,由...

    animate动画脚本

    Animate动画脚本是一种广泛应用于网页和应用程序中的技术,用于创建流畅、交互式的视觉效果。它在Web开发领域中扮演着重要角色,使得开发者能够轻松地为网站增添动态元素,提高用户体验。Animate通常与CSS(层叠样式...

    jquery数字跳动插件Animate Number.zip

    《jQuery数字跳动插件AnimateNumber深度解析》 在当今的网页开发中,JavaScript库如jQuery极大地简化了前端开发工作,尤其是动态效果的实现。其中,“jQuery数字跳动插件AnimateNumber”是一款专为实现数字动态变化...

    Jquery的animate实例

    本篇文章将深入探讨jQuery中的`animate()`方法,这是一个强大的功能,用于创建平滑的自定义动画效果。 `animate()`方法是jQuery库中一个核心的函数,允许开发者创建复杂的动画序列。它通过改变CSS属性值,如宽度、...

    Animate的基本操作

    Adobe Animate是一款强大的动画创作软件,它被广泛用于制作互动式网页内容、2D动画、游戏、应用程序以及教育课件。本教程将详细介绍Animate的基本操作,帮助用户掌握其核心功能。 首先,熟悉Animate的工作界面至关...

    免费jquery animate小用例

    在这个"免费jquery animate小用例"中,我们将深入探讨`animate()`的使用方法及其背后的原理。 `animate()`函数允许开发者自定义元素的各种CSS属性(如宽度、高度、位置等)的变化过程,从而实现丰富的动态效果。...

    actionScript关节运动animate

    在“actionScript关节运动animate”这个主题中,我们将深入探讨如何利用ActionScript来模拟人体关节的运动,这在游戏开发、教育应用或艺术表现等领域具有广泛应用。 在Animate(以前称为Flash Professional)中,...

    原生js实现jquery函数animate()动画效果的简单实例

    本文将介绍如何使用原生JavaScript实现类似jQuery中的animate()方法的动画效果。在前端开发中,jQuery提供了一套非常方便的API来实现动画效果,但随着Web标准的发展和性能优化需求的提高,原生JavaScript的方法逐渐...

    课件资源等--Animate动画设计与制作项目教程.zip

    Animate动画设计与制作项目教程是针对想要学习和掌握Adobe Animate这一强大动画制作软件的用户而准备的教学资源包。这个压缩文件包含了丰富的课程材料,旨在帮助初学者和进阶者提升在数字媒体、游戏开发、网页动画...

Global site tag (gtag.js) - Google Analytics