js问题：按住shift键选中多个文件，而且不仅仅如此。

就是在网页上模拟windows的文件多选效果，类似于百度云里面的多文件选中。需求如下（见下图）：

单击某一图片，选中该图片，再次单击，取消选中
单击2图，2图被选中，按住shift，单击6图，2~6图都被选中，shift按住不放，单击4图，2~4图被选中，5、6图取消选中，shift按住不放，再次单击8图，那么2~8图都应该被选中
单击2图，2图被选中，按住shift，单击6图，2~6图都被选中，松开shift，单击10图，10图被选中，按住shift，单击12图，2~6图依然保持选中效果，并将10~12图都选中

1和2的功能已经实现了，见下方代码，直接粘贴到一个文件打开就可看到效果。但是第3个需求不知道怎么弄，第2个和第3个需求一个弄好了另外一个就废了。真蛋疼！求大神赐教。
screenshot

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <title>keyMulSelect</title>
    <style type="text/css">
        #main {
            width: 1150px;
            height: 780px;
            border: 1px solid #e7e81a;
            margin: auto;
        }
 
        p {
            float: left;
            width: 150px;
            height: 150px;
            border: 1px dotted grey;
            margin: 19px;
        }
 
        p[sel = "sel"] {
            border: 1.8px solid red;
        }
    </style>
 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var start = null;
            $("p").click(function (e) {
                e = e || event;
                if (e.shiftKey) {
                    var si = $(start).index(), ti = $(this).index();
                    var sel = $("p").slice(Math.min(si, ti), Math.max(si, ti) + 1);
                    sel.attr("sel", "sel");
                    $("p").not(sel).removeAttr("sel");
                    return;
                }
                start = this;
                if ($(this).attr("sel") == "sel") {
                    $(this).removeAttr("sel");
                } else {
                    $(this).attr("sel", "sel");
                }
            })
        })
    </script>
</head>
 
<body>
<div id="main">
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
 
    <p><img src="http://avatar.csdn.net/9/F/E/1_yanqinhui.jpg" title="访问我的空间"></p>
</div>
</body>
</html>

js问题：按住shift键选中多个文件，而且不仅仅如此。

相关课程

相关电子书

相关实验场景

js问题：按住shift键选中多个文件，而且不仅仅如此。

相关课程

相关文章

相关电子书

相关实验场景