- 浏览: 842782 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (530)
- Java编程 (64)
- C/C++/D (6)
- .Net/C# (9)
- Ruby (12)
- JavaScript (77)
- XML (1)
- JSON (1)
- Ajax (17)
- ExtJs (81)
- YUI (1)
- JQuery (7)
- DWR (1)
- HTML (7)
- CSS (7)
- Database (6)
- PowerDesigner (23)
- DB2 (2)
- Oracle (57)
- MS SQL Server (8)
- MySQL (6)
- JSP/Servlet/JSTL/TagLib (3)
- Spring (1)
- Hibernate (0)
- iText (0)
- Struts (0)
- Struts2 (0)
- iReport (0)
- FreeMarker (0)
- HttpClient (1)
- POI (6)
- FckEditor (15)
- Eclipse / MyEclipse (10)
- IntelliJ IDEA (0)
- NetBeans (0)
- Tomcat (11)
- WebLogic (1)
- Jboss (3)
- jetty (4)
- IIS (2)
- CVS/VSS (1)
- FTP (1)
- Windows/DOS (6)
- Linux/Unix (0)
- 软件建模 UML (0)
- Design Pattern & Thinking In Programming (10)
- 数据结构与算法 (12)
- 软件项目管理 (9)
- 行业应用解决方案 (3)
- 电脑软件与故障解决 (13)
- 编程语言 (1)
- 十万个为什么 (3)
- JBPM (2)
- sysbase (2)
- JDBC (8)
- Ant (2)
- Case-计算机辅助软件工程 (1)
- WebService (4)
- 浏览器 (1)
最新评论
-
gaoqiangjava:
同一楼,还请大手帮解决
JAVA读取word文件 -
hyl523:
// 判断数组中的第一个值是否未定义,如果未定义,便定义为空对 ...
javascript面向对象之二 命名空间 -
ping12132200:
ping12132200 写道我抱着个错不是因为:body标签 ...
extjs在IE报对象不支持此属性或方法 -
ping12132200:
我抱着个错不是因为:body标签内的第一个元素不能为文本tex ...
extjs在IE报对象不支持此属性或方法 -
fireinjava:
呀,不错,转走了,谢谢啦~
利用OpenOffice将word转换成PDF
<style> .dragTable { border-top: 1px solid #3366cc; margin-bottom: 10px; width: 100%; background-color: #FFFFFF; } td { vertical-align: top; } .dragTR { cursor: move; color: #7787cc; text-decoration: underline; background-color: #e5eef9; padding: 10px 0 10px 5px; font-weight: bold; } #parentTable { border-collapse: collapse; letter-spacing: 25px; } </style> <script defer language="jscript"> var Drag={dragged:false, ao:null, tdiv:null, dragStart:function(){ Drag.ao=event.srcElement; if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){ Drag.ao=Drag.ao.offsetParent; Drag.ao.style.zIndex=100; }else return; Drag.dragged=true; Drag.tdiv=document.createElement("div"); Drag.tdiv.innerHTML=Drag.ao.outerHTML; Drag.ao.style.border="1px dashed red"; Drag.tdiv.style.display="block"; Drag.tdiv.style.position="absolute"; Drag.tdiv.style.filter="alpha(opacity=70)"; Drag.tdiv.style.cursor="move"; Drag.tdiv.style.border="1px solid #000000"; Drag.tdiv.style.width=Drag.ao.offsetWidth; Drag.tdiv.style.height=Drag.ao.offsetHeight; Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top; Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left; document.body.appendChild(Drag.tdiv); Drag.lastX=event.clientX; Drag.lastY=event.clientY; Drag.lastLeft=Drag.tdiv.style.left; Drag.lastTop=Drag.tdiv.style.top; }, draging:function(){//重要:判断MOUSE的位置 if(!Drag.dragged||Drag.ao==null)return; var tX=event.clientX; var tY=event.clientY; Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX; Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY; for(var i=0;i<parentTable.cells.length;i++){ var parentCell=Drag.getInfo(parentTable.cells[i]); if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ var subTables=parentTable.cells[i].getElementsByTagName("table"); if(subTables.length==0){ if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ parentTable.cells[i].appendChild(Drag.ao); } break; } for(var j=0;j<subTables.length;j++){ var subTable=Drag.getInfo(subTables[j]); if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){ parentTable.cells[i].insertBefore(Drag.ao,subTables[j]); break; }else{ parentTable.cells[i].appendChild(Drag.ao); } } } } } , dragEnd:function(){ if(!Drag.dragged)return; Drag.dragged=false; Drag.mm=Drag.repos(150,15); Drag.ao.style.borderWidth="0px"; Drag.ao.style.borderTop="1px solid #3366cc"; Drag.tdiv.style.borderWidth="0px"; Drag.ao.style.zIndex=1; }, getInfo:function(o){//取得坐标 var to=new Object(); to.left=to.right=to.top=to.bottom=0; var twidth=o.offsetWidth; var theight=o.offsetHeight; while(o!=document.body){ to.left+=o.offsetLeft; to.top+=o.offsetTop; o=o.offsetParent; } to.right=to.left+twidth; to.bottom=to.top+theight; return to; }, repos:function(aa,ab){ var f=Drag.tdiv.filters.alpha.opacity; var tl=parseInt(Drag.getInfo(Drag.tdiv).left); var tt=parseInt(Drag.getInfo(Drag.tdiv).top); var kl=(tl-Drag.getInfo(Drag.ao).left)/ab; var kt=(tt-Drag.getInfo(Drag.ao).top)/ab; var kf=f/ab; return setInterval(function(){if(ab<1){ clearInterval(Drag.mm); Drag.tdiv.removeNode(true); Drag.ao=null; return; } ab--; tl-=kl; tt-=kt; f-=kf; Drag.tdiv.style.left=parseInt(tl)+"px"; Drag.tdiv.style.top=parseInt(tt)+"px"; Drag.tdiv.filters.alpha.opacity=f; } ,aa/ab) }, inint:function(){//初始化 for(var i=0;i<parentTable.cells.length;i++){ var subTables=parentTable.cells[i].getElementsByTagName("table"); for(var j=0;j<subTables.length;j++){ if(subTables[j].className!="dragTable")break; subTables[j].rows[0].className="dragTR"; subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart); } } document.onmousemove=Drag.draging; document.onmouseup=Drag.dragEnd; } //end of Object Drag } Drag.inint(); function _show(str){ var w=window.open('',''); var d=w.document; d.open(); str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2"); str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />"); str=str.replace(/\r/g,"<br />\n"); d.write(str); } function getBodyContent(){ alert(document.getElementById("contentBody").innerHTML); } </script>
HTML代码
<div id ="contentBody"> <table border="0" cellpadding="0" cellspacing="10" width="100%" id="parentTable"> <colgroup> <col width="50%"/> <col width="25%"/> <col width="25%"/> </colgroup> <tr> <td colspan="3"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td><b>这里可以做表头</b></td> </tr> <tr> <td>放上一张图片</td> <tr> </table> </td> </tr> <tr> <td> <table border=0 class="dragTable" cellspacing="0"> <tr> <td><b>第一个栏目块标题</b></td> </tr> <tr> <td>我什么也没看见</td> <tr> </table> </td> <td> <table border=0 class="dragTable" cellspacing="0"> <tr> <td><b>这里是第二个栏目块标题</b></td> </tr> <tr> <td>我什么也没看见</td> <tr> </table> </td> <td> <table border=0 class="dragTable" cellspacing="0"> <tr> <td><b>不用问第三个标题</b></td> </tr> <tr> <td>我什么也没看见</td> <tr> </table> </td> </tr> </table> </div> <input type="button" value="显示代码" onclick="javascript:getBodyContent()">
发表评论
-
javascript面向对象之一 类
2011-06-06 16:46 995javascript中的类多数是用 ... -
javascript面向对象之二 命名空间
2011-06-06 16:24 1229javascript中本没有命名空间的概念,但是要体现面向对象 ... -
网页特效代码
2011-06-01 16:38 10791. Flip! 一个 jQuery 插件 http://l ... -
js 操作select 大全
2010-11-04 13:49 7371判断select选项中 是否存在Value="pa ... -
Dialog 超酷js弹出层 完美兼容所有浏览器 华丽呈现超强功能
2010-11-03 13:05 1366http://www.iteye.com/topic/4800 ... -
IE6对display:table-row不支持
2010-11-02 19:34 1593http://topic.csdn.net/u/2010070 ... -
javascript中字符串转化为json对象
2010-07-30 09:11 1220http://www.json.org/js.html To ... -
IE6的base标签导致页面结构大混乱
2010-07-20 16:27 1070这是一个非常隐秘也是非常强大的bug,我真不知微软的IE开发人 ... -
汇总让IE6崩溃的几种方法
2010-07-20 16:25 1137经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章,数字 ... -
JS添加事件处理函数
2010-07-08 23:41 1088作为一种事件驱动的编 ... -
js压缩工具
2010-07-04 23:50 1799javascriptcompressor.com ( ... -
Javascript 中 ShowModalDialog 的使用方法
2010-06-21 16:13 1424ShowModalDialog函数的功能 ... -
xtree的基本应用---入门级
2010-06-21 16:08 1229由于公司要求做一棵关于公司员工选择的JS控件树,以前我们一直使 ... -
javascript实现上传图片前的预览效果
2010-06-16 20:35 1395<script>function yulan(){ ... -
重写window.confirm函数
2010-06-12 11:06 2352重写window.confirm函数为了让它能够默认选择取消按 ... -
改善window的alert提示信息框样式
2010-06-12 11:05 1453<input type="button&quo ... -
jsgraphics图形库
2010-05-10 22:58 1625http://www.walterzorn.com/jsgra ... -
JavaScript图形库jsGraphics
2010-05-10 22:57 2479JavaScript图形库Raphaël < JavaS ... -
千一JS控件
2010-05-10 22:31 860千一JS控件--滑块条 千一JS控件--进度条 千一JS控 ... -
JavaScript 生成曲线图
2010-05-10 22:28 1252引用方法 new gov.Graphic(par1,par2 ...
相关推荐
通过动态改变`scale`,我们可以实现平滑的缩放效果。同时,为了保持元素内部内容的清晰,可以使用CSS3的`transform-origin`属性来设定缩放的中心点。 3. **移动(Move)**:在元素已经可拖动的情况下,移动功能实际...
此“可拖拽的html5人物关系图代码”项目旨在实现一种交互式的、用户可以自由调整的人物关系展示方式,这对于数据可视化和信息管理非常有用。在这个项目中,我们将深入探讨HTML5的核心特性,特别是与图形和交互性相关...
在您提到的资源中,“一个觉得不错的图片拖拽网页特效”很可能是一个实现图片拖放功能的示例代码或库,可能是为了帮助开发者创建更生动、互动的网页。 拖拽功能的实现涉及到HTML、CSS和JavaScript的综合运用。HTML...
这个"HTML5+WebGL实现可拖拽的3D透明杯子效果源码.zip"文件,显然包含了一个使用这两种技术制作的互动3D模型示例,特别是一个可以被用户拖动的透明3D杯子。 首先,我们需要了解HTML5中的拖放(Drag and Drop)API。...
"HTML5带左右箭头可拖动幻灯片代码"是一个利用HTML5、CSS3以及JavaScript(通常通过jQuery库)构建的网页组件,用于实现一个功能丰富的幻灯片展示效果。这个组件包含左右箭头,用户可以通过点击这些箭头来切换幻灯片...
在这个“HTML5鼠标拖拽填充网页小游戏”中,利用HTML5的核心特性,我们可以实现一个趣味盎然的用户交互体验。 首先,HTML5中的`<draggable>`属性是实现鼠标拖拽的关键。这个属性可以添加到任何HTML元素上,如图片或...
在这个"可移动的网页布局"项目中,我们关注的是如何实现网页模块之间的自由拖动功能,让用户可以根据自己的喜好调整页面元素的位置,从而提供更加个性化的浏览体验。 在网页设计中,布局通常分为固定布局、流式布局...
CSS3的`position: fixed`属性可以实现这一效果,让播放器在滚动页面时始终保持在视口的底部。同时,可能还利用了CSS3的过渡效果和动画,为播放和暂停按钮添加动态效果,提升视觉吸引力。 压缩包中的"说明.htm"可能...
在这个“HTML5可拖拽切换全屏幻灯片代码”项目中,我们看到了HTML5技术在创建现代网页体验上的应用,特别是通过拖拽操作实现全屏幻灯片的平滑切换。 首先,我们要理解HTML5中的拖放(Drag and Drop)功能。这个特性...
在本项目中,"jQuery实现图片上传拖拽排序代码.zip" 是一个包含使用jQuery库来实现图片上传和拖拽排序功能的源代码压缩包。这个功能常见于许多现代网页应用,尤其是那些需要用户自定义顺序或者展示内容的应用,如...
HTML5的鼠标拖拽填充游戏代码是一个利用现代Web技术实现的互动游戏,它结合了HTML、CSS和JavaScript(特别是jQuery库)来创建一个引人入胜的用户体验。在这个压缩包中,`jiaoben7046`可能是源代码文件或者一个示例...
jQuery的核心特性可以使得网页动态化和交互变得简单。本项目以"基于jquery+canvas实现的拖动插件"为主题,利用jQuery与HTML5的Canvas API,创建了一个允许用户点击并拖动图形的功能。 Canvas是HTML5引入的一个强大...
2. **滑动轮播**:JavaScript可以实现图片的自动滑动,通常使用定时器控制轮播速度,配合CSS实现过渡动画,使得图片在切换时平滑过渡。jQuery库中的`.carousel()`函数是一个常见的实现方法。 3. **灯箱效果**:当...
HTML5全屏横向时间轴滑块是一种常见的网页设计元素,常用于展示项目进度、历史事件或故事线。这种设计能够以直观、动态的方式呈现信息,提高用户体验。在本主题中,我们将深入探讨如何利用HTML5的特性来创建这样一个...
在本资源"JS鼠标拖动翻页切换代码.zip"中,包含的是一种实现网页内容翻页功能的技术,它允许用户通过鼠标拖动来浏览页面,提高了交互性和用户体验。这种技术尤其适用于数据展示密集型的应用,如表格、报告或者长列表...
【描述】中的“网页版天天消消乐”是一款流行的游戏,通过HTML5实现后,可以在不同的浏览器上运行,无需额外插件,用户只需打开网页就能进行游戏,提高了用户体验和游戏的普及性。 【标签】"html5 html 前端"代表了...
左右拖拽翻页是一种独特的网页或应用界面设计技术,它为用户提供了一种新颖的浏览方式,使得用户可以通过在页面左右两侧拖动来实现前后翻页。这种交互方式常见于一些移动设备的应用,如电子阅读器、图片浏览器或者...
通过研究这个源代码,你可以学习到如何创建一个基本的导航网站,理解网页设计的基本原理,为今后的网页开发打下坚实的基础。同时,它也是一个很好的实践平台,可以动手修改内容,根据自己的需求定制个性化导航网站。
网页拖拽效果是一种常见的交互设计技术,它使得用户可以通过鼠标或其他输入设备,将网页上的元素在页面上自由移动,类似于Google iGoogle个性化主页中的小工具布局功能。这种效果提升了用户体验,让用户可以按照自己...
1. **Dreamweaver简介**:Adobe Dreamweaver是一款强大的集成开发环境(IDE),专为构建高质量的网页和Web应用程序而设计。它提供了可视化的编辑界面,允许用户通过拖放功能来布局页面,同时支持HTML、CSS和...