1111

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>五星评价(图片实现) </title>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

</head>

<body>

    <div class="starMain" style="width: 100%;margin: 0 auto;height: 10px;line-height:10px;margin-top: 1px;">

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

    </div>

    <br/> <br />

    <input class="preData starResult" type="text" />

    <script>

        $(function () {

            $(".starMain").each(function () {

                starFun($(this));

            })

        });

        function starFun(element) {

            var imgs = element.find(".ev-star");

            var len = imgs.length;

            for (var i = 0; i < len; i++) {

                imgs[i].index = i;

                imgs[i].onclick = function () {

                    var count = 0;

                    for (var j = 0; j <= this.index; j++) {

                        imgs[j].src = "/Script/image/evaluate/full.png";

                        count++;

                    }

                    for (var h = (this.index + 1); h < len; h++) {

                        imgs[h].src = "/Script/image/evaluate/empty.png";

                    }

                    var starResult = $(this).parent().parent().find(".starResult");

                    starResult.val(count);

                }

            }

        }

    </script>

</body>

</html>

五角星：

jquery 五星评价(图片实现)的更多相关文章

  1. jQuery拖动剪裁图片作为头像

    图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...

  2. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  3. 使用jquery插件实现图片延迟加载技术（懒加载）

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  4. 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...

  5. jQuery之手风琴图片

    <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  7. jQuery.hhNewSilder 滚动图片插件

    /**  * jQuery.hhNewSilder 滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  8. jquery点击图片选中特效

    jquery点击图片选中特效 点击在线预览效果

  9. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

随机推荐

  1. [计算机故障]笔记本无法启动,开机启动出现“Operating System Not Found”无法进系统

    背景介绍:同事的一台索尼的笔记本,安装XP.开机启动出现“Operating System Not Found”无法进系统 诊断: 初步判断硬盘故障.但听声音,没有异响. 开机按F2进入BIOS设置. ...

  2. YTU 2635: P4 游戏中的Human角色

    2635: P4 游戏中的Human角色 时间限制: 1 Sec  内存限制: 128 MB 提交: 524  解决: 328 题目描述 在一个平面打斗游戏中,任何的角色(Role)都有血量(bloo ...

  3. 【Silverlight】Bing Maps学习系列（五）：绘制多边形（Polygon）图形（转）

    [Silverlight]Bing Maps学习系列(五):绘制多边形(Polygon)图形 Bing Maps Silverlight Control支持用户自定义绘制多边形(Polygon)图形, ...

  4. USACO 刷题有感

    最近每天都尽量保持着每天一道USACO的题目,呵呵,一开始都是满简单的,一看题目基本上思路就哗啦啦地出来了,只不过代码实现有点麻烦,花了一些时间去调试,总体感觉还不错,但是越往后做,应该就很难保持一天 ...

  5. 洛谷 P1965 转圈游戏 —— 快速幂

    题目:https://www.luogu.org/problemnew/show/P1965 居然真的就只是 ( x + m * 10k % n ) % n 代码如下: #include<ios ...

  6. 使用Java实现图像分割

    为减少动画制作过程中的IO操作,我们可以使用连续动画来改善动画播放效率.如果我们对图像中的每张小图像单独分割成独立的文件,那么当每次要使用这些小图像的时候,我们都得从文件中读取图像信息. 实际上我们可 ...

  7. [Swift通天遁地]一、超级工具-(20)图片面部聚焦：使图像视图自动聚焦图片人物的面部位置

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. Syntax error on token ";", , expected 错误

    eclipse错误提示如图: 错误代码如图: 一开始百思不得其解,后来终于发现问题的原因所在,java中变量的声明可以不在方法中,但语句只能出现在方法中,可以再声明变量的时候就赋初值,但如果要单独赋值 ...

  9. [51nod]1678 lyk与gcd（莫比乌斯反演）

    题面 传送门 题解 和这题差不多 //minamoto #include<bits/stdc++.h> #define R register #define pb push_back #d ...

  10. HDU 1879（最小生成树）

    #include "iostream" #include "algorithm" #include "cstdio" using names ...