【原创】用JQury来制作星星打分特效功能

王朝学院·作者佚名 2016-08-27

前言常常我们看到一些评论，星星打分，今天我们就用Jq代码来实现，看看究竟是如何实现的其中有两个重要的事件mouseenter和mouseleave效果如下图

代码<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title><styletype="text/CSS">ol{list-style:none;}li{float:left;cursor:pointer;}</style><scriptsrc="jquery/jquery-1.9.1.js"></script><scripttype="text/javascript">varisSave=false;

$(function() {//鼠标移到某个li标签上面,他以及他之前的都变成实心星星$("#olStar li").mouseenter(function() {//修改标识变量isSave=false;//自己变实心s$(this).html("★").PRevAll().html("★");

$(this).nextAll().html("☆");//前面的兄弟变实心})//鼠标离开li标签全部还原$("li").mouseleave(function() {//判断是否保存结果if(!isSave) { $("li").html("☆"); }

})//点击li标签保存分数$("li").click(function() {

isSave=true;

})

})</script></head><body><olid="olStar"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li></ol></body></html>