仿淘宝，天猫评分效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>JS评分效果</title>
<style>
*{margin:0;padding:0;}
.pingfen{ width:220px;margin:10px auto;height:28px;}
.pingfen li{ width:27px;float:left;height:28px; cursor:pointer;background:url(http://yinhu.xinnet.tzjdwl.cn/test/score/images/star.gif) no-repeat 0 0; list-style:none;}
.pingfen span{height: 28px;line-height: 28px;float: right;font-size: 18px;}
</style>
</head><body>
<div id="pingfen" class="pingfen"><ul><li></li><li></li><li></li><li></li><li></li></ul><span class="text"></span>
</div>
<div id="pingfen2" class="pingfen"><ul><li></li><li></li><li></li><li></li><li></li></ul><span class="text"></span>
</div>
<div id="pingfen3" class="pingfen"><ul><li></li><li></li><li></li><li></li><li></li></ul><span class="text"></span>
</div>
<script>
window.onload=function(){function score(id){var oPf=document.getElementById(id);var aLi=oPf.getElementsByTagName('li');var oText=oPf.getElementsByTagName('span')[0];var description = ['失望','不满','一般','满意','惊喜',]var i=0;for(i=0;i<aLi.length;i++){aLi[i].index=i;aLi[i].onmouseover=function(){for(i=0;i<aLi.length;i++){if(i<=this.index){    // console.log(i,this.index);
                        aLi[i].style.backgroundPosition="0 -29px";oText.innerText=(this.index+1)+'分 '+description[i];}else{aLi[i].style.backgroundPosition="0 0";}// if()
                }};aLi[i].onmouseout=function (){oText.innerText='';};aLi[i].onmousedown=function (){// alert('提交成功:'+(this.index+1)+'分');
                oText.innerText=(this.index+1)+'分 '+description[this.index];};}}score('pingfen');score('pingfen2');score('pingfen3');
};
</script>
</body>
</html>

转载于:https://www.cnblogs.com/anyaran/p/4195073.html

仿淘宝，天猫评分效果相关推荐

仿淘宝天猫双11下拉倒计时领取豆子
仿淘宝天猫双11下拉倒计时领取豆子浏览器往下滚动的时候,倒计时开始并加载进度条,倒计时结束后领取豆子 body {min-height: 2000px}.box {position: fixed;b ...
Material之Behavior实现支付宝密码弹窗仿淘宝/天猫商品属性选择
版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 今天的效果在支付宝.淘宝.京东等电商App中很常见.比如支付宝输入密码弹窗.商城下 ...
JavaScript仿淘宝京东放大镜效果（鼠标事件）------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果注意一定计算好放大比例,本程序放大5倍,具体放大倍数,自定效果完整源码 <!DOCTYPE html> <html lang=&quo ...
仿淘宝图片局部放大效果
本人前端小白一枚做了个仿淘宝的图片放大效果与大家分享一下,还望大神批评主要思路是水平放两个同等大小的div用来分别盛放原图和放大后的图片.下图所示在img1和img2中放入相同的图片,div2 ...
Android/安卓仿淘宝直播点赞效果/qq空间点赞效果动画
之前玩淘宝误入它的直播频道,发现它的直播界面的点赞效果挺好看,然后发现QQ控件点赞有类似动画,于是趁有空花了点时间玩玩. 先上个效果图: 添加了一个按钮模拟点赞,点击多少次就出现多个水果,他们的运动轨 ...
仿淘宝 RecycleView滑动效果底部view联动
//效果图片//xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...
纯CSS实现淘宝天猫优惠券效果
在实际的业务需求中,如果要求前端用纯css实现电商类优惠券的锯齿效果那么该如何去做呢?阅读完此文希望对您有所帮助! 1.效果截图: 2.上才(代)艺(码) <!DOCTYPE html> ...
仿淘宝分页按钮效果简单美观易使用的JS分页控件
http://chamcon.iteye.com/blog/1986607 转载于:https://www.cnblogs.com/xieyunc/p/9126527.html
使用react 写一个仿淘宝图片放大镜效果
效果图人狠话不多,先上效果图,看看是不是各位想要的再往下看使用方法 import React, { Component } from "react"; import Image ...
iOS物理碰撞、唱吧音频处理、仿淘宝联动效果等源码
iOS精选源码物理仿真碰撞陀螺仪使用仿淘宝详情和每日优鲜的一个联动效果 JJNetwork网络库 iOS列表选择弹框网络视频直播类--原生socket音视频实时传输--智能家居 Skele ...

仿淘宝，天猫评分效果

仿淘宝，天猫评分效果相关推荐

最新文章

热门文章