评分"/>
JavaScript实现星星评分
利用JavaScript实现星星评分
- 使用了jQuery,其中实现了星星的动画,使用
animate()方法. - 其中主要思想就是在给每个span元素使用
text()插入文本内容时全部添加上active类名,然后使用下面的click()方法和mouseleave()来进行星星最终状态是否被点亮,
遇到的问题
- 我的动画是改变了字体大小来实现的大小变化动画
- 其中遇到的问题,如果span元素没有被转化为盒子也就是块状元素,span元素即使转换为行内块元素,并且设定好宽度和高度,span元素的大小也是会跟着
fontsize属性的值改变而改变,因为所有行内元素都具有一个隐形的空白节点会随着line-height等属性改变进而改变行内元素的大小,建议去看一下张鑫旭的css世界,这里我也解释不清,
- 代码奉上:一定要记得引入jQuery
<script src=".4.1/jquery.min.js"></script>
<style>* {margin: 0;padding: 0;}div {width: 600px;height: 100px;margin: 200px auto;font-size: 50px;}span {display: block;height: 20px;text-align: center;margin-right: 20px;float: left;width: 100px;color: yellow;}</style>
</head><body><div><span></span><span></span><span></span><span></span><span></span></div>
</body>
- 此处是js代码
<script>$('span').text('☆');$('span').mouseenter(function () {//在这里给每一个span标签添加上avtive类名$('span').text('☆').addClass('active');$(this).text('★');$(this).prevAll().text('★');$(this).nextAll().text('☆');$(this).animate({fontSize: 70}, 'speed')})// 在这里是实现点击后让点击的星星和前面的星星被点亮,$('span').click(function () {// 这里移除被点击的span元素和它前面的span元素的类名,因为下面的mouseleave()方法 要改变所有带着active类名的span元素的点亮状态$(this).removeClass('active');$(this).prevAll().removeClass('active');})// mouseleave方法主要实现动画效果,没有太大用处$('span').mouseleave(function () {$(this).animate({fontSize: 50}, 'slow')
//这里是当鼠标离开装着span标签的父盒子,让所有带着active类名的span元素里面的星星全部取消点亮状态,因为刚才点击后部分星星的类名的被移除,
//所以只有点击的星星后面的星星才是没有点亮的,如果没有进行点击那么全部星星都不会被点亮$('div').mouseleave(function () {$('.active').text('☆');})})
</script>
更多推荐
JavaScript实现星星评分
发布评论