ajax 浮动层实现实例

最新推荐文章于 2020-11-24 10:14:02 发布
最新推荐文章于 2020-11-24 10:14:02 发布
阅读量94 收藏
点赞数
分类专栏： js/ajax/jdom/extjs/jquery 文章标签： Ajax C C++ C# JavaScript ViewUI

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>zhou's html</title>
 </head>
 <body>
  一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的
  
  <div id="test1"
   style='border:1px dashed;left:700px;top:320px;width:250px;height:200px;background-color:#F9F7ED;position:relative;text-align:left'>
   <span>&nbsp&nbsp构件库</span>
   <br />
   <a style="text-decoration:none;" href="http://www.hao123.com">&nbsp&nbsp rss</a>
  </div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <script type="text/javascript" charset="utf-8">
var $=function(id){return document.getElementById(id)};
Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
function divDrag(){
                var A,B;
        var zIndex=1;
        this.dragStart=function(e){
                e=e||window.event;
                if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return;
                var pos=this.$pos;
                                if(document.defaultView){
                                        _top=document.defaultView.getComputedStyle(this,null).getPropertyValue("top");
                                        _left=document.defaultView.getComputedStyle(this,null).getPropertyValue("left");}
                                else{
                                        if(this.currentStyle){_top=this.currentStyle["top"];_left=this.currentStyle["left"];}
                                }
                pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
                pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);
                                if(!!A){
                                         if(document.removeEventListener){
                        document.removeEventListener("mousemove",A,false);
                        document.removeEventListener("mouseup",B,false);
                                        }else{
                        document.detachEvent("onmousemove",A);
                        document.detachEvent("onmouseup",B);
                                                document.detachEvent("ondragstart",G);
                        }
                                }
                                A=this.dragMove.create(this);
                B=this.dragEnd.create(this);
                if(document.addEventListener){
                                        document.addEventListener("mousemove",A,false);
                    document.addEventListener("mouseup",B,false);
                }else{
                                        document.attachEvent("onmousemove",A);
                    document.attachEvent("onmouseup",B);
                                                G=function(){return false};
                                                document.attachEvent("ondragstart",G);
                }
                this.style.zIndex=(++zIndex);
                this.stop(e);
        }
        this.dragMove=function(e){
                                e=e||window.event;
                                var pos=this.$pos;
                this.style.top=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';
                this.style.left=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';
                                this.stop(e);}
        this.dragEnd=function(e){
                var pos=this.$pos;             
                e=e||window.event;
                               
                                if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return;
                if(document.removeEventListener){
                        document.removeEventListener("mousemove",A,false);
                        document.removeEventListener("mouseup",B,false);
                                }else{
                        document.detachEvent("onmousemove",A);
                        document.detachEvent("onmouseup",B);
                                                document.detachEvent("ondragstart",G);
                }
                                A=null;
                                B=null;
                this.style.zIndex=(++zIndex);
                this.stop(e);
        }
        this.position=function (e){
                var t=e.offsetTop;
                var l=e.offsetLeft;
                while(e=e.offsetParent){
                                t+=e.offsetTop;
                                l+=e.offsetLeft;
                }
                return {x:l,y:t,ox:0,oy:0}
        }
        this.stop=function(e){
                if(e.stopPropagation){
                        e.stopPropagation();
                }else{
                        e.cancelBubble=true;}
                       
                if(e.preventDefault){
                        e.preventDefault();}
                else{e.returnValue=false;}
        }
                this.stop1=function(e){
                        e=e||window.event;
                if(e.stopPropagation){
                        e.stopPropagation();
                }else{
                        e.cancelBubble=true;}         }
        this.create=function(bind){
                var B=this;
                var A=bind;
                return function(e){
                        return B.apply(A,[e]);
                }
        }
        this.dragStart.create=this.create;
        this.dragMove.create=this.create;
        this.dragEnd.create=this.create;
       
        this.initialize=function(){
                for(var A=0,B=arguments.length;A<B;A++){
                        C=arguments[A];
                        C=(typeof(C)=='object')?C:(typeof(C)=='string'?$(C):null);
                        if(!C)continue;
                        C.$pos=this.position(C);
                        C.dragMove=this.dragMove;
                        C.dragEnd=this.dragEnd;
                        C.position=this.position;
                        C.stop=this.stop;
                                                var $A=[];
                                                $A=$A.extend(C.getElementsByTagName('span')||[]).extend(C.getElementsByTagName('input')||[]);
                                                for(var D=0,E=$A.length;D<E;D++){
                                                        if(C.addEventListener){
                                $A[D].addEventListener("mousedown",this.stop1,false);
                                                                $A[D].addEventListener("mousemove",this.stop1,false);
                                        }else{
                                $A[D].attachEvent("onmousedown",this.stop1);
                                                                $A[D].attachEvent("onmousemove",this.stop1);
                                }
                                                }
                        if(C.addEventListener){
                                C.addEventListener("mousedown",this.dragStart.create(C),false);
                        }else{
                                C.attachEvent("onmousedown",this.dragStart.create(C));
                        }
                }         }
        this.initialize.apply(this,arguments);
       
}
//生成拖动层很简单
new divDrag($('test1'));
</script>
 </body>
</html>

shwhj521314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery的Js浮动层插件用法实例
05-12
摘要:脚本资源,jQuery,弹出层,Js浮动层　基于jQuery的JavaScript浮动层用法实例，实例中演示弹出了宽度为700PX/350PX/500PX的浮动窗口，有了实例，大家用起来就得心应手了，代码中的jQuery，引自google官方的托管库...
js常用功能-浮动层知识总结
lgx2351
02-06 265
应用开发时很经常地要生成浮动层，在 浮动层 里显示一些我们需要显示的内容。 生成浮动层主要分为两个部份。一个是外围的div，这个div主要是根据传入的参数值来设置它的属性，如它的left、top、width、height、opacity等值。另一个部份是div里放的一table，这个table有两行，第一行用在拖动和最大化最小化上；第二行是放置浮动层要显示的内容。   functio...
asp.net 网页做一个浮动层_浮动属性
weixin_39531178的博客
11-24 458
普通流（normal flow）说明前面我们提过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？ CSS的定位机制有3种：普通流（标准流）、浮动和定位。普通流又称为“文档流”，或者“标准流”，实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种默认的排列方式，不会出现例外的情况的布局叫做普通流布...
实现简单浮动层的基本方法
hui_CNOOC的专栏
06-03 5094
 在web2.0之前，还不知道什么是ajax，也不喜欢div+css的布局方式，那时候网页布局就是一个个的大大小小的table嵌套起来，只要对属性设置合理，页面样式就中规中矩稳如泰山。不过这种布局对窗口尺寸的适应能力极弱，所以不得不每次考虑这次的网站做成1003还是780，而信息的呈现方式也极其死板，比如说在一个类似于list的信息汇总页面，如果用户想了解某一个item
体验css+div 之 实现简单浮动层的基本方法
笨鸟快飞的专栏
06-07 2531
不过这种布局对窗口尺寸的适应能力极弱，所以不得不每次考虑这次的网站做成1003还是780，而信息的呈现方式也极其死板，比如说在一个类似于list的信息汇总页面，如果用户想了解某一个item的详情，一般必须点击进入，造成一次页面刷新和等待。而现在的流行做法改变了，ajax使用户体验得到极大改善，现在面临上述的类似情形，完全可以采用另一种更加灵活的方式：生成呈现item详细内容甚至相关表单的浮动层，就
总结如何实现浮动层，主要是dialog的使用。
ooo4561213的专栏
08-03 7052
自定义一个类继承自Dialog类，然后在构造方法中，定义这个dialog的布局和一些初始化信息。 public class MenuDialog extends Dialog { public MenuDialog(Context context, boolean can
一个Ajax弹出层实例，使元素fixed定位
05-12
本文将深入探讨一个使用Ajax和JavaScript实现的弹出层实例，特别是如何利用CSS固定定位（fixed positioning）来创建浮动效果。 首先，让我们理解Ajax的核心概念。Ajax允许在不重新加载整个网页的情况下，与服务器...
jQuery+CSS图片浮动层效果.zip_jQuery+CSS图片浮动层效果
09-21
这个“jQuery+CSS图片浮动层效果”压缩包包含了一个利用jQuery库和CSS样式实现的此类功能的实例。以下是关于这个主题的详细解释。 首先，jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件...
仿Vista风格的JS Ajax浮动窗口特效.rar
07-10
一个仿Vista风格的JS Ajax浮动窗口特效，也就是大家常见的网页弹出层，可在这个窗口中打个网址，其实本浮动层代码实现了用JS模拟Win界面窗口的效果，窗口下边还有类似于最小化后的效果，这个拖动可随意拖动位置，可...
超多的Ajax浮动提示特效 圆角 渐变 可关闭.rar
07-10
超多的jQuery Ajax浮动提示特效,这些浮动提示效果有圆角样式,有渐变动画,还可关闭,带有阴影,有些是有动画效果的,如示例截图所示,很多种风格样式,十分漂亮,通过本示例,你可以学会这些浮动提示层的用法.
js 可拖动的层（DIV）
05-18
javascript 实现可拖动的层（DIV），支持兼容性
浮层（AJAX)（弹出层，并半透明）
06-29
浮层（AJAX)（弹出层，并半透明） 浮层（AJAX)（弹出层，并半透明） 浮层（AJAX)（弹出层，并半透明）
使用浮动透明层来提示信息
05-26
使用浮动透明层来提示数据,很漂亮的显示方式
漂亮的div浮动层
03-07
漂亮的div浮动层
jQuery浮动层 jQuery实现div跟着鼠标走
08-03
用jQuery实现div跟着鼠标走 鼠标移动时，层也跟着鼠标的移动而移动
position属性的详情
caa112的博客
10-04 232
position属性值的区别
可拖动DIV层的实现方法
热门推荐
2byte
06-15 1万+
可拖动DIV层的实现方法这几天做了一个英文单词搜索的谷歌扩展，其中的划词搜索功能会产生一个可托拖动的DIV层来作为结果显示，为了做一个较为完善的拖动层，花费了很长时间进行设计与调试。在此把心得总结了一下，讲讲实现方法与关键点。先来看看效果：在线实例DEMO基本思路 有一个DIV层，设定position属性为absolute或fixed，通过更改其left，top来更改层的相对位置。 在DIV层上绑定
浮动层设置的简单方法
A873054267的博客
10-14 460
做地图时会遇到浮在地图上的搜索框。如高德地图搜索框类似的效果。起初用fixed的定位，一直要动态控制其宽度，很麻烦。 偶然发现，当元素设置了定位方式，但不给top等定位值时，其会脱离文档流，但其位置不会发生改变，相对的元素也会是父元素。 .search{ position: absolute; width: 100%; z-index: 100; background:rgb...
js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
10-27
一个完美的JS拖拽功能，实现层在网页上任意拖动，还可回放拖动规迹，而且在拖动时显示拖动距离参数等相关属性。经本人测试兼容性也是相当不错的代码，学习JavaScript的朋友，可以拿来研究研究，您可不要错过哦
django+ajax实现进度条的实例
最新发布
06-08
要在Django中实现进度条，可以使用Django框架提供的HttpResponse对象和Ajax技术。 首先，在views.py中编写一个函数，用于处理上传文件的请求。该函数可以使用Python的os模块来执行上传文件的操作，并在上传过程中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值