webrebuild.org第四届年会——金秋四城联动
大白的工作笔记 注册 | 登陆
浏览模式: 标准 | 列表Tag:css森林

滑动 点击 评分效果

Submitted by chen0908 on 2009, November 20, 11:34 AM

森林某人 前几天问

http://www.dabaii.com/demo/2009/03/ 
大小: 15.03 K 尺寸: 500 x 235 浏览: 38 次 点击打开新窗口浏览全图
这个效果怎么写标签，于是 我想起了我之前写的一个模范豆瓣评分的（http://dabaii.com/?action=show&id=35）。

显然这次的评分和上次的从标签来说 没什么好说的，主要还是看怎么实现效果。

首先确定结构

XML/HTML代码
  1. <div class="box">  
  2. <div class="f">0</div>  
  3. <div class="s"></div>  
  4. </div>  

首先要确保可以复用 ，所以box是个单独的模块，一个评分条。 f 是现实分值的， s 是评分条。

css代码（不解释）：

CSS代码
  1. <style type="text/css" media="screen"><!--   
  2. *{padding:0; margin:0;}   
  3. body { font-size:12px; padding:200px;}   
  4. .box { width:600px; height:35px; margin:10px;overflow:hidden; }   
  5. .s { width:482px; height:13px; background:url(images/1.gif) no-repeat 0 -22px;}   
  6. .f { width:29px; height:22px; background:url(images/1.gif); text-align:center; line-height:15px; color:#FFF; }   
  7. --></style>  

关键是思维，其实我一直觉得写前端效果主要还是要想到用什么方式实现效果。我这里采用的是获取鼠标基于评分条位置来确定分数显示版的位置，来判断鼠标位置位于评分条总宽度的百分比，然后确定分数显示版的数值。

步骤
1。给所有评分条绑定事件；
2。获取评分条的位置；
3。获取鼠标位置；
4。计算显示板的需要显示的位置（鼠标位置-评分条位置）；
5。计算显示数值（显示位置/评分条宽度*10；截取小数点1位）；
6。设置到相应页面属性。

提供一个获取鼠标位置的方法。

js代码（基于jQ，别问我js怎么写 不解释）：

JavaScript代码
  1. <script>   
  2. $(document).ready(function(){   
  3. var w3c=(document.getElementById)? true: false;   
  4. var agt=navigator.userAgent.toLowerCase();   
  5. var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));   
  6. function IeTrueBody(){//判断头部是否有标准声明   
  7.     return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body   
  8. }   
  9.   
  10. $('.s').each(function(i){   
  11.     //获取评分条位置   
  12.     var offset = $(this).offset().left;   
  13.     $(this).click(function (e){   
  14.          var curX=(!ie)?e.pageX : event.clientX+IeTrueBody().scrollLeft;   
  15.         var n1 = curX - offset ;   
  16.         var n2 = n1/482*10 + '' ;   
  17.         n2 = n2.slice(0,3);   
  18.         $('.f').eq(i).html(n2).animate({marginLeft:n1-10},'slow');   
  19.     })                     
  20.  })                           
  21. })   
  22. </script>  

Tags: 评分效果, css森林

CSS&JS学习 | 评论:4 | Trackbacks:0 | 阅读:2651

继续 给rain写的选项列表模拟

Submitted by chen0908 on 2009, April 28, 4:30 PM

有是给rain写的列表。笔记一下。 一直想给编辑器加一个直接运行代码的按钮，但是确实能力有限不知道怎么加。有不愿去搜索。毕竟blog是做笔记的地方。不是给别人show的，所以给为看的朋友请见谅 麻烦复制到 DW里面 保存看效果。 可以使用 /d 来替换所有的项目列表数字符号。之前我的文章里面有提到过。

这个选项列表要求大概是这样的， 点击标签然后 弹出列表，把列表项目最长的一项的宽度 给 点击标签。并且把文本值给过去。同时关闭列表。

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>大白奥特曼</title>  
  6. <style>  
  7. #s { border:#666 solid 1px; width:50px; line-height:18px; cursor:pointer; }  
  8. #o { display:none; border:#666 solid 1px; padding:0; margin:0; list-style:none; position:relative; top:-1px; }  
  9. #o a { display:block; height:18px; line-height:18px; overflow:hidden; text-decoration:none }  
  10. #o a:hover { background: #039; color:#FFF; }  
  11. </style>  
  12. </head>  
  13. <body>  
  14. <div id="s">请选择</div>  
  15. <ul id="o">  
  16.   <li><a href="#"><span>dabai</span></a></li>  
  17.   <li><a href="#"><span>奥特曼</span></a></li>  
  18.   <li><a href="#"><span>db.chen</span></a></li>  
  19.   <li><a href="#"><span>奥特曼打怪兽</span></a></li>  
  20.   <li><a href="#"><span>dabaii.com</span></a></li>  
  21. </ul>  
  22. <script>  
  23. function operationList(objS,objO,longestTag){  
  24.     //tagD操作对象 tagU列表 tagO宽度对象 tagL宽度对象长度 tagW宽度对象存储宽度数组 displayState列表默认显示属性  
  25.     var tagD = document.getElementById(objS);  
  26.     var tagU = document.getElementById(objO);  
  27.     var tagO = tagU.getElementsByTagName(longestTag);    
  28.     var tagL = tagO.length;    
  29.     var tagW = [];    
  30.     var displayState;  
  31.   
  32.     //获取默认显示属性  
  33.     if(document.all){  
  34.         displayState = tagU.currentStyle.display;  
  35.     }  
  36.     else{  
  37.         displayState = window.getComputedStyle(tagU,null).display;   
  38.     }      
  39.       
  40.     //操作对象绑定点击事件 打开列表  
  41.     tagD.onclick = function(){  
  42.         if(displayState == 'none'){  
  43.             tagU.style.display = 'block';  
  44.         }  
  45.     }  
  46.       
  47.     //列表项目 绑定点击事件，设置列表项目文字给操作对象  
  48.     for (var i = 0; i < tagL; i++){    
  49.         tagO[i].parentNode.onclick = (function(){  
  50.             var outText = function(){  
  51.                 tagD.innerHTML = this.innerHTML;  
  52.             }  
  53.             return outText;  
  54.         })()  
  55.     }  
  56.   
  57.     //列表绑定事件 获取列表项目最大宽度 并设置给操作对象，关闭列表  
  58.     tagU.onclick = function(){  
  59.         for (var i = 0; i < tagL; i++){    
  60.             tagW[i] = tagO[i].offsetWidth;   
  61.         }  
  62.   
  63.         //列表项目排序  
  64.         tagW.sort(function(x1,x2){    
  65.             if(x1 > x2) {    
  66.                 return 1;    
  67.             }    
  68.             else if(x1 = x2){    
  69.                 return 0;    
  70.             }    
  71.             else{    
  72.                 return -1;    
  73.              }  
  74.         }).reverse();  
  75.       
  76.     tagD.style.width = tagW[0]+'px';  
  77.     tagU.style.display = 'none';            
  78.     }  
  79. }  
  80. operationList('s','o','span')  
  81. </script>  
  82. </body>  
  83. </html>  

 

 

 

Tags: 模拟列表, css森林

原创 | 评论:6 | Trackbacks:0 | 阅读:8524

获取一组标签中的最宽一个 排序

Submitted by chen0908 on 2009, April 14, 6:21 PM

今天 ，群里的rain.kx 又让我帮他弄东西。 他想模拟 下拉菜单。 但是有不能定死下拉菜单宽度，所以希望能通过js获取模拟的下拉框的宽度。

xhtml

XML/HTML代码
  1. <ul>  
  2. <li><span>dabai</span></li>  
  3. <li><span>奥特曼</span></li>  
  4. <li><span>db.chen</span></li>  
  5. <li><span>奥特曼打怪兽</span></li>  
  6. <li><span>dabaii.com</span></li>  
  7. </ul>  
js

JavaScript代码
  1. <script>  
  2. (function(tag){  
  3.     var tagO = document.getElementsByTagName(tag);  
  4.     var tagL = tagO.length;  
  5.     var tagW = [];  
  6.     for (var i = 0; i < tagL; i++){  
  7.             tagW[i] = tagO[i].offsetWidth;  
  8.         }  
  9.     tagW.sort(function(x1,x2){  
  10.                     if(x1 > x2) {  
  11.                         return 1;  
  12.                         }  
  13.                         else if(x1 = x2){  
  14.                             return 0;  
  15.                             }  
  16.                             else{  
  17.                                 return -1;  
  18.                                 }  
  19.                     }).reverse();  
  20.     alert(tagW[0]);  
  21.           })('span')  
  22. </script>  

 

Tags: js, 帮助, css森林

CSS&JS学习 | 评论:4 | Trackbacks:0 | 阅读:8413

js折叠菜单

Submitted by chen0908 on 2009, April 13, 4:43 PM

群里的rain.kx 需要一个做类似于我的电脑右侧的那些 折叠菜单.

大小: 26.06 K 尺寸: 203 x 349 浏览: 132 次 点击打开新窗口浏览全图

 

代码结构（rain.kx 提供的需求结构）

 

XML/HTML代码
  1. <div class="box">  
  2.         <div class="box_top"><h2>统计报表</h2><a href="#" class="operation">操作按钮</a></div>  
  3.         <ul class="box_content">  
  4.             <li><a href="">交班记录</a></li>  
  5.             <li><a href="">任意时间段收入报表</a></li>   
  6.             <li><a href="">按班次查收入报表</a></li>   
  7.             <li><a href="">上机时长统计报表</a></li>   
  8.         </ul>  
  9. </div>  

 

操作a按钮 ，实现打开和关闭ul

js

JavaScript代码
  1. <script>  
  2. (function operationBox (oTagName,OTagClass,oTagBoxClass){  
  3.     var oTag = document.getElementsByTagName(oTagName);  
  4.     for (var i = 0; i < oTag.length; i ++ ){  
  5.             if(oTag[i].className == OTagClass){  
  6.                  oTag[i].onclick = (function(){        
  7.                     var sayAlert = function() {   
  8.                         var oTagX = this.parentNode.parentNode.childNodes;  
  9.                         for (var ii = 0; ii < oTagX.length; ii++) {    
  10.                             if (oTagX[ii].className == oTagBoxClass){   
  11.                                if(oTagX[ii].style.display !="none") {  
  12.                                     oTagX[ii].style.display = 'none';  
  13.                                 }  
  14.                                 else{  
  15.                                     oTagX[ii].style.display = "block";  
  16.                                 }  
  17.                             }   
  18.                          }                 
  19.               }         
  20.  　       　return sayAlert;         
  21.             })()  
  22.         }  
  23.         }  
  24.     })('a','operation','box_content')  
  25. </script>  
分析，首先 获取操作的a标签数组。然后获取和a标签在同一个父元素下面的ul列表。给a绑定事件。判断列表的状态。 每次点击翻转类表状态就ok了。由于 公司装的 系统是2003 我还没找到ftp软件 所以demo暂时不上传。sorry

 

Tags: js, 折叠菜单, css森林

CSS&JS学习 | 评论:3 | Trackbacks:0 | 阅读:7919

辞旧岁，迎新年 感谢2008

Submitted by chen0908 on 2009, January 25, 7:31 PM

特此感谢在2008年里那些帮助我，指点我的网友...感谢幼兽技术部的兄弟,感谢css森林的鄙视. 祝各位新年快乐,前途无量.

Tags: 新年, 牛, css森林, 幼兽

生活 | 评论:12 | Trackbacks:0 | 阅读:13542