Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use JS to achieve imitating Baidu library scoring function, the article is very detailed, has a certain reference value, interested friends must read it!

The specific code is as follows:

Untitled document * {padding:0;margin:0;} # content {width:700px;height:50px;border:1px solid # ccc;margin:50px auto;line-height:50px;} # content span.title {display:line-block;width:100px;height:50px;line-height:50px;font-size:20px;font-weight:bold;color:#FF9933;} # content ul.stars {display:inline-block;width:160px;height:50px;line-height:50px;cursor:pointer } # content ul.stars li {font-size:30px;color:#ccc;} # content p {display:inline-block;width:80px;height:50px;line-height:50px;font-size:20px;font-weight:bold;color:#ff9933;} # content .tip {display:inline-block;height:45px;border:1px # ccc red;background:#FFFFCC; visibility:hidden;} # content .tip span {display:inline-block;height:40px;line-height:40px;padding:0px 10px } # content .tip ul {display:inline-block;position:relative;} # content .tip ul I {position:absolute;top:70%;right:18%;}. Red {color:red;margin-left:10px;} .orange {color:orange;} _ window.onload = function () {var content = document.getElementById ('content'); var score = document.getElementById (' score'); var oUl = content.getElementsByClassName ('stars') [0]; var aLi = oUl.getElementsByTagName (' li') Var tip = content.getElementsByClassName ('tip') [0]; var arr = [' poor', 'poor','OK', 'recommended', 'highly recommended']; oUl.onmouseover = function () {tip.style.visibility = 'visible';} oUl.onmouseout = function () {tip.style.visibility =' hidden';} for (var item0

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.