CSS+asp仿迅雷人气指数
来源:风之相随'S BLOG 发布时间:2009-08-03 14:11:00
大家都熟悉迅雷看看里面的电影人气指数这个小图标吧
先看看我的效果图
再看看迅雷的截图
比较好看,是根据电影的人气指数来显示热度,下面我们就来模仿一下
<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>"
猜你喜欢
- 硬件平台:SUN Ultra Enterprise 3000 操作系统:Solaris 2.5(中文简体) 磁盘:4.2GB 内存:256M
- 最近在研究品牌如何演绎,当然,看的时候没有忘记本行,分析了一下他们的交互设计~~路易威登LV上图采用胶片展示多组信息——大片展示品牌渲染。利
- 1.文档对象模型(DOM)DOM是HTML和XML文档的编程基础,它定义了处理执行文档的途径。编程者可以使用DOM增加文档、定位文档结构、填
- //获取字符数组String.prototype.ToCharArray=function() { &n
- 如何在服务器端调用winzip命令行对上传的多个文件打包压缩?要解决这个问题,首先要了解一下Windows Scripting Host,简
- 要使用request对象的ServerVariables属性,通过它来获得环境变量的值。使用的语法为:Request.ServerVaria
- asp十进制转二进制;二进制转十进制;二进制转十六进制;十六进制转二进制;八进制转二进制'二进制转八进制;八进制转十进制;十六进制转
- 微软建议用Request.BinaryRead()读取表单数据,但由于这种方法读出的是二进制数据,需要对读出的数据逐字节进行分析,生成有意义
- 1、Export/Import的用处 Oracle Export/Import工具用于在数据库之间传递数据。 Export从数据库中导出数据
- firefox不支持text-overflow一直让人很折腾。。不过还好有大虾为我们提供解决方案。。text-overflow: ellip
- 1. RS.OPEN SQL,CONN,A,B,C2. CONN.EXECUTE(SQL,RowsAffected,C)参数含义:SQL的值
- 一个js代码,图片实时变形一幅图片,长度\宽度之大小与比例都不停地变化,如同哈哈镜的效果,很能引人注目,用在网页上,可以给人意外的惊喜!&l
- 当我们的文章表中没有对于文章的评论数字段时,我们该这么写sql语句来显示出评论最多的文章呢?下面本站给大家收集了几种方法,仅供参考:1.se
- 以前做音乐项目的时候,最让我们头痛的就是满足用户的问题。在音乐的领域,不要试图去满足所有用户这个定律得到了最充分的验证。究其原因,无非是音乐
- 一般我们能过VS2005的SQL explorer来添加一个本地的MDF文件。也许你可能会出现下面这个问题:Exception Detail
- 关于采集-防采集的我想大家都很清楚。这个就不多说,采集最终还是从页面源代码入手,所以只要没有规律想采集就难!由于一天自己在策划某个网站的时候
- 昨天用ucweb看到了goos发的一篇帖子:谁说Float菜单不可以水平居中,进去看了看,觉得方法有点繁琐了,用到了负边距,position
- 如何验证日期输入是否正确?我们可以利用ASP 3.0里的On Error Resume Next来完成这项功能:<%Option&nb
- 这是 小马 在交流会中的分享,可能有些朋友还不曾了解,同时也为了自己温故而知新,就整理下。多种方式可以想像得到,有很多方法立即执行匿名函数,
- 一:文字加粗 倾斜的代码文字加粗的代码是: <b>你好</b>文字倾斜的代码是: <i>你好!</