jQuery基于图层模仿五星星评价功能的方法
本文实例讲述了jQuery基于图层模仿五星星评价功能的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script> $(function(){ $(".star li").mouseenter(function(){ $(".star li").css("background","#f60"); $(this).css("background","#f60"); $(this).nextAll().css("background","#ccc"); }) }); </script> <style type="text/css"> * {<br /> padding:0;margin:0; list-style:none; float:left; } .star li { float: left; height: 20px; width: 20px; background-color: #CCC; margin-right: 4px; } </style> </head> <body> <div>选几星:</div> <ul class="star"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
jQuery满意度星级评价插件特效代码分享
这是一款基于jQuery 的星级评分效果实例,鼠标滑过星星区域显示评论信息提交内容,适用在评论表单里面,是表单美化提交内容的一种用户体验设计. 为大家分享的jQuery满意度星级评价插件特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>满意度jQuery星级评分插件</title> <
-
如何实现星星评价(jquery.raty.js插件)
1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="images" ><i>4.5</i></span> 4.js: function star(obj,num){ $(obj).raty({ path: function() { return this.getAttribute('data-path');//路径
-
js仿淘宝评价评分功能
效果图: 图(1)初始图 图(2)点击效果 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>文件上传</title> <meta name="
-
Javascript模仿淘宝信用评价实例(附源码)
本文实例讲述了Javascript模仿淘宝信用评价实现方法.分享给大家供大家参考,具体如下: 老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝. 于是今天研究了一下,用jQuery模似一个类似的效果: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&
-
javascript实现五星评价代码(源码下载)
废话不多说,先上个效果图: 查看演示 源码下载 javascript中的代码 var spans=document.getElementsByTagName("span"); var flag=5;//这个值随便取,只要不是01234就行 var Expand=function(){ //扩展代码,暂无 }; onload=function(){ //循环载入鼠标移入事件 for(var i=0;i<spans.length;i++){ spa
-
js实现五星评价功能
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五星评价</title> <style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.com/t/f
-
jQuery基于图层模仿五星星评价功能的方法
本文实例讲述了jQuery基于图层模仿五星星评价功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
jquery实现类似淘宝星星评分功能实例
本文实例讲述了jquery实现类似淘宝星星评分功能的方法,分享给大家供大家参考之用.具体方法如下: html部分代码如下: <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div>
-
jQuery基于正则表达式的表单验证功能示例
本文实例讲述了jQuery基于正则表达式的表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
jQuery基于Ajax实现读取XML数据功能示例
本文实例讲述了jQuery基于Ajax实现读取XML数据功能.分享给大家供大家参考,具体如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryAjax_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr
-
jQuery+css3实现Ajax点击后动态删除功能的方法
本文实例讲述了jQuery+css3实现Ajax点击后动态删除功能的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ajax动态删除一个方框,并带有动画缓冲效果,在google plus网站发现的特效,在此献丑模仿了一番,已基本与Google Plusp功能相同,你可在方框中加入一些内容,jquery插件选的版本是1.6.2,更高版本也是可以的. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv
-
nodejs基于WS模块实现WebSocket聊天功能的方法
本文实例讲述了nodejs基于WS模块实现WebSocket聊天功能的方法.分享给大家供大家参考,具体如下: WebSocket 模块众多,我选择了一个较为简单的模块 进行了实现. 工具:Sublime 技术:Node.js 引用模块 ws 最终效果如下 本来打算制作网络画板,因为工作忘记了,这里就简单实现了 群聊功能 没什么好介绍的,网上代码案例太多了,(各位新手主要碰见的问题,可能也就是 node 导入模块问题了) 介绍一下安装模块: 找到安装node 目录,进入到 npm 目录下 运行
-
jQuery基于$.ajax设置移动端click超时处理方法
本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法.分享给大家供大家参考,具体如下: 这里介绍jquery click事件如何在移动端自动转换成touchstart事件. 因为移动端click事件会比touchstart事件慢几拍 移动设备某个元素上事件执行顺序是: touchstart touchmove touchend click{mousedown->mousemove->mouseup} click事件在移动设备上虽然会识别但却是最后一个执行的,所以如果不把c
-
jQuery实现IE输入框完成placeholder标签功能的方法
本文实例讲述了jQuery实现IE输入框完成placeholder标签功能的方法.分享给大家供大家参考,具体如下: 如果在输入框加上placeholder="xx"属性,例如: <input type="text" placeholder="请输入关键词"/> 则可以在谷歌浏览器等高级浏览器的输入框中实现替换文本的功能,也就是得到如下图所示的对话框: 但是这个属性在WIN7默认的浏览器IE8中无法兼容,更不要说IE6了.也就是说IE里
-
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
本文实例讲述了php基于ob_start('ob_gzhandler')实现网页压缩功能的方法.分享给大家供大家参考,具体如下: PHP生成网页后传送给浏览器显示 ,页面的打开速度除了与用户的网速有关,往往也跟页面的大小有很关系,我们可以从网 页大小着手,以提高网页的响应速度. 下面的代码是一个压缩网页的例子,我们利用ob_gzip函数,使用ob_start将输出内容压缩后放到"缓冲区"后再输出 . PHP代码 //启用压缩 if(function_exists('ob_gzip'))
-
jQuery扩展+xml实现表单验证功能的方法
本文实例讲述了jQuery扩展+xml实现表单验证功能的方法.分享给大家供大家参考,具体如下: 此处表单验证jQuery 引用jquery.1.8.2.js,md5.js 扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法) String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题 (function($) { $.elementVal = new
随机推荐
- JS实现图片横向滚动效果示例代码
- BAT批处理实现软件的自动安装(以搜狗拼音为例)
- 介绍一个针对C++程序的MySQL访问库soci
- js判断出两个字符串最大子串的函数实现方法
- 配置Nginx+PHP的正确思路与过程
- Mysql LONGBLOB 类型存储二进制数据 (修改+调试+整理)
- MySQL数据库事务隔离级别详解
- php的access操作类
- JavaScript实现仿网易通行证表单验证
- PHP多个文件上传到服务器实例
- PNG背景在不同浏览器下的应用
- 实现纯真IP txt转mdb数据库的方法
- 详解Linux系统中设置SFTP服务用户目录权限的方法
- C#实现操作windows系统服务(service)的方法
- Java的wait(), notify()和notifyAll()使用心得
- C#语法相比其它语言比较独特的地方(一)
- 基于vue.js的分页插件详解
- Vue+Vux项目实践完整代码
- 使用log_format为Nginx服务器设置更详细的日志格式方法
- 详解解决使用axios发送json后台接收不到的问题