森林某人 前几天问
http://www.dabaii.com/demo/2009/03/
这个效果怎么写标签，于是 我想起了我之前写的一个模范豆瓣评分的（http://dabaii.com/?action=show&id=35）。
显然这次的评分和上次的从标签来说 没什么好说的，主要还是看怎么实现效果。
首先确定结构
XML/HTML代码
- <div class="box">
- <div class="f">0</div>
- <div class="s"></div>
- </div>
首先要确保可以复用 ，所以box是个单独的模块，一个评分条。 f 是现实分值的， s 是评分条。
css代码（不解释）：
CSS代码
- <style type="text/css" media="screen"><!--
- *{padding:0; margin:0;}
- body { font-size:12px; padding:200px;}
- .box { width:600px; height:35px; margin:10px;overflow:hidden; }
- .s { width:482px; height:13px; background:url(images/1.gif) no-repeat 0 -22px;}
- .f { width:29px; height:22px; background:url(images/1.gif); text-align:center; line-height:15px; color:#FFF; }
- --></style>
关键是思维，其实我一直觉得写前端效果主要还是要想到用什么方式实现效果。我这里采用的是获取鼠标基于评分条位置来确定分数显示版的位置，来判断鼠标位置位于评分条总宽度的百分比，然后确定分数显示版的数值。
步骤
1。给所有评分条绑定事件；
2。获取评分条的位置；
3。获取鼠标位置；
4。计算显示板的需要显示的位置（鼠标位置-评分条位置）；
5。计算显示数值（显示位置/评分条宽度*10；截取小数点1位）；
6。设置到相应页面属性。
提供一个获取鼠标位置的方法。
js代码（基于jQ，别问我js怎么写 不解释）：
JavaScript代码
- <script>
- $(document).ready(function(){
- var w3c=(document.getElementById)? true: false;
- var agt=navigator.userAgent.toLowerCase();
- var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
- function IeTrueBody(){//判断头部是否有标准声明
- return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
- }
- $('.s').each(function(i){
- //获取评分条位置
- var offset = $(this).offset().left;
- $(this).click(function (e){
- var curX=(!ie)?e.pageX : event.clientX+IeTrueBody().scrollLeft;
- var n1 = curX - offset ;
- var n2 = n1/482*10 + '' ;
- n2 = n2.slice(0,3);
- $('.f').eq(i).html(n2).animate({marginLeft:n1-10},'slow');
- })
- })
- })
- </script>
