【原创】用JQury来制作星星打分特效功能
2018-06-17 19:56:24来源:未知 阅读 ()
前言
常常我们看到一些评论,星星打分,今天我们就用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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 页面制作之开发调试工具(1) 2018-06-21
- jQuery制作鼠标经过显示图片大图,生成图片tips效果 2018-06-17
- DIV+CSS制作斜线效果记录 2018-06-17
- javascript制作公式编辑器,函数编辑器和图形绘制 2018-06-17
- Easyui登陆页面制作 2018-06-17
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