【原创】用JQury来制作星星打分特效功能
2018-06-18 02:55:02来源:未知 阅读 ()
前言
常常我们看到一些评论,星星打分,今天我们就用Jq代码来实现,看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图
代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ol { list-style: none; } li { float: left; cursor: pointer; } </style> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> var isSave = 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> <ol id="olStar"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ol> </body> </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Paket 介绍
下一篇:[原创]扩展方法基本用法
- Android P HIDL demo代码编写 (原创) 2020-05-07
- 用QT制作3D点云显示器——QtDataVisualization 2020-05-07
- 【原创】自己手写实现Boost序列化简易版 2018-11-26
- 34.QT-制作串口助手(并动态检测在线串口,附带源码) 2018-07-09
- 32.QT-制作最强电压电阻表盘,可以自定义颜色,图标,文字标签- 2018-07-03
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash