jy
/
flask-map


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div移动</title>
	<style>
		div{
			
			background-color: #00b894;
			position: absolute;
			
		}
	</style>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script>
		$(function(){
            var targetX;
            var targetY;
            $("#boxout").mouseenter(function(){
                $(this).mousemove(function(event){
				//$(this)就代表$(document)，处理谷歌和火狐对滚动的兼容
				var event = event || window.event;
				var pageX = event.pageX || event.clientX + $(this).scrollLeft();
				var pageY = event.pageY || event.clientY + $(this).scrollTop();
				targetX = pageX - $(".b").width()/2;
				targetY = pageY - $(".b").height()/2;
				//注意：这里不能通过$("#box").offset().left来设置，因为它只能获取，设置使用如下方法
                if(targetX<945&&targetY<946){
                    $(".b").show()
                    $(".b").css({
					left:targetX+55,
					top:targetY+55
				});
                }else{
                    $(".b").hide()
                }
				
			});
            })
			$("#boxout").mouseleave(function(){
                console.log("leave")
                
            })
		});
	</script>
</head>
<body style="width: 2000px;height: 2000px">
	<div id="boxout" style="width: 1000px; height: 1000px;">
        <div id="box" class="b" style="width: 100px; height: 100px;background-color: #ff0707;"></div>
    </div>
    <div id="continer" style="left: 1080px; width: 500px; height: 1000px;background-color: #07daff;">
        <table border="1px solid">
            <thead>
            <tr>
              <th>
                <input type="checkbox" id="allBtn"/>
              </th>
              <th>菜名</th>
              <th>饭店</th>
            </tr>
            </thead>
            <tbody id="j_tb">
            <tr>
              <td>
                <input type="checkbox" id="itemBox"/>
              </td>
              <td>红烧肉</td>
              <td>田老师</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" id="itemBox"/>
              </td>
              <td>西红柿鸡蛋</td>
              <td>田老师</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" id="itemBox"/>
              </td>
              <td>红烧狮子头</td>
              <td>田老师</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" id="itemBox"/>
              </td>
              <td>日式肥牛</td>
              <td>田老师</td>
            </tr>
            
            </tbody>
          </table>
    </div>
</body>
<script>
    $(function () {
  
      $("img").attr("src", "11111");
      
      //思路是，点击全选按钮后全选按钮状态是已选中，
      //那么代表之前全选按钮时未选中状态，所以其它
      //所有按钮设为选中状态,反之，其它所有按钮取消全选状态
       $("#allBtn").click(function(){
           var ischecked = $(this).prop('checked');
           if(ischecked == true){
             $('input').prop('checked',true);
           }else{
            $('input').prop('checked',false);
           }
  
       });
  
       $('input#itemBox').click(function(){
          //补充：如果我们手动选中了除了全选按钮外的全部按钮，那么全选按钮自动被选定
          //思路是，根据全部多选框的个数（排除一个总选按钮）和已选中多选框的个数对比，一致则总选按钮被自动选定
            var checkedLen = $('input#itemBox:checked').length;
            var allInput = $('input#itemBox').length;
            if(allInput == checkedLen){
                $("#allBtn").prop('checked',true);
            }else{
                $("#allBtn").prop('checked',false );
    
            }
            console.log($(this).parents().siblings("td").text())
            var txt = $(this).parents().siblings("td").text()
            var stat = $(this).is(":checked")
            if(stat==true){
                var ht = '<div id="box' + txt + '" class="b" style="width: 100px; height: 100px;background-color: #ff0707;">'+ txt +'</div>'
                $("body").append(ht)
            }
            else{
                $("#box"+txt).remove()
            }
            console.log($(this).is(":checked"))
  
  
       })
    });
  </script>

</html>