拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{ height:320px; list-style:none; margin:40px 50px 0px; padding:0px; } li{ width:100%; height:30px; line-height:30px; fo...
找了一些现成的插件，发现都不太符合我的需求，于是参考网上的例子自己实现了一个，还没有优化。还是贴代码吧： dragtoreplace DragToReplaceDeom #displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:left;width:90px;clear:none;top:0;/**//*background:#DFEFFC;*/} .row span{display:inline-block;width...
效果图 调用示意图 交互示意图 如上图所示，这基本是JQueryDialog的完整逻辑流程了。 1、用户点击模态窗口的“提交”按钮时，调用JQueryDialog.Ok()函数，这个函数对应了用户提交事件。 2、用OO的概念来说，JQueryDialog.Ok()其实是一个虚函数，它的逻辑封装在子窗口ContentWindow.Ok()中，这一点我借鉴了FCKEditor，如下代码所示： JS代码 代码如下: var JQueryDialog = { /// 提交 /// Ok:function(){ var frm = $("#jd_iframe...
当示例的box上的#链接处于活动状态的时候（不论是用tab然后点击enter或者使用鼠标点击）这个元素就能够通过方向键拖拽。然后点击enter或者Esc释放。（可以随意改变这些键。我不确定释放键应该设置成为什么所以enter和Esc都可以）使用 1、复制文章后面的dragDrop对象。 2、复制我的addEventSimple和removeEventSimple函数，这里需要。 3、设定keyHTML和keySpeed属性（下面有解释）。 4、确定你所要拖拽的元素都有位置属性：absolute...
Table Test (I.E. Only) /*得到表格列*/ function getCols(srcCellIndex,obj) { obj = typeof obj === 'string' ? document.getElementById(obj) : obj; var s = ''; s += '' s += obj.rows[0].cells[srcCellIndex].innerHTML + ''; for(var i = 1;i ' + obj.rows[i].cells[srcCellIndex].innerHTML + ''; } return s; } /*得到表格*/ function getTable(obj) { while(obj.tagName.toLowerCase() != 'table') { obj =...
拖拽翻页效果JavaScript特效-demo by http://www.gxlcms.com html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:400px; left:350px; top:50px; background:#FFF; border:1px solid #999; } ul{ list-style:none; height:320px; margin:20px; padding:0px; back...
所以要引入JQUERY框架。 把我的这个控件代码放到一个js文件里面直接引入就可以了 控件代码 代码如下: $.fn.myDrag = function() { var self = $(this); self.css("position", "absolute"); var p = self.position(); self.css({ left: p.left, top: p.top }); self.mousedown( function(event) { // debugger; self.data("ifDary", "true"); //保存状态，表示是否可以拖拽 // debugger; var selfLeft = event.pageX - parseInt(se...
runcode /** *取得元素的真实css属性 *@param {Object} d 元素 *@param {String} a 元素的css属性名 *@version 0.2 */ function gs(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] }else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; } /** * 取得鼠标坐标 * @return Position */ function getMouseLocation(e){ if(!document.all){ mouseX = e.pageX; mouse...
脚本之家之前发布过这样的代码，其实问题不大，但这里的版本主要是增加一些功能，回调执行服务器端的方法，对于asp.net开发或ajax开发都是非常有价值的改进。先看下效果图：原有百度的Popup.js在有 代码如下: 声明的网页下存在兼容性问题，即在IE6,7,8下，遮罩层是可以全屏，但在Firefox和Chrome下无法全屏遮罩。 造成遮罩层在FF和Chrome下无法全屏的问题在267行： 代码如下:var C = <div id="dialogBoxBG" style="position...
Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ overflow:hidden} #tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; } #tab td.tc{text-align:center;} .cc{width:1...
本文实例讲述了jquery实现可旋转可拖拽的文字效果代码。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下：testfunction scaleXBlock(blocker, scaleX){blocker.css({"-moz-transform": 'scaleX(' + scaleX + ')' ,"-webkit-transform": 'scaleX(' + scaleX + ')' ,"-o-transform": 'scaleX(' + scaleX + ')',"-ms-transform": 'scaleX(' + scaleX + ')',"transform": 'scaleX(' + scaleX + ')'});}function getP...
本文实例为大家讲解了JS实现拖拽图片效果的详细代码，分享给大家供大家参考，具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别：用html5的drag来实现拖拽有兼容性问题，使用拖拽插件代码又很多，而这个拖拽demo代码少，并且兼容所有浏览器，很值得在项目中使用， css样式如下：#div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: absolute; cursor: pointer; -webkit-box-shadow...
本文实例讲述了jquery拖拽排序简单实现方法。分享给大家供大家参考，具体如下： 运行效果截图如下：原来没有新建动作，分析代码后发现很容易增强~~ 代码如下：测试的拖拽功能body, div { margin: 0; paading: 0; font-size: 12px; } body { width:100%; margin: 0 auto; } ul, li { margin: 0; padding: 0; list-style: none; } .clear { clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px; } .drag_module...
我就把我学习Createjs的一些心得体会向大家分享下： 一.什么是CreateJS?createjs是一个轻量级的javascript库，是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，利用createjs可以构建出许多有趣的动画游戏。例如围住神经猫，看你有多色等Html5游戏。 二.CreateJS有哪几款工具？ createjs里面共有四大引擎: EaselJS:主要用于动画、向量及位图的绘制。提供支持移动设备触控的一系列方法(click、mousedown、pressup、pressmove分...
使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件。效果图如下：效果演示 源码下载 html代码：水平拖拽1 2 3 4 5$(function(){ $('.demo').dad(); });body { margin: 0; border-left: 200px solid #ccc;} h1 { width: 1000px; margin: 40px auto; font: 32px "Microsoft Yahei";} .demo { width: 1000px; margin: 0 auto;} .menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200p...