jquery 超简单的点赞效果

1.HTML(可以优化一下,尽量少些几个标签.....)

                <div id="dianz">
                    <b class="cz"><em>1</em><i></i><s></s><u>超赞</u></b>
                    <b class="tj"><em>2</em><i></i><s></s><u>推荐</u></b>
                    <b class="yb"><em>3</em><i></i><s></s><u>一般</u></b>
                    <b class="wl"><em>6</em><i></i><s></s><u>无聊</u></b>
                    <b class="lj"><em>5</em><i></i><s></s><u>雷囧</u></b>
                </div>

2.css样式

#dianz{text-align:center; width:610px; overflow:hidden;zoom:1; margin:20px auto;}
#dianz b{ display:inline-block; width:120px; height:215px; float:left; position:relative;}
#dianz b em,#dianz b u,#dianz b i,#dianz b s{display:inline-block; width:100%; height:20px; position:absolute; left:0px;}
#dianz b u{ bottom:0px;}
#dianz b s{ bottom:20px; height:95px;}
#dianz b i{width:20px; height:80px;left:50px; bottom:115px;}
#dianz b.cz s{ background:url(../images/dianz.jpg) 25px 0px no-repeat}
#dianz b.cz i{ background-color:#fe0032;}
#dianz b.tj s{ background:url(../images/dianz.jpg) -105px 0px no-repeat}
#dianz b.tj i{ background-color:#fe9903;}
#dianz b.yb s{ background:url(../images/dianz.jpg) -235px 0px no-repeat}
#dianz b.yb i{ background-color:#99c900;}
#dianz b.wl s{ background:url(../images/dianz.jpg) -370px 0px no-repeat}
#dianz b.wl i{ background-color:#32ccff;}
#dianz b.lj s{ background:url(../images/dianz.jpg) -500px 0px no-repeat}
#dianz b.lj i{ background-color:#3167ff;}

3.js(对js运用的不是非常好,大家可以优化的更好一些)

   function o_dianz(){
	   var oi=$(‘#dianz b i‘); //获取i;
	       oem=$(‘#dianz b em‘); //获取em;
		   os=$(‘#dianz b s‘);//获取s;
		   bl=null;
		   osz=null;
		   Arr=[];
		   Arr2=[];

	function o_mm(){
	   oem.each(function(){
			  osz=$(this).text();
			  Arr.push(osz);
			  //console.log(Arr)
			});
	   var get_max=Math.max.apply(null,Arr); //获取最大点赞数;
	   bl=80/get_max;  

	   oem.each(function(){
			  osz=$(this).text();
			  var oi_H=Math.floor(osz*bl);
			  Arr2.push(oi_H);
			});
	   for(var i=0; i<Arr2.length; i++){
		      oi.eq(i).height(Arr2[i]);
			  oem.eq(i).css(‘top‘,80-Arr2[i]);
		   };
	    };
		o_mm(); 

	   os.click(function(){  //点赞增加;
		   	  Arr=[];
		      Arr2=[];
			  osz=$(this).siblings(‘em‘).text();
			  osz++;
			  $(this).siblings(‘em‘).text(osz);
			  o_mm();
		   });  

	   };
   o_dianz();

好了,代码都贴上来了,超级简单的。我写的原理(不知道是不是有更好的,同时bug也没有检测):设置i标签的默认高度为80px,然后通过js求出每一个em的text数值,丢入数组Arr中,再通过这个方法Math.max.apply(null,Arr),求最大text的数值,进而求出比例尺(通过最大text求出比例尺可以保证高度不会大于80PX),最后通过每一个text的数值乘以比例尺Math.floor(osz*bl),求出每一个em对应的高度值。

后面的点击事件中每点击一次图标,相对应的重置一次Arr和Arr2,可以保证数值是实时更新的。。。 OK,到这里就完了,,,

最终结果:

				
时间: 2024-11-05 23:37:48

jquery 超简单的点赞效果的相关文章

jQuery实现简单进度条效果

一个用jQuery实现的简单进度条,当加载页面时,屏幕顶部出现一条极细的小线条,加载页面时会显示加载进度. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery实现的简单进度条效果</title> 6 <style> 7 #web_loading{ 8 z-inde

使用jquery实现简单的拖动效果,分享源码

因为想实现相框的拖到,找了半天的原因愣是没有找到错误,所以,只能翻看源码了 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事件,且鼠标在对象上方) 2.开始移动鼠标(触发onmousemove事件) 3.移动时更显对象的top和left值 4.鼠标放开停止拖动(触发onmouseup事件) 注意:拖动的对象必须是定位对象(即设置了position:absolute或 relative). 也就是说拖动事件=onmoused

jquery实现简单的手风琴效果

最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: html: <ul class="wrap"> <li class="checked"> <span>选项1</span> <div>1</div> </li> <li> <

Jquery超简单遮罩层实现代码

看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: [html] view plain copy print? <style type="text/css"> .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opa

jquery 实现简单的手风琴效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./js/jquery.min.js"></script> <style> body,html,ul,li,h3{ margin: 0; padding: 0

jquery 实现简单tab选项卡效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf8" /> <tit

【jQuery】利用淡入淡出效果实现兼容IE6的告警提示

其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择jQuery,是因为这东西能够很好地兼容IE6. 一.基本目标 当输入框的输入内容的字符数无论中文与英文大

jQuery实现的简单文字提示效果模拟title(转)

来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: 先看下效果截图: 代码分析: <!-- 引用jQuery --> <script src="jquery.js" type="text/javascript"></script> <style type="text/c

jQuery超酷下拉插件6种效果演示

原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div class="container">                       <section class="main clearfix">                 <select id="cd-dr