当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jQuery用户数字打分评价效果

发表于: 2015-06-08   作者:ini   来源:转载   浏览:
摘要: 效果体验:http://hovertree.com/texiao/jquery/5.htmHTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery用户数字打分评分代码 - HoverTree</

效果体验:http://hovertree.com/texiao/jquery/5.htm

HTML文件代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery用户数字打分评分代码 - HoverTree</title><base target="_blank" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
}

ul {
list-style: none;
}
/*用户评分*/
.hovertreepingfen {
padding: 15px 0;
width: 1200px;
margin: 0 auto;
}

.pingfenList {
float: left;
width: 500px;
padding-right: 20px;
}

.pfxtTitle {
font-weight: bold;
font-size: 1.2em;
padding: 4px 0;
}

.pfxtText {
line-height: 25px;
}

.hovertreepful {
margin: 10px 0;
}

.hovertreepful li {
float: left;
width: 98px;
height: 30px;
text-align: center;
line-height: 30px;
border: #ddd 1px solid;
background: #f1f1f1;
cursor: pointer;
}

.hovertreepful li.pfxtCur {
background: #308A95;
color: #fff;
border: #308A95 1px solid;
}
.hvtclear{width:100%;clear:both;}
.hvtblock{clear:both;width:800px;margin:5px auto;}
a{color:blue;}
</style>
</head>
<body>
<!--用户评分代码-->
<div class="hovertreepingfen">

<div class="pingfenList">

<div class="pfxtTitle">功能:</div>
<div class="pfxtText">你觉得这个创意在功能上优秀吗?</div>
<ul class="hovertreepful">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</ul><!--pfxtMid/-->

<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div><!--pingfenList/-->

<div class="pingfenList">
<div class="pfxtTitle">外观:</div>
<div class="pfxtText">你觉得柯乐义网在外观上优秀吗?</div>
<ul class="hovertreepful">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</ul><!--pfxtMid/-->
<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div><!--pingfenList/-->

<div class="pingfenList">
<div class="pfxtTitle">成本:</div>
<div class="pfxtText">你觉得这个创意在成本上优秀吗?</div>
<ul class="hovertreepful">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</ul><!--pfxtMid/-->
<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div><!--pingfenList/-->

<div class="pingfenList">
<div class="pfxtTitle">难度:</div>
<div class="pfxtText">你觉得这个HoverTree网站的难度大吗?</div>
<ul class="hovertreepful">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> 
</ul><!--pfxtMid/-->
<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div><!--pingfenList/-->

<div class="clearfix"></div>

</div><!--hovertreepingfen/-->
<!--用户评分代码-->
<div class="hvtclear"></div>
<div class="hvtblock">
<textarea id="result_hovertree_com" rows="5" cols="30"></textarea>
<input type="button" id="clear_hovertree_com" value="清空" />
<input type="button" id="sumit_hovertree_com" value="提交" />
<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/hvtart/bjae/m8wrrmrw.htm">原文</a> <a href="http://hovertree.com/texiao/">特效库</a> <a href="http://keleyi.com">柯乐义</a>
<br />先打分,然后再点击提交按钮
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';clear:both;">
<br /><h2>HoverTree用户数字打分评价特效</h2>
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">HoverTree</a></p>
</div>

<script>
$(function () {

//简洁用户评分代码
$(".hovertr"+"eepful li").click(function () {
$(this).addClass("pfxtCur");
$(this).prevAll().addClass("pfxtCur");
$(this).nextAll().removeClass("pfxtCur");
});

$("#clear_h"+"overtree_com").on("click", function () {
$(".hovertreepful li").removeClass("pfxtCur");
$("#result_hovertree_com").val('');
})

$("#sumit_hover"+"tree_com").on("click", function () {
var hovertreeul = $(".hovertreepful");
var hovertreecount = hovertreeul.length;
var hovertreeresult = $("#result_hovertree_com");
hovertreeresult.val('');
for (i = 0; i < hovertreecount; i++)
{
hovertreeresult.val(hovertreeresult.val() + hovertreeul.eq(i).find(".pfxtCur:last").text() + '\n');
}
})

})
</script>
</body>
</html>

 参考:

http://hovertree.com/hvtart/bjae/6asqg23w.htm
http://hovertree.com/hvtart/bjae/vugyl6v3.htm
http://keleyi.com/a/bjac/tmx4mq76.htm

网页特效汇总:http://ini.iteye.com/blog/2165698

jQuery用户数字打分评价效果

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jquery评论页星星打分动画效果 效果描述: 一个非常不错的评分插件效果,里面的js内容经过了封装,
JS五星级评分效果(类似与淘宝打分效果) 2013-11-26 01:06 by 龙恩0707, 933 阅读, 10 评论, 收藏,
因为项目要求,要做一个数字滚动增加的效果。在网上没有找到好的插件,所以就自己做了一个,供大家
ECSHOP 默认的程序 是 当用户登录后,对商品商品评价是不是能匿名评价的。 有些店铺设置了只能登录
jQuery效果虽好,但不宜记忆,最好的学习就是案例驱动,在别人博客上看到些效果。 1.动画移动效果(
H-index其实更广泛的应用于学术论文评价,其定义为: h代表“高引用次数”(high citations),一名
输入值: 用户和服务矩阵; 用户交互的历史记录; ---------------------------------- 输出值: 各
日期:2011/12/20 来源:GBin1.com 在线演示 本地下载 这 个教程将实现一个页面部分内容突出显示效
渐渐的拉长: <div class="close-sidebar"><a href="#">关闭侧边栏</a></div&
上周,各大媒体不约而同地发出了Windows Phone 7的评测。在这一轮密集的地毯式评测之后,玩家们对Wi
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号