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. Apple Swift学习教程

    翻译自苹果的官方文档:The Swift Programming Language. 简单介绍 今天凌晨Apple刚刚公布了Swift编程语言,本文从其公布的书籍<The Swift Progr ...

  2. 关于ServerSocketChannel和SocketChannel

    1 这两个类是抽象类 源码里面它们的前面是加了abstract的. 2 抽象类是不能new出实例的 3 这两个类使用静态方法open创建其子类的实例 有动态绑定原理可知,返回的ServerSocket ...

  3. MATLAB——matlab特殊符号表【转载】

    链接来源: matlab特殊符号表 http://blog.sina.com.cn/s/blog_4a09187801014xg9.html Character Sequence Symbol Cha ...

  4. 使用SwingWork反而阻塞SwingUI

    最近加载图片的过程中使用了SwingWork来下载图片,但是发现会使得Swing的UI界面假死 查看了一下资料,SwingWork的设计初衷就是为了解决卡死UI的问题,正常使用应该没有问题,但是有一点 ...

  5. python中如何理解if __name__ == '__main__'

    __name__ 是当前模块名,当模块被直接运行时模块名为 __main__ .这句话的意思就是,当模块被直接运行时,以下代码块将被运行,当模块是被导入时,代码块不被运行.我们通过一个简单的例子来理解 ...

  6. Flask中的ThreadLocal本地线程，上下文管理

    先说一下和flask没有关系的: 我们都知道线程是由进程创建出来的,CPU实际执行的也是线程,那么线程其实是没有自己独有的内存空间的,所有的线程共享进程的资源和空间,共享就会有冲突,对于多线程对同一块 ...

  7. [loj6089]小Y的背包计数问题

    https://www.zybuluo.com/ysner/note/1285358 题面 小\(Y\)有一个大小为\(n\)的背包,并且小\(Y\)有\(n\)种物品. 对于第\(i\)种物品,共有 ...

  8. 栗染-Error parsing D:\sdkforas\android-sdk-windows\system-images\android-24\android-wear\x86\devices.xml

    每次打开android virtual device manager 下面都会出现这样的问题 解决办法: 打开自己安装的sdk目录,找到/tools/lib/devices.xml去替换图中路径里面的 ...

  9. bzoj 1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富【记忆化搜索+剪枝】

    c[x][y]为从(x,y)到(n,m)的最大值,记忆化一下 有个剪枝是因为y只能+1所以当n-x>m-y时就算x也一直+1也是走不到(n,m)的,直接返回0即可 #include<ios ...

  10. post和get区别，其他答案真的太坑

    原理: get和post都是http定义与服务器交互的方法,还有put,delete url是网络上的资源,那么http中的get,post,put,delete对应的就是对这个资源的查,改,增,删四 ...