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. [DevExpress]DevExpress的安装与使用

    一.下载安装文件 依据自己的须要选择不同的版本号.下面为15.1 安装时选择自己须要的模块进行安装,之后进行激活,购买授权或者"其它方式". 二.安装完 在VSIDE工具栏会添加下 ...

  2. android获取手机的IMSI码

    android--获取手机的IMSI码,并判断是中国移动\中国联通\中国电信转载 TelephonyManager telManager = (TelephonyManager) getSystemS ...

  3. P3199 [HNOI2009]最小圈 01分数规划

    裸题,第二个权值是自己点的个数.二分之后用spfa判负环就行了. 题目描述 考虑带权的有向图G=(V,E)G=(V,E)G=(V,E)以及w:E→Rw:E\rightarrow Rw:E→R,每条边e ...

  4. POJ2503 Babelfish map或者hash_map

    POJ2503 这是一道水题,用Map轻松AC. 不过,可以拿来测一下字符串散列, 毕竟,很多情况下map无法解决的映射问题需要用到字符串散列. 自己生成一个质数, 随便搞一下. #include&l ...

  5. wrap(),wrapAll(),wrapInner()的区别

    wrap从字面上理解就是包裹的意思,这三个函数也都是起到将内部节点进行包裹的作用,但是他们的各自的功能有又大不相同. 1.  a.wrap(b) 这个函数的作用是用b将a进行包裹,其中a所选中的可以为 ...

  6. 从缓冲上看阻塞与非阻塞socket在发送接收上的区别（转载）

    转自:http://blog.chinaunix.net/uid-24517549-id-4044877.html   首先socket在默认情况下是阻塞状态的,这就使得发送以及接收操作处于阻塞的状态 ...

  7. H5页面背景音乐，C33 360°旋转效果

    在做H5页面的时候,经常会需要用到背景音乐,比如电子贺卡.动态音乐相册等,右上角有个360°旋转的音乐图标,点击可以控制音乐是否播放,那这个效果是如何实现的呢?我现整理了一下代码:  Demo  点击 ...

  8. bzoj 1578: [Usaco2009 Feb]Stock Market 股票市场【背包】

    参考:https://blog.csdn.net/mars_ch/article/details/53011234 我背包真是好不熟练啊-- 第一天买了第三天卖相当于第一天买了第二天卖第二天再买第三天 ...

  9. ECMA里面的操作符，

    ECMA里面的操作符,描述了一组操作于数据值的操作符,包括算数操作符.位操作符,关系操作符和相等操作符,ECMAscript操作符与之不同的是,他们能够使用于很多值,例如字符串.数字值.布尔值.甚至对 ...

  10. 基于.Net Core的API框架的搭建（4）

    6.加入日志功能 日志我们选用log4net,首先引入程序包: 选择2.0.8版本安装.然后在项目根目录新增log4net的配置文件log4net.config: <?xml version=& ...