DOM和jQuery学习_Day17

HTML+CSS补充

主站布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7     <style>
 8         .clearfix:after{
 9             content: '........';
10             display: block;
11             clear: both;
12             visibility: hidden;
13             height: 0;
14         }
15     </style>
16 </head>
17 <body>
18     <div style="background-color: green" class="clearfix">
19         <div style="width: 200px;height: 200px;border: 1px solid red;float: left"></div>
20         <div style="width: 200px;height: 200px;border: 1px solid red;float: left"></div>
21         <div style="width: 200px;height: 200px;border: 1px solid red;float: left"></div>
22         <div style="width: 200px;height: 200px;border: 1px solid red;float: left"></div>
23         <div style="width: 200px;height: 200px;border: 1px solid red;float: left"></div>
24     </div>
25 
26 </body>
27 </html>
View Code

响应式布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 
 8     <style>
 9         @media (min-width: 800px){
10             .item{
11                 width: 20%;
12                 float: left;
13             }
14         }
15         @media (max-width: 800px){
16             .item{
17                 width: 33.3%;
18                 float: left;
19             }
20         }
21     </style>
22 </head>
23 <body>
24     <div>
25         <div class="item">
26             <label>用户名：</label>
27             <input type="text" />
28         </div>
29         <div class="item">
30             <label>用户名：</label>
31             <input type="text" />
32         </div>
33         <div class="item">
34             <label>用户名：</label>
35             <input type="text" />
36         </div>
37         <div class="item">
38             <label>用户名：</label>
39             <input type="text" />
40         </div>
41         <div class="item">
42             <label>用户名：</label>
43             <input type="text" />
44         </div>
45         <div class="item">
46             <label>用户名：</label>
47             <input type="text" />
48         </div>
49         <div class="item">
50             <label>用户名：</label>
51             <input type="text" />
52         </div>
53     </div>
54 </body>
55 </html>
View Code

 DOM事件

绑定事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9 
10     <a href="http://www.baidu.com" id="i1">揍你</a>
11     <script>
12         document.getElementById('i1').onclick = function () {
13             alert(123);
14         }
15     </script>
16 </body>
17 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <form action="http://www.baidu.com">
10         <input type="text" id="user" name="user" />
11         <!--<input type="submit" value="提交" onclick="return func();" />-->
12         <input type="submit" id="sb" value="提交" />
13     </form>
14     <script>
15         document.getElementById('sb').onclick = function(){
16             var v = document.getElementById('user').value;
17             if(v.length>0){
18                 return true;
19             }else{
20                 alert('请输入内容222');
21                 return false;
22             }
23         };
24         function func() {
25             var v = document.getElementById('user').value;
26             if(v.length>0){
27                 return true;
28             }else{
29                 alert('请输入内容');
30                 return false;
31             }
32         }
33     </script>
34 </body>
35 </html>
绑定事件 默认阻止事件发生

THIS事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 
 8 </head>
 9 <body>
10 
11     <!--<div onclick="fuck1(this);">战争</div>-->
12     <div id="i1">战争</div>
13     <script>
14 //        function fuck1(self) {
15 //            var v = self.innerHTML;
16 //            alert(v);
17 //        }
18         document.getElementById('i1').onclick = function () {
19             var v = this.innerHTML;
20             alert(v);
21         }
22     </script>
23 
24 </body>
25 </html>
this用法

获取焦点

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 
 8 </head>
 9 <body>
10     <input type="text" value="请输入关键字" onfocus="fuckFocus(this);" onblur="fuckBlur(this);"/>
11     <input type="button" value="提交" />
12     <script>
13         /*
14         当标签获取焦点时，执行该函数
15          */
16         function  fuckFocus(ths) {
17             // value   innerText   innerHtml
18             var v = ths.value;
19             if(v == '请输入关键字'){
20                 ths.value = "";
21             }
22         }
23         /*
24         当标签失去焦点时
25          */
26         function fuckBlur(ths) {
27             var v = ths.value;
28             if(v.length == 0){
29                 ths.value = "请输入关键字";
30             }
31         }
32     </script>
33 </body>
34 </html>
View Code

一个标签绑定多个相同事件

 1 <body>
 2 
 3     <div id="i1" onclick="console.log(1);" >鸡建明</div>
 4     <script>
 5 //        document.getElementById('i1').onclick = function () {
 6 //            console.log(2);
 7 //        }
 8         document.getElementById('i1').addEventListener('click',function () {
 9             console.log(2);
10         })
11     </script>
12 </body>

事件冒泡

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7 
 8 </head>
 9 <body>
10 
11     <div id="i1" onclick="console.log(1);" >鸡建明</div>
12     <script>
13 //        document.getElementById('i1').onclick = function () {
14 //            console.log(2);
15 //        }
16         document.getElementById('i1').addEventListener('click',function () {
17             console.log(2);
18         })
19     </script>
20 </body>
21 </html>
View Code

全局事件

 1 <body>
 2     <input type="text" onkeydown="func(this,event);" />
 3 
 4     <script>
 5         function  func(ths,e) {
 6             console.log(ths,e);
 7         }
 8         window.onkeydown = function(e){
 9             console.log(e);
10         }
11 
12     </script>
13 </body>
View Code

 jQuery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

选择器

找到某个或者某类标签

根据ID查找  # ‘’ 都是必须的

$('#i1')    -> 找id=i1的标签
$('.i1')    -> 找class=i1的标签
$('div')    -> 找所有div标签
$('a')  找所有a标签
$('#i1 .c1 div') -> 先找到id=i1标签，在其子子孙孙中找class=c1标签，在上述基础上再进行找div标签
$('#i1>a')
$('a,.c2,#i10')  -->拿到所有a  c2 #10的标签， and组合


层级

$('#i10  a')   在id=10的标签的子子孙孙里面找a标签

$('#i10>a') 儿子

:first    $('#i10 a:first')  第一个
:last
:eq()

属性：

$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签

表单：

<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>

$("input[type='text']")简写成$(':text')
$(':disabled')  在表单里面找 disabled属性的标签

$('#tb:checkbox').prop('checked');获取值

$('#tb:checkbox').prop('checked'，true);  设置值

prop方法专门对checked和selected做操作

jQuery方法内置循环： $('#tb:checkbox').xxxx

$('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)

})

添加样式 移除样式

$('#i1').addClass('hide')

$('#i1').removeClass('hide')

筛选器

  $(this)  当前标签

$('#i1').parent()  父标签
$('#i1').children(':text')  获取所有孩子标签
$('#i1').next()   当前标签的下一个标签
$('#i1').nextAll()   当前标签的下面所有标签
$('#i1').prev()   当前标签的上一个标签
$('#i1').prevAll()
$('#i1').siblings()  获取所有兄弟标签
$('#i1').find('.c1')   子子孙孙找查找


  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <script src="jquery-3.1.1.js"></script>
  6     <title>Title</title>
  7     <style>
  8         .pg-header{
  9             height: 48px;
 10             background-color: black;
 11         }
 12         .pg-body .menu{
 13             width: 20%;
 14             float: left;
 15             background-color: #d3d3d3;
 16             height: 800px;
 17         }
 18         .pg-body .test{
 19             width: 80%;
 20             float: left;
 21         }
 22         .menu .item .title{
 23             background-color: #297EA8;
 24             color: white;
 25             height: 40px;
 26         }
 27         .menu .item{
 28             display: block;
 29         }
 30         .menu .item .content{
 31             background-color: white;
 32         }
 33         .menu .item .content a{
 34             display: block;
 35             padding: 10px;
 36         }
 37         .hide{
 38             display: none;
 39         }
 40         .shade{
 41             position: fixed;
 42             top:0;
 43             left: 0;
 44             right: 0;
 45             bottom: 0;
 46             background-color: black;
 47             opacity: 0.6;
 48             z-index: 100;
 49         }
 50         .loading{
 51             position: fixed;
 52             top:30%;
 53             left: 50%;
 54             width: 32px;
 55             height: 32px;
 56             background: url(loader.gif);
 57             z-index: 101;
 58         }
 59         .model{
 60             position: fixed;
 61             top:50%;
 62             left: 50%;
 63             width: 400px;
 64             height: 400px;
 65             z-index: 101;
 66             background-color: white;
 67             margin-left: -200px;
 68             margin-top: -200px;
 69         }
 70     </style>
 71 </head>
 72 <body>
 73     <div id="i1" class="pg-header"></div>
 74     <div class="pg-body">
 75         <div class="menu">
 76             <div class="item">
 77                 <div class="title" onclick="changeMenu(this);" >菜单1</div>
 78                 <div class="content">
 79                     <a>小彩蛋</a>
 80                     <a>小彩蛋</a>
 81                     <a>小彩蛋</a>
 82                     <a>小彩蛋</a>
 83                     <a>小彩蛋</a>
 84                 </div>
 85             </div>
 86             <div class="item">
 87                 <div class="title" onclick="changeMenu(this);">菜单2</div>
 88                 <div class="content hide">
 89                     <a>小彩蛋</a>
 90                     <a>小彩蛋</a>
 91                     <a>小彩蛋</a>
 92                     <a>小彩蛋</a>
 93                     <a>小彩蛋</a>
 94                 </div>
 95             </div>
 96             <div class="item">
 97                 <div class="title" onclick="changeMenu(this);">菜单3</div>
 98                 <div class="content hide">
 99                     <a>小彩蛋</a>
100                     <a>小彩蛋</a>
101                     <a>小彩蛋</a>
102                     <a>小彩蛋</a>
103                     <a>小彩蛋</a>
104                 </div>
105             </div>
106             <div class="item">
107                 <div class="title" onclick="changeMenu(this);">菜单4</div>
108                 <div class="content hide">
109                     <a>小彩蛋</a>
110                     <a>小彩蛋</a>
111                     <a>小彩蛋</a>
112                     <a>小彩蛋</a>
113                     <a>小彩蛋</a>
114                 </div>
115             </div>
116 
117         </div>
118         <div class="test">
119             <input type="button" value="添加" onclick="addAsset();">
120             <table border="1">
121                 <tr>
122                     <td target="#id">1</td>
123                     <td target="#host">c1.com</td>
124                     <td target="#port">80</td>
125                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
126                     <td>查看更多</td>
127 
128                 </tr>
129                 <tr>
130                     <td target="#id">2</td>
131                     <td target="#host">c2.com</td>
132                     <td target="#port">80</td>
133                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
134                     <td>查看更多</td>
135 
136                 </tr>
137                 <tr>
138                     <td target="#id">3</td>
139                     <td target="#host">c3.com</td>
140                     <td target="#port">80</td>
141                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
142                     <td>查看更多</td>
143 
144                 </tr>
145                 <tr>
146                     <td target="#id">4</td>
147                     <td target="#host">c4.com</td>
148                     <td target="#port">80</td>
149                     <td> <a class='edit'>编辑</a>| <a>删除</a></td>
150                     <td>查看更多</td>
151 
152                 </tr>
153             </table>
154 
155 
156         </div>
157     </div>
158     $('.edit').click(function(){
159 
160     })
161     $('td').delegate('.edit','click',function(){
162 
163     })
164 
165     <div class="shade hide"></div>
166     <div class="model hide">
167         <p>序号：<input id="id" type="text" /></p>
168         <p>主机名：<input id="host" type="text" /></p>
169         <p>端口：<input id="port" type="text" /></p>
170         <p>
171             <a onclick="confirmAsset();">确定</a> <a onclick="cancleAsset();">取消</a>
172         </p>
173 
174     </div>
175     <div class="loading hide"></div>
176 
177     <script src="jquery-1.12.4.js"></script>
178     <script>
179         function changeMenu(ths) {
180             // console.log(ths);
181             // ths--> DOM的对象 代指当前点击的菜单标签(内部封装仅仅只有DOM的方法)
182             // DOM对象转换成jquery对象： $(ths)
183             // jQuery对象转换成DOM对象： $('#i1')[0]
184             // 找到当前ths的下一个标签，去掉hide样式
185             // 找到当前ths的父标签，再找所有的兄弟标签，内存再找class=content，加上hide
186             $(ths).next().removeClass('hide');
187             $(ths).parent().siblings().find('.content').addClass('hide');
188 
189         }
190         
191         function addAsset() {
192             $('.shade,.model').removeClass('hide');
193         }
194         function cancleAsset() {
195             $('.shade,.model').addClass('hide');
196         }
197         function confirmAsset() {
198             $('.shade,.model').addClass('hide');
199             $('.shade,.loading').removeClass('hide');
200         }
201         
202         function editAsset(ths) {
203             // 弹出对话框
204             // 获取当前行数据
205             // 将数据填充到指定对话框的位置
206 
207             // 显示对话框
208             $('.shade,.model').removeClass('hide');
209 
210             // 获取上面所有的td
211             var $td_list = $(ths).parent().prevAll();
212             // 循环所有的td
213             $td_list.each(function () {
214                 // this，当前循环的td（DOM）  $(this)
215                 var $td = $(this);
216                 // 获取标签内部的文本信息，相当于innerText
217                 var text = $td.text();
218                 // 获取标签自定义属性的值
219                 var v = $td.attr('target'); // #port,   #id,  #host
220                 // $(v)获取对应的input标签，
221                 // $(v).val('df') 对input系列进行赋值
222                 $(v).val(text);
223             })
224         }
225     </script>
226 </body>
227 </html>
表单主机添加
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7     <style>
 8         .menus{
 9             height: 48px;
10             background-color: #d3d3d3;
11             line-height: 48px;
12         }
13         .menus a{
14             display: inline-block;
15             border-right: 1px solid #b2b2b5;
16             padding: 0 10px;
17             margin-top: -3px;
18         }
19         .menus a.active{
20             border-top: 3px solid cadetblue;
21         }
22         .hide{
23             display: none;
24         }
25     </style>
26 </head>
27 <body>
28     <div style="width: 500px;border: 1px solid #b2b2b5;min-height: 300px;">
29         <div class="menus">
30             <a class="active" target="i1">菜单1</a>
31             <a target="i2">菜单2</a>
32             <a  target="i3">菜单3</a>
33         </div>
34         <div class="contents">
35             <div nid="i1" class="content">内容一</div>
36             <div nid="i2" class="content hide">内容二</div>
37             <div nid="i3" class="content hide">内容上</div>
38         </div>
39     </div>
40     <script src="jquery-1.12.4.js"></script>
41     <script>
42         $('.menus a').click(function(){
43             // this代指当前触发事件的标签,DOM对象
44             $(this).addClass('active').siblings().removeClass('active');
45             var v = $(this).attr('target'); // i1,i2 i3
46             var t = 'div[nid="' + v + '"]'; // div[nid="i1"]
47             $('.contents').find(t).removeClass('hide').siblings().addClass('hide');
48 
49         })
50     </script>
51 
52 </body>
53 </html>
菜单

 

链式编程

$('#i1').next().prev().find('.c1').parent()

$('#i1').prevAll().each(function(){
    // this，当前循环的每一个标签 DOM对象
    // $(this)

})

操作

- addClass('x')
- removeClass('x')
- val()
    - $('#i1').val()     # 获取值  针对表单类，input可以获取  select、textarea也可以
    - $('#i1').val('ff') # 设置
    PS:textarea,select
- text()
    - $('#i1').text()     # 获取值
    - $('#i1').text('ff') # 设置
    
- html()
    - $('#i1').html()     # 获取值
    - $('#i1').html('ff') # 设置
- attr()
    - $('#i1').attr('属性名') # 获取值
    - $('#i1').attr('属性名','new') # 对属性设置值
- prop()
    专门对于checkbox和radio提供的内容
    $(':checkbox').attr('checked','checked');
    $(':checkbox').prop('checked',true)
    $(':checkbox').prop('checked',false)
- css
- scrollTop
   
// $('#u1').append(tag);
// $('#u1').after(tag);
// $('#u1').prepend(tag);
// $(tag).appendTo($('#u1'));
// $(tag).empty()  #清空标签里面内容 不删除标签
// $(tag).remove()  #删掉标签
toggleClass('hide') #有了去掉 没有加上

$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容，整体传过去不解析

$(..).val()  获取值  针对input系列和selected标签

$(..).html()
$(..).html("<a>1</a>")

$('t1').css('样式名称'，‘样式值’)

var fontsize = 15;
$(tag).css('fontSize',fontSize + "px");
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
offset().left 获取指定标签在html中的坐标

jquery转DOM对象：
var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中
DOM转jquery：
var v=document.getElementById("v"); //DOM对象 
28 var $v=$(v); //jQuery对象




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.1.1.js"></script>
 6     <title>Title</title>
 7     <style>
 8         .hide{
 9             display: none;
10         }
11     </style>
12 
13 </head>
14 <body>
15     <a onclick="deng();">开关灯</a>
16     <div id="i2">
17         asdfasdfasdfasdf
18     </div>
19 
20 
21     <a onclick="checkAll()">全选</a>
22     <a onclick="checkCancle()">取消</a>
23     <a onclick="checkReverse()">取消</a>
24     <table border="1">
25                 <tr>
26                     <td><input type="checkbox" /></td>
27                     <td target="#id">1</td>
28                     <td target="#host">c1.com</td>
29                     <td target="#port">80</td>
30                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
31                     <td>查看更多</td>
32 
33                 </tr>
34                 <tr>
35                     <td><input type="checkbox" /></td>
36                     <td target="#id">2</td>
37                     <td target="#host">c2.com</td>
38                     <td target="#port">80</td>
39                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
40                     <td>查看更多</td>
41 
42                 </tr>
43                 <tr>
44                     <td><input type="checkbox" /></td>
45                     <td target="#id">3</td>
46                     <td target="#host">c3.com</td>
47                     <td target="#port">80</td>
48                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
49                     <td>查看更多</td>
50 
51                 </tr>
52                 <tr>
53                     <td><input type="checkbox" /></td>
54                     <td target="#id">4</td>
55                     <td target="#host">c4.com</td>
56                     <td target="#port">80</td>
57                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
58                     <td>查看更多</td>
59 
60                 </tr>
61             </table>
62     <script src="jquery-1.12.4.js"></script>
63     <script>
64         function deng() {
65             $('#i2').toggleClass('hide');
66         }
67         function checkAll() {
68             $('table :checkbox').prop('checked',true);
69         }
70         function checkCancle() {
71             $('table :checkbox').prop('checked',false);
72         }
73         function checkReverse() {
74             $('table :checkbox').each(function () {
75                 if($(this).prop('checked')){
76                     $(this).prop('checked',false);
77                 }else{
78                     $(this).prop('checked',true);
79                 }
80             })
81         }
82     </script>
83 </body>
84 </html>
全选反选
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 
 8 </head>
 9 <body>
10     <textarea id="i1"></textarea>
11     <select id="i2">
12         <option value="1">三倍</option>
13         <option value="11">失败</option>
14         <option value="2">阿斯蒂芬</option>
15     </select>
16     <select id="i3" multiple>
17         <option value="1">三倍</option>
18         <option value="11">失败</option>
19         <option value="2">阿斯蒂芬</option>
20     </select>
21     <script src="jquery-1.12.4.js"></script>
22 </body>
23 </html>
View Code

综合练习

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .item{
 9             height: 80px;
10             line-height: 80px;
11             border: 1px solid red;
12         }
13         .item .zan{
14             position: relative;
15         }
16         .item .zan i{
17             position: absolute;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="item">
23         <div class="zan">
24             <span>赞</span>
25         </div>
26     </div>
27     <div class="item">
28         <div class="zan">
29             <span>赞</span>
30             <i style="position: absolute">+1</i>
31         </div>
32     </div><div class="item">
33         <div class="zan">
34             <span>赞</span>
35         </div>
36     </div><div class="item">
37         <div class="zan">
38             <span>赞</span>
39         </div>
40     </div>
41 
42     <script src="jquery-1.12.4.js"></script>
43     <script>
44         $('.item span').click(function () {
45             var fontSize = 12;
46             var top = -1;
47             var left = 20;
48             var opacity = 1;
49             var tag = document.createElement('i');
50             tag.innerHTML = '+1';
51             $(this).after(tag);
52             var obj = setInterval(function () {
53                 fontSize += 10;
54                 top -= 5;
55                 left += 5;
56                 opacity -= 0.2;
57                 tag.style.fontSize = fontSize + 'px';
58                 tag.style.top = top + 'px';
59                 tag.style.left = left + 'px';
60                 tag.style.opacity = opacity;
61                 if(opacity < 0){
62                     // 关闭定时器
63                     clearInterval(obj);
64                 }
65             },90);
66         })
67 
68 
69 
70     </script>
71 </body>
72 </html>
点赞
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
 9         <div id="title" style="background-color: black;height: 40px;"></div>
10         <div style="height: 300px;"></div>
11     </div>
12 <script type="text/javascript" src="jquery-1.12.4.js"></script>
13 <script>
14     $(function(){
15         $('#title').mouseover(function(){
16             $(this).css('cursor','move');
17         });
18         $("#title").mousedown(function(e){
19             //console.log($(this).offset());
20             var _event = e || window.event;
21             var ord_x = _event.clientX;
22             var ord_y = _event.clientY;
23 
24             var parent_left = $(this).parent().offset().left;
25             var parent_top = $(this).parent().offset().top;
26 
27             $('#title').on('mousemove', function(e){
28                 var _new_event = e || window.event;
29                 var new_x = _new_event.clientX;
30                 var new_y = _new_event.clientY;
31 
32                 var x = parent_left + (new_x - ord_x);
33                 var y = parent_top + (new_y - ord_y);
34 
35                 $(this).parent().css('left',x+'px');
36                 $(this).parent().css('top',y+'px');
37 
38             })
39         });
40         $("#title").mouseup(function(){
41             $("#title").off('mousemove');
42         });
43     })
44 </script>
45 </body>
46 </html>
浮动窗

 

posted @ 2017-02-27 20:58  liumj  阅读(155)  评论(0)  编辑  收藏  举报