设置首页
-
加入收藏
导航：
博客
-
文章
-
图片
-
下载
-
论坛
[ 首页 ]
[ ASP编程 ]
[ WEB技术 ]
[ 脚本应用 ]
[ 图文教程 ]
[ 站长资讯 ]
当前位置：
文章中心
-
WEB技术
-
一张图片完成的投票效果
相关文章
JS图片切换
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
CSS无图片实现圆角框
简单的弹出层加遮罩层效果
纯JS+CSS的液晶数码彩色显示板效果(无图片)
一个简单的图片弹出层，兼容所有浏览器
仿土豆网首页效果, 焦点图片切换效果
asp利用aspjpeg给图片生成PNG透明水印
用ASP取出HTML里面的图片地址的函数
这里放搜索
最新文章
检测大写锁定键
JS图片切换
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
幻于算法
VBScript实现的escape和unescape功能函数
自动排版工具
精妙SQL语句介绍
CSS无图片实现圆角框
简单的弹出层加遮罩层效果
一张图片完成的投票效果
关键词：图片,投票,效果 时间:2008年05月14日 星期三 阅读:315
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ColorScheme Ratings-www.fj126.net</title> <style type="text/css"> /*STARS */ .star_rating { list-style:none; margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(http://www.fj126.net/art/file/0805142243059368.gif) 0 0 repeat-x; overflow:hidden;} .star_rating li { padding:0; margin:0; float:left;} .star_rating li a { display:block; width:14px; height:12px; text-decoration:none; text-indent:-9000px; z-index:20; position:absolute; padding:0; margin:0;} .star_rating li a:hover{ background:url(http://www.fj126.net/art/file/0805142243059368.gif) 0 12px; z-index:2; left:0;} .star_rating a.one_star{ left:0;} .star_rating a.one_star:hover{ width:14px;} .star_rating a.two_stars{ left:14px;} .star_rating a.two_stars:hover{ width:28px;} .star_rating a.three_stars{ left:28px;} .star_rating a.three_stars:hover{ width:42px;} .star_rating a.four_stars{ left:42px;} .star_rating a.four_stars:hover{ width:56px;} .star_rating a.five_stars{ left:56px;} .star_rating a.five_stars:hover{ width:70px;} .star_rating li.current_rating{ background:url(http://www.fj126.net/art/file/0805142243059368.gif) 0 24px; position:absolute; height:12px; display:block; text-indent:-9000px; z-index:1; left:0;} </style> </head> <body id="rexsong_demo"> <div id="rexsong_space"></div> <h1>ColorScheme打分 2006.08</h1> <div class="module"> <p>满分5.0, width:70px</p> <ul class="star_rating left"> <li class="current_rating" style="width:70px;">Current rating: 4.7 (3 votes)</li> <li><a href="#" onfocus="this.blur();" title="1 of 5 stars" class="one_star">1</a></li> <li><a href="#" onfocus="this.blur();" title="2 of 5 stars" class="two_stars">2</a></li> <li><a href="#" onfocus="this.blur();" title="3 of 5 stars" class="three_stars">3</a></li> <li><a href="#" onfocus="this.blur();" title="4 of 5 stars" class="four_stars">4</a></li> <li><a href="#" onfocus="this.blur();" title="5 of 5 stars" class="five_stars">5</a></li> </ul> <p>当前4.1, width:57px</p> <ul class="star_rating left"> <li class="current_rating" style="width:57px;">Current rating: 4.7 (3 votes)</li> <li><a href="#" onfocus="this.blur();" title="1 of 5 stars" class="one_star">1</a></li> <li><a href="#" onfocus="this.blur();" title="2 of 5 stars" class="two_stars">2</a></li> <li><a href="#" onfocus="this.blur();" title="3 of 5 stars" class="three_stars">3</a></li> <li><a href="#" onfocus="this.blur();" title="4 of 5 stars" class="four_stars">4</a></li> <li><a href="#" onfocus="this.blur();" title="5 of 5 stars" class="five_stars">5</a></li> </ul> <p>当前3.4, width:48px</p> <ul class="star_rating left"> <li class="current_rating" style="width:48px;">Current rating: 4.7 (3 votes)</li> <li><a href="#" onfocus="this.blur();" title="1 of 5 stars" class="one_star">1</a></li> <li><a href="#" onfocus="this.blur();" title="2 of 5 stars" class="two_stars">2</a></li> <li><a href="#" onfocus="this.blur();" title="3 of 5 stars" class="three_stars">3</a></li> <li><a href="#" onfocus="this.blur();" title="4 of 5 stars" class="four_stars">4</a></li> <li><a href="#" onfocus="this.blur();" title="5 of 5 stars" class="five_stars">5</a></li> </ul> </div> </body> </html>
提示：可以先修改部分代码后再运行
上一篇：
object 代替 iframe 代码
下一篇：
Windows Media Player 网页播放器 参数含义
1条记录
访客评论
这个不错！
学学
于 2009-3-18 23:52:13 发表
#1
发表评论
昵称
(必填)
内容
(必填)
答案
(必填)
记住我，再次发表不需要重填个人信息。
不想保留信息请
删除cookie
！
友情链接
name
name
与蓝雨对话
Copyright © 2008-2009
蓝雨设计
闽icp备05009764号
Powered by
Bcms X2
. Processed in 0.000000 second(s), 0 queries
1条记录访客评论
这个不错！