jquery写的一个说表拖拽层的效果——不多说直接上代码

最新推荐文章于 2024-08-18 23:01:41 发布
最新推荐文章于 2024-08-18 23:01:41 发布
阅读量416 收藏
点赞数 1
分类专栏： jquery 文章标签： jquery function border xhtml div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShengHaofeng/article/details/6995171
版权 
<!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>
    <title>Untitled Page</title>
    <style type="text/css">
        #Container
        {
            width:800px;
            height:500px;
            position:relative;
            border:1px solid #CCC;
        }
        #Slider
        {
            width:50px;
            height:50px;
            border:1px solid #CCC;
            background-color:Gray;
            position:absolute;
            left:0;
            top:50px;
            cursor:pointer;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript">
        var isMove = false;
        var mouseDownPosi;
        var InitPosition;
        $(document).ready(function () {
            $("#Slider").mousedown(function (e) {
                isMove = true;
                mouseDownPosi = e.pageX;
                InitPosition = $(this).css("left").replace("px", "");
            })
            $(document).mousemove(function (e) {
                if (isMove) {
                    var temp = parseInt(e.pageX) - parseInt(mouseDownPosi) + parseInt(InitPosition);
                    $("#Slider").css("left", temp + "px");
                }
            })
            $(document).mouseup(function () {
                isMove = false;
            })
        })
    </script>
</head>
<body>
    <div id="Container">
        <div id="Slider"></div>
    </div>
</body>
</html>





                

        

        

    




    

      

        

            

              
                
                  ShengHaofeng
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
一个使用Jquery写的一个鼠标拖动效果

				
			

			

				

					weixin_33809981的博客
				

				

					12-23
					
					75
					
				

			

		

		

			
				
近日项目中要做一个鼠标拖拽层的效果，于是手动使用Jquery做了一个，发出来跟大伙儿分享一下，并希望能得到高手的指点，如果哪位大侠觉得我的思路和代码不正确或者需要改进的话，希望能指点一二，在下感激不尽。
我的思路是这样的：
1、在鼠标按下的时候，捕获鼠标的当前位置；
2、得到要移动对象的当前位置信息；
3、鼠标移动时，计算鼠标移动的距离，...

			
		

	



                

              
                



	

		

			

				
					
用jquery写了个可以拖动层的代码

				
			

			

				

					zj978977593的专栏
				

				

					06-08
					
					572
					
				

			

		

		

			
				
<!--var b=false;var x;var y;//得到事件点和div的距离x,yfunction myDown(temp){		b = true ;		//x,y坐标是点击事件点和外该组件的距离差		x=event.x-$(temp).offset().left;		y=event.y-$(temp).offset().top;

			
		

	



                


  
              

                


	

		

			

				
					
请使用jQuery实现层的拖动效果

				
			

			

				

					A_KING2的博客
				

				

					05-20
					
					327
					
				

			

		

		

			
				
请使用jQuery实现层的拖动效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>div拖动</title>
        <style>
            div{
                width: 200px;
                height: 200px;
      

			
		

	





	

		

			

				
					
Jquery 实现层的拖动，支持回调函数

				
			

			

				

					weixin_30814223的博客
				

				

					04-21
					
					91
					
				

			

		

		

			
				
最近在写一个CMS内容管理系统，前台基本是用ajax异步请求服务器，通过ashx处理,返回json格式处理。由于需要更加人性化的界面，所以采用到了拖动层的操作。
以下是拖动层的主要核心方法，本来想写成插件的，考虑的没那么多时间，就以方法的方式了。

/*
 * Jquery 鼠标左键拖动面板
 * coder：新生帝
 * obj：jQuery选择器名称
 * callback：回调...

			
		

	



		

			
		



	

		

			

				
					
JS下拉有动画效果的可收缩菜单

				
			

			

				

					02-17
				

			

		

		

			
				
JS下拉有动画效果的可收缩菜单
IE6,IE7,火狐测试通过了

			
		

	





	

		

			

				
					
推荐一款轻量级的jQuery拖动插件 —— jQuery.dragmove

				
			

			

				

					gitblog_00032的博客
				

				

					06-05
					
					496
					
				

			

		

		

			
				
推荐一款轻量级的jQuery拖动插件 —— jQuery.dragmove
项目地址:https://gitcode.com/nathco/jQuery.dragmove
在网页交互设计中，可拖动元素的功能已经被广泛应用，从简单的列表排序到复杂的游戏界面。然而，实现这一功能通常需要依赖大型的库如jQuery UI。现在，有了jQuery.dragmove，你可以轻松地为DOM元素添加拖动功能，而无...

			
		

	





	

		

			

				
					
jquery实战——弹出框拖拽效果

				
			

			

				

					
				

				

					12-14
					
					301
					
				

			

		

		

			
				
今天主要记录一下弹出框拖拽效果：
一、移动弹出窗口的步骤是：按下鼠标左键——移动鼠标——松开鼠标左键停止移动
二、主要思想：
按下鼠标左键：$('div').mousedown(function(e){})
移动鼠标，获取鼠标当前坐标值：$(document).mousemove(function(e){})
松开鼠标左键停止移动：$('div').mouseup(functi...

			
		

	





	

		

			

				
					
jQuery练习——下拉菜单

				
			

			

				

					m0_55394328的博客
				

				

					09-12
					
					3539
					
				

			

		

		

			
				
哈喽大家好，本次是jQuery案例练习系列第一期，本期是用jQuery实现下拉菜单。
笔者还是前端的菜鸟，还请大家多多指教呀~

			
		

	





	

		

			

				
					
layer —— 一个简单的jQuery弹出层插件

				
			

			

				

					weixin_30865427的博客
				

				

					04-15
					
					231
					
				

			

		

		

			
				
layer的使用
4.24更新：注意：layer现在有旧版1.8.5版本和新版本3.0版本的，对应引入的JQ也要不同，相对应的JQ引入1.1和3.1，否则JQ会出问题
4.21更新；　
　　解答4-19的问题：采用红色字　　
4,19日更新问题
　　在老版本中（1.7）版中遇到的问题;问题补充：准确的说是，在移动端中所出现的问题，
　　　layer.confirm()  ...

			
		

	





	

		

			

				
					
jQuery点击弹出层可拖动代码

				
			

			

				

					06-24
				

			

		

		

			
				
总结来说，“jQuery点击弹出层可拖动代码”是通过结合jQuery的事件处理和DOM操作，实现了一个具有交互性和灵活性的弹出层组件。这种技术在网页应用和移动Web开发中非常常见，能有效提升用户与界面的互动性。通过深入...

			
		

	





	

		

			

				
					
简单好用的jQuery插件——Tdrag.js可以任意拖拽div内容.zip

				
			

			

				

					09-21
				

			

		

		

			
				
总的来说，`Tdrag.js`是一个实用且易于集成的jQuery插件，对于需要在网页中实现div元素拖拽功能的开发者来说，它无疑是一个高效的选择。其简单直观的API和灵活的配置选项，使得开发者能够快速构建出富有动态感的交互...

			
		

	





	

		

			

				
					
写了一个layout，拖动条连贯，内容区可为iframe

				
			

			

				

					10-30
				

			

		

		

			
				
本文介绍了一种特殊的布局方案——一个带有拖动条的布局，且其内容区域可以是`iframe`。  #### 二、拖动条（Draggable Slider） 在该布局中，拖动条用于调整左右两边内容区域的宽度。为了实现这一功能，作者使用了...

			
		

	





	

		

			

				
					
jQuery仿360导航页图标拖动排序效果代码分享

				
			

			

				

					01-19
				

			

		

		

			
				
jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码。本段代码适应于所有网页使用，有兴趣的朋友们可以学习一下。 运行效果图： ———————-查看效果 下载...

			
		

	





	

		

			

				
					
jQuery点击无限弹出层插件可拖动效果.zip

				
			

			

				

					11-06
				

			

		

		

			
				
本文将深入探讨一个基于jQuery实现的点击无限弹出层插件，它具有可拖动的效果，为用户提供了更加灵活的交互体验。  首先，我们要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件...

			
		

	





	

		

			

				
					
【利用jquery，编写拖拽插件】

				
			

			

				

					weixin_42160554的博客
				

				

					09-07
					
					515
					
				

			

		

		

			
				
1.导入一个jquery包并且编写样式：


&lt;script type="text/javascript" src="js/jquery-1.11.0.js" &gt;&lt;/script&gt;
		&lt;style&gt;
			*{margin: 0;}
			#drag{
				width: 100px;
				height: 100px;
				background: r...

			
		

	





	

		

			

				
					
Java 图片转PDF的开源库

				
			

			

				

					小湘西的博客
				

				

					08-17
					
					407
					
				

			

		

		

			
				
Flying Saucer 是一个用于将 XHTML 和 CSS 渲染为 PDF 的库。Apache PDFBox 是一个开源库，用于创建和操作 PDF 文档。如果使用 Maven，可以在。

			
		

	





	

		

			

				
					
后端学习笔记（八）--HTML

					
最新发布

				
			

			

				

					qwsadsdga的博客
				

				

					08-18
					
					845
					
				

			

		

		

			
				
​	*编写网页的一门语言​		*超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容​		*标记语言：由标签构成的语言​		*W3C（万维网联盟）标准：网页主要有三部分组成​			*结构：HTML​			*表现：CSS​			*行为：JavaScript。

			
		

	





	

		

			

				
					
响应式Web设计：纯HTML和CSS的实现技巧

				
			

			

				

					vvvae1234的博客
				

				

					08-18
					
					670
					
				

			

		

		

			
				
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。

			
		

	





	

		

			

				
					
jquery写一个生成九九乘法表的代码

				
			

			

				

					05-24
				

			

		

		

			
				
以下是使用 jQuery 生成九九乘法表的代码：

HTML 代码：

```html
<table id="multiplication-table"></table>
```

jQuery 代码：

```javascript
$(document).ready(function() {
  // 创建表格元素
  var table = $('<table></table>');

  // 创建表头行
  var tableHeaderRow = $('<tr></tr>');
  tableHeaderRow.append($('<th></th>').text(' '));
  for (var i = 1; i <= 9; i++) {
    tableHeaderRow.append($('<th></th>').text(i));
  }
  table.append(tableHeaderRow);

  // 创建表格内容
  for (var i = 1; i <= 9; i++) {
    var tableRow = $('<tr></tr>');
    tableRow.append($('<th></th>').text(i));
    for (var j = 1; j <= 9; j++) {
      tableRow.append($('<td></td>').text(i*j));
    }
    table.append(tableRow);
  }

  // 将表格添加到页面中
  $('#multiplication-table').append(table);
});
```

这段代码首先创建了一个空的表格元素，然后创建了表头行和表格内容，并将它们添加到表格中，最后将整个表格添加到页面中。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值