前往顾页
以后地位: 主页 > 收集编程 > Asp实例教程 >

操纵CSS+asp实现 仿迅雷人气指数 法度代码

时候:2010-08-05 23:55来源:知行网www.zhixing123.cn 编辑:麦田守望者

年夜家都熟谙迅雷看看内里的电影人气指数这个小图标吧

先看看我的结果图

CSS+asp仿迅雷人气指数 - 江西红谷滩 - 江西红谷滩

再看看迅雷的截图

CSS+asp仿迅雷人气指数 - 江西红谷滩 - 江西红谷滩

比较都雅,是按照电影的人气指数来显现热度,下面我们就来仿照一下

<style>
ul.point {
    display:inline;
width:30px;
float:right;
height:8px;
}
ul.point li {
      float:left;
   width:2px;
   height:6px;
   overflow:hidden;
   border:1px solid #000000;
   margin-right:1px;
   clear:none;
   font-size:0px;
}
ul.point li.l0 {
      border-color:#FFAD2E;
   background:#FEFBD8;
}
ul.point li.l1 {
      border-color:#FEAA26;
   background:#FFF6C1;
}
ul.point li.l2 {
      border-color:#EE8800;
   background:#FFEA8F;
}
ul.point li.l3 {
      border-color:#E77E01;
   background:#FFE489;
}
ul.point li.l4 {
      border-color:#DD6A00;
   background:#FDCA89;
}
ul.point li.l5 {
      border-color:#DDDDDD;
   background:#FFFFFF;
    }
</style>
<ul class="point"><li class="l0"></li><li class="l1"></li><li class="l2"></li><li class="l5"></li><li class="l5"></li></ul><li><span><a href="#" target="_blank">[亲爱妈妈]</a></span><a target="_blank" href="#" >记念伟年夜的岳母</a>(岳母)</li>
<ul class="point"><li class="l0"></li><li class="l1"></li><li class="l2"></li><li class="l5"></li><li class="l5"></li></ul><li><span><a href="#" target="_blank">[亲爱妈妈]</a></span><a target="_blank" href="#" >记念伟年夜的孟母</a>(孟母)</li>
<ul class="point"><li class="l0"></li><li class="l1"></li><li class="l5"></li><li class="l5"></li><li class="l5"></li></ul><li><span><a href="#" target="_blank">[亲爱妈妈]</a></span><a target="_blank" href="#" >记念杨开慧同道</a>(杨开慧)</li>
<ul class="point"><li class="l0"></li><li class="l5"></li><li class="l5"></li><li class="l5"></li><li class="l5"></li></ul><li><span><a href="#" target="_blank">[父爱如山]</a></span><a target="_blank" href="#" >记念宋庆龄同道</a>(宋庆龄)</li>

可以看出来,从I0到I5的色彩是愈来愈浅。编排的依次不一样显现出来的人气指数就不一样了。

我来一个截图,证明一下以上代码的静态结果。

 

那么怎样来矫捷利用?按照数据库中的文章浏览量(数字)来肯定人气指数主动显现呢?

下面编写一个ASP函数

Function show_hot_point(num)
    Dim view_number
view_number=CInt(num)
    If view_number="" Then
    view_number=0
    End If
If view_number < 200 Then
      show_hot_point= "<li class=""l0""></li><li class=""l5""></li><li class=""l5""></li><li class=""l5""></li><li class=""l5""></li>"
   End If
If view_number > 200 and view_number < 300 Then
      show_hot_point= "<li class=""l0""></li><li class=""l1""></li><li class=""l5""></li><li class=""l5""></li><li class=""l5""></li>"
   End If
If view_number > 300 and view_number < 400 Then
      show_hot_point= "<li class=""l0""></li><li class=""l1""></li><li class=""l2""></li><li class=""l5""></li><li class=""l5""></li>"
   End If
If view_number > 400 and view_number < 500 Then
      show_hot_point= "<li class=""l0""></li><li class=""l1""></li><li class=""l2""></li><li class=""l3""></li><li class=""l5""></li>"
   End If
If view_number > 500 Then
      show_hot_point= "<li class=""l0""></li><li class=""l1""></li><li class=""l2""></li><li class=""l3""></li><li class=""l4""></li>"
   End If
End Function

熟谙ASP的朋友应当大白这段代码的感化

在利用中调用函数便可,比如存储文章浏览次数的字段为viewnum:

Response.Write "<ul class=""point"">"& show_hot_point(rs("viewnum")) &"</ul>"

好了,完成。

------分开线----------------------------
标签(Tag):css CSS教程 css代码 css实例
------分开线----------------------------
保举内容
猜你感兴趣