使用jQuery方法做任务左右栏移动

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>队员移动</title>
    <script type="text/javascript" src="0621popwindow/jquery-1.11.2.min.js"></script>
</head>
<style type="text/css">

    *{margin: 10px auto auto 32px;
    }
    .wk{width: 1100px;height: 400px; background-color: #2effff;}
    .zl{width: 200px;height: 30px;background-color: #d4ff19;border: 2px red solid;
        font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px;
        top: 30px;  }
    .zl2{width: 200px;height: 30px;background-color: #d4ff19;border: 2px red solid;
        font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px;
        top: 30px;  }
    .middle1{width: 130px;height: 60px;
        left: 370px;top: 60px;border: 2px mediumvioletred solid;position: absolute;
        font-family: "黑体";text-align: center;vertical-align: middle;font-size: 25px;}
    .middle2{width: 130px;height: 60px;
        left: 370px;top: 160px;border: 2px mediumvioletred solid;position: absolute;
        font-family: "黑体";text-align: center;vertical-align: middle;font-size: 25px;}
    .jieshou{width: 200px;height: 30px;background-color: #d4ff19;border: 2px red solid;
        font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px;
        top: 3px; left: 7px;position: absolute;z-index: 3;}
    #right{width:200px; height:300px; float:left;background-color:#0CF;right: 150px;
        position: absolute  ;top: 30px}
</style>
<body>
<div class="wk">
    <div>
        <div class="zl">楚留香</div>
        <div class="zl">陆小凤</div>
        <div class="zl">铁中棠</div>
        <div class="zl">李寻欢</div>
        <div class="zl">叶孤城</div>
        <div class="zl">花满楼</div>
        <div class="zl">西门吹雪</div>
    </div>
    <div class="middle1" >单个转移</div>
    <div class="middle2">多个转移</div>

<div id="right"></div>

</div>
</body>
<script type="text/javascript">
$(document).ready(function(e){
    $(".zl").click(function(){
        //清除所有选中颜色
        $(".zl").css("background-color","#d4ff19");
        $(".zl").attr("xz",0);
        //设置选中
        $(this).css("background-color","#1DC71E");
        $(this).attr("xz",1);
    })

    //移动一项
    $(".middle1").click(function(){
        var xuanzhong=$(".zl");
        for (var i=0;i<xuanzhong.length;i++)
        {
            //判断选中的某一项
            if(xuanzhong.eq(i).attr("xz")==1)
            {
                var zhi=xuanzhong.eq(i).text();
                //
                if(Has(zhi))
                {
                    var str = "<div class=‘zl2‘>"+zhi+"</div>";
                    $("#right").append(str);
                }

            }
        }
    })

    $(".middle2").click(function(){
        var lift = $(".zl");
        for (var i=0;i<lift.length;i++)
        {
            var zhi = lift.eq(i).text();
            if (Has(zhi))
            {
                var str = "<div class=‘zl2‘>"+zhi+"</div>";
                $("#right").append(str);
            }
        }

    })
});
   function Has(zhi)
   {
       var list=$(".zl2");
       var iscunzai=true;
       for (var i=0;i<list.length;i++)
       {
           if(list.eq(i).text()==zhi)
           {
               iscunzai = false;
               break;
           }
       }
       return iscunzai;
   }

</script>
</html>

  

时间: 2024-10-08 10:44:21

使用jQuery方法做任务左右栏移动的相关文章

【源码分享】jquery+css实现侧边导航栏

jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码 这里是css代码,详情请看注释 1 <style>

js与jQuery方法对比

CreateTime--2017年1月19日10:00:10Author:Marydonjavascript与jQuery方法对比jquery对象转dom对象 //方式一 $("#confirm")[0] //方式二 $("#confirm").get(0) //方式三 $("#confirm").eq(0)[0] var getObjectByJs = document.getElementById("test"); var

原生JS取代一些JQuery方法的简单实现

原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorthand var $ = function (el) { return document.querySelect

jquery方法大总结②

jquery自定义属性,区分prop()和attr() jQueryObject.prop( propertyName [, value ] ):为添加,获取属性(property),并非attribute. jquery 1.6新增. jquery:prop()和attr()的主要区别: prop()函数针对的是DOM元素(JS Element对象)的属性, attr()函数针对的是DOM元素所对应的文档节点的属性. js:property和attribute的主要区别: 1.(隐式)docu

jQuery方法源码解析--jQuery($)方法(一)

jQuery方法源码解析--jQuery($)方法 注: 1.本文分析的代码为jQuery.1.11.1版本,在官网上下载未压缩版即可 2.转载请注明出处 jQuery方法: 这个方法大家都不陌生,在使用过程中,它还有另外一个名字,美元符号:$,$(...)其实就是jQuery(...); 它有很多种用法,通常都返回一个jquery对象,也可以作为$(document).ready(...);的简写形式,分析之前先看一下jQuery都有什么用法. 1.jQuery( selector [, co

jQuery带有定时器的tab栏切换

现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务器压力较大,而淘宝的是当鼠标放上去2秒左右,才切换,这样,防止不断的来回切换,这个效果我们需要带定时器来控制就好了. 小强老师今天就以淘宝的tab栏切换,利用jquery定时器来做这个效果. 首先先把html 结构书写如下: <div class="r-hd">        

html()和text()这两个jQuery方法有什么区别

html()和text()这两个jQuery方法有什么区别:标题中的两个方法是jQuery非常常用的两个方法,并且有时候作用似乎是一模一样的,其实这只是一种假象而已,下面结合实例来介绍一下他们的区别,首先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

Javascript或jQuery方法产生任意随机整数

方法1:javascritp方法 1 2 3 4 5 6 //随机数    function diu_Randomize(b,e){        if(!b && b!=0 || !e){return "?";}        return Math.floor( ( Math.random() * e ) + b );    }    $(window).load = $(".ps"+diu_Randomize(1,12)).show();//1

jQuery方法属性

jQuery效果: jQuery隐藏/显示/切换 jQuery hide()隐藏  方法可用来隐藏HTML文本 jQuery show()显示  方法可用来显示HTML文本 jQuery toggle()切换  方法可用来切换hied()和show()方法,显示被隐藏的元素,并隐藏已显示的元素 jQuery淡入/淡出/切换/透明度 jQuery fadeIn() 淡入  方法用于淡入已隐藏的元素 jQuery fadeout() 淡出 方法用于淡出可见元素 jQuery fadetoggle()