javascript+css好多网站用的选星星实现打分功能的函数

函数有两个参数，功能如下：
obj：  img标签组的父容器，类型为DOM对象；
oEvent： event对象。
这个函数的优点是html代码可以很简洁，使用图片也可以很少，只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址，各位在使用的时候改成网站的相对地址就可以了。当我们点击的时候，我用的是个alert事件。事实上，我们会在这个地方用个ajax方法，把相关的参数传到服务器端。只要把alert(this._num+1)写成sendAjax(this._num+1)就可以了。
需要的两张图片：
 

我们_www.jb51.net_阿当制作选星星打分

.starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;}
.starWrapper img{cursor:pointer;}

function rate(obj,oEvent){
//==================
// 图片地址设置
//==================
var imgSrc = 'http://www.jb51.net/upload/20080508122008586.gif';
var imgSrc_2 = 'http://www.jb51.net/upload/20080508122010810.gif';
//---------------------------------------------------------------------------
if(obj.rateFlag) return;
var e = oEvent || window.event;
var target = e.target || e.srcElement;
var imgArray = obj.getElementsByTagName("img");
for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js实现商城星星评分的效果

    在这里和朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助,当然更好的特效还有待大家完善. html如下: <div class="starts"> <ul id="pingStar"> <li rel="1" title="特别差,给1分"></li> <li rel="2" title="很差,给2分"><

  • JS实现星星评分功能实例代码(两种方法)

    JS实现星星评分功能实例代码(两种方法)

    一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no

  • js星星评分效果

    html如下: <div class="starts"> <ul id="pingStar"> <li rel="1" title="特别差,给1分"></li> <li rel="2" title="很差,给2分"></li> <li rel="3" title="一般般,给3分

  • js点亮星星评分并获取参数的js代码

    js点亮星星评分并获取参数的js代码

    用到的图片如下: 在线演示地址:http://demo.jb51.net/js/2014/jsxxdf/demo2.html 完整代码: 网页特效 添加行为的星星评级效果 我们欢迎您. 我们,站长必备的高质量网页特效和广告代码. 服务 default level 1 2 3 4 5 价格 default level 1 2 3 4 5 质量 default level 1 2 3 4 5 0){ a_obj[0].onclick=function(){ return give_value(thi

  • js实现的星星评分功能函数

    本文实例讲述了js实现的星星评分功能函数.分享给大家供大家参考,具体如下: <!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&

  • js实现星星打分效果的方法

    js实现星星打分效果的方法

    本文实例讲述了js实现星星打分效果的方法.分享给大家供大家参考.具体分析如下: 很多网站都有如下图这样的星星打分效果,今天就看下用js怎么实现打分效果. 效果详解 1. 鼠标移上的时候星星点亮,下面的文字显示.鼠标移出的时候星星为灰,下面文字不显示. 2. 鼠标移到某个星星上,它之前的所有星星都会亮. 3. 鼠标移到某个星星上并点击,会显示打分结果.   代码如下 <!doctype html> <html> <head> <meta charset="

  • JavaScript实现星星等级评价功能

    JavaScript实现星星等级评价功能

    本文实例为大家分享了js星星等级评价的具体代码,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container{ float:left; } .score{ float: left; position:

  • 如何实现星星评价（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实现飞入星星特效代码

    本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <html> <head> <title>星空极速飞入效果</title> <style type="text/css"> <!-- body { background-color: #000066; } --> </style> </head> <body> <scr

  • AngularJS实现星星等级评分功能

    星期六加班,教育后台也要有星级评分等级的需求,醉了--基本知道些怎么做,网上也随便找了找,没什么合意的,毕竟需求不同,也不能完全一样不是.学习之,改之╮(╯▽╰)╭ Directive  angular.module('XXX').directive('stars', stars); function stars() { var directive = { restrict: 'AE', template: '<ul class="rating" ng-mouseleave=&q

随机推荐