JS模拟百度文库评分

CSS部分：

body,h3{margin:0; padding:0;}#grade{width:500px; margin:100px auto;}#grade span{float:left; color:#ff0808; margin-top:9px;}#grade h3{float:left; height:22px; line-height:22px; font-size:16px; margin-top:9px;}#stars{float:left;}#stars a{float:left; width:22px; height:22px; background:url(star.png) 0 -22px; margin-top:9px;}#notice{float:left; width:240px; padding-left:4px; color:#ef7300; font-size:14px; font-weight:bold; line-height:40px;}#notice img{width:240px; height:40px; border:none; vertical-align:top;}#notice span{display:none; margin-top:2px;color:#ef7300;}

HTML部分：

<div id="grade"><span>*</span><h3>总体评价：</h3><div id="stars"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></div><div id="notice"><span></span><img src="notice.png" /></div>
</div>

JS部分：

window.onload = function(){var oDivStars = document.getElementById('stars');var aA = oDivStars.getElementsByTagName('a');var oDivNotice = document.getElementById('notice');var oSpan = oDivNotice.getElementsByTagName('span')[0];var oImg = oDivNotice.getElementsByTagName('img')[0];var arrText = ['很差','较差','还行','推荐','力荐'];var onOff = false;var num = 0;// 鼠标经过，显示文字，同时隐藏图片提示oDivStars.onmouseover = function(){if(!onOff){oSpan.style.display = 'block';oImg.style.display = 'none';}};// 鼠标移开，隐藏文字，同时显示图片提示oDivStars.onmouseout = function(){if(!onOff){oSpan.style.display = 'none';oImg.style.display = 'block';}};// 循环遍历所有的a，执行相应事件for (var i = 0; i < aA.length; i++) {aA[i].index = i;// 鼠标经过aaA[i].onmouseover = function(){grade(this.index, true);};// 鼠标移开aaA[i].onmouseout = function(){grade(num ,onOff);};// 鼠标点击aaA[i].onclick = function(){onOff = true;num = this.index;grade(num,onOff);};}// 评分函数function grade(num , onOff){for (var i = 0; i < aA.length; i++) {aA[i].style.backgroundPosition = '0 -22px';};if(onOff){for(var i = 0; i<= num; i++){if(i<2){aA[i].style.backgroundPosition = '0 -44px';}else{aA[i].style.backgroundPosition = '0 0';}}}oSpan.innerHTML = arrText[num];}};

预览效果：

JS模拟百度文库评分相关推荐

仿百度文库html5源码,JS实现仿百度文库评分功能
百度文库分享平台大家都知道,今天小编通过一段实例代码给大家介绍基于js实现百度文库评分功能,先给大家展示效果图吧. 具体代码如下所示: 无标题文档 *{padding:0;margin:0;} #co ...
JS模拟百度搜索框和选项卡
练习1 实现搜索框内,输入相关数字,在下方显示相关内容,模拟百度搜索,详细代码如下: <!DOCTYPE html> <html lang="en">< ...
js input复选框选中父级同时子级也选中_突破百度JS反爬获取百度文库数据下载...
毕业,是一首离别的歌前言炎炎夏季,又快到了我们该说毕业的时候.都说分开是为了更好的相聚,让我们彼此珍惜! 在这个炎热的空档期,对于技术渴望的宅男腐女们我们该做点什么呢?那最好的方式就是用编程来填补 ...
js预览本地word文档_怎么免费下载百度文库付费文档？
我们都知道百度文库中的Word文档,免费的少,大部分是需要下载券的,或者需要开通vip才能下载的!而这些券和vip都是需要钱买的,那我们有什么办法,能任意使用.下载需要的文档呢?下面我来分享一下我的方 ...
python123练习题文库_python模拟登录百度文库后如何点击马上签到
这是登录的代码: #-*- coding: UTF-8 -*- import HTMLParser import urlparse import urllib import urllib2 impor ...
不用下载券也能下载百度文库资料，Python帮你轻松搞定
阅读文本大概需要5分钟. 大家可能平时都有在百度文库下载文档的经历,费尽心思好不容易在文库找了一份可以用的资料,一看需要用下载券下载,搞的人很烦. 有的人为了节省时间,就任性办理了个文库VIP,再也不 ...
针对付费的百度文库用冰点_9个针对开发人员的付费技术写作程序
针对付费的百度文库用冰点 As a developer, you're working on some framework (if you are a JavaScript developer the ...
【转载】FlexPaper+SWFTools 实现仿百度文库及一些小问题
网上已有很多FlexPaper仿百度文库的一些文章,园子里也有很多大牛的详细教程. 结合这次做的例子,在这里详细记录一下使用Flexpaper实现仿百度文库的效果,及自己在跟着园子里的教程做的时候,遇 ...
(转)百度文库浏览器分析及实现(续)
这个是DotNet动态模拟的实现页面:http://download.csdn.net/source/2153964 文库系统已经开发完成了,包括上传,动态转换,以及符合百度文库的资源文件的生成,打分 ...
python实例100例百度文库-18个Python爬虫实战案例(已开源)
目录爬虫小工具文件下载小助手爬虫实战笔趣看小说下载 VIP视频下载百度文库文章下载_rev1 百度文库文章下载_rev2 <帅啊>网帅哥图片下载构建代理IP池 <火影忍者 ...

JS模拟百度文库评分

JS模拟百度文库评分相关推荐

最新文章

热门文章