- 浏览: 1972502 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (509)
- JavaEE (122)
- Oracle数据库 (29)
- JavaScript (37)
- SAP (5)
- MySql数据库 (7)
- JavaSE (4)
- Ajax (1)
- jQuery (13)
- SSH框架 (36)
- Web Service (10)
- JSF框架 (2)
- JBPM (0)
- ireport报表 (2)
- ibatis (5)
- Hibernate (31)
- JSP (11)
- Tomcat 服务器 (20)
- Other (19)
- JavaWeb (4)
- Maven (11)
- OSWorkFlow (10)
- HTML (13)
- Exception汇总 (7)
- SVN (2)
- 笑话 (1)
- JSTL (1)
- WebSphere Message Broker (13)
- ANT命令 (3)
- Liunx (12)
- Struts2 (26)
- Eclipse (6)
- DOS (3)
- Flex (11)
- WebSphere (1)
- 开发常用工具 (3)
- Junit (2)
- EJB (4)
- Struts1.2 (2)
- Jboss (1)
- Android (2)
- Java框架源码解析 (1)
- Spring (4)
- MyBatis (6)
- SpringMVC (4)
- Jetty (2)
- 数据库表设计 (1)
- SSO (4)
最新评论
-
贝塔ZQ:
也可以试试PageOffice插件,觉得更简单点
Jxl操作Excel设置背景、字体颜色、对齐方式、列的宽度 -
jia1208:
...
Could not publish server configuration for Tomcat v6.0 Server at localhost. -
u011274527:
赞
java.io.EOFException java.io.ObjectInputStream$PeekInputStream.readFully 错误 -
旭旭小牛啦:
怎么没哟了,继续赛
jQuery 选择器 -
wzw3919:
100行会报空指针
Java 解压缩zip文件
特强的的拖动分页(JS+CSS)太强了
这个分页确实太强了,佩服啊。 效果图:
非常酷的JS+CSS拖动分页功能,无缝循环分页,拖动鼠标即可完成分页,鼠标向左拖动回到前一页,向右拖动则翻开第二页,还带有动画特效,着实很不错,界面黑色,非主流风格,相信很多人会喜欢的。 代码:
特强的的拖动分页(JS+CSS)太强了2009-08-29 01:36 这个分页确实太强了,佩服啊。 效果图: 非常酷的JS+CSS拖动分页功能,无缝循环分页,拖动鼠标即可完成分页,鼠标向左拖动回到前一页,向右拖动则翻开第二页,还带有动画特效,着实很不错,界面黑色,非主流风格,相信很多人会喜欢的。 代码: <html> <head> <title>拖动分页-by http://www.codefans.net</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; } .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; font-size:14px; text-align:left; border-bottom:1px dashed #999; } a{ text-decoration:none; color:#999; } a:hover{ font-weight:bold; } li span{ float:right; color:#999; } .tip{ display:block; width:100%; font-size:12px; color:#999; text-align:center; margin:10px 0px 20px; } </style> </head> <body onselectstart="return false;"> <script> function id(obj){ return document.getElementById(obj); } var page; var lm,mx; var md=false; var sh=0; var en=false; window.onload=function(){ //http://www.codefans.net page=document.getElementsByTagName("div"); if(page.length>0){ page[0].style.zIndex=2; } for(i=0;i<page.length;i++){ page[i].className="page"; page[i].innerHTML+="<span class=tip>第 "+(i+1)+"/"+page.length+" 页 提示:左右拖拽翻页</span>"; page[i].id="page"+i; page[i].i=i; page[i].onmousedown=function(e){ if(!en){ if(!e){e=e||window.event;} lm=this.offsetLeft; mx=(e.pageX)?e.pageX:e.x; this.style.cursor="w-resize"; md=true; if(document.all){ this.setCapture(); }else{ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } } } page[i].onmousemove=function(e){ if(md){ en=true; if(!e){e=e||window.event;} var ex=(e.pageX)?e.pageX:e.x; this.style.left=ex-(mx-lm)+350; if(this.offsetLeft<75){ var cu=(this.i==0)?page.length-1:this.i-1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } if(this.offsetLeft>75){ //http://www.codefans.net var cu=(this.i==page.length-1)?0:this.i+1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } } } page[i].onmouseup=function(){ this.style.cursor="default"; md=false; if(document.all){ this.releaseCapture(); }else{ window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); } flyout(this); } } } function flyout(obj){ if(obj.offsetLeft<75){ if( (obj.offsetLeft + 350 - 20) > -275 ){ obj.style.left=obj.offsetLeft + 350 - 20; window.setTimeout("flyout(id('"+obj.id+"'));",0); }else{ obj.style.left=-275; obj.style.zIndex=0; flyin(id(obj.id)); } } if(obj.offsetLeft>75){ if( (obj.offsetLeft + 350 + 20) < 1125 ){ obj.style.left=obj.offsetLeft + 350 + 20; window.setTimeout("flyout(id('"+obj.id+"'));",0); }else{ obj.style.left=1125; obj.style.zIndex=0; flyin(id(obj.id)); } } } function flyin(obj){ if(obj.offsetLeft<75){ if( (obj.offsetLeft + 350 + 20) < 425 ){ obj.style.left=obj.offsetLeft + 350 + 20; window.setTimeout("flyin(id('"+obj.id+"'));",0); }else{ obj.style.left=425; en=false; } } if(obj.offsetLeft>75){ if( (obj.offsetLeft + 350 - 20) > 425 ){ obj.style.left=obj.offsetLeft + 350 - 20; window.setTimeout("flyin(id('"+obj.id+"'));",0); }else{ obj.style.left=425; en=false; } } } </script> <div> <ul> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>东方之珠</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>啊!停不住的爱人</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>宁静温泉</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>你的样子</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>恋曲1980</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>源代码下载</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>恋曲2000</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>亚细亚的孤儿</a></li> <li><span>2009-4-29 02:16</span><a href=http://www.codefans.net>CodeFans.net</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>童年</a></li> </ul> </div> <div> <ul> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>暗恋</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>弹唱词</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>飞车</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>东方之珠</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>滚滚红尘</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>光阴的故事</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>之乎者也</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>现象七十二变</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>乡愁四韵</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>穿过你的黑发我的手</a></li> </ul> </div> <div> <ul> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>大兵歌</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>源码爱好者</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>黄色面孔</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>台北红玫瑰</a></li> <li><span>2009-4-29 02:16</span><a href=http://codefans.net>我所不能了解的事</a></li> </ul> </div> </body> </html>
|
发表评论
-
HTML字符实体(Character Entities)和转义字符串(Escape Sequence)
2012-04-13 07:56 1092HTML字符实体(Character En ... -
HTML中的Flie标签禁止修改路径问题。
2011-10-18 17:37 1307之前在项目中遇到一个问题.就是HTML中 File文件控 ... -
给HTML中的table边框设置细边框样式
2011-09-26 16:43 26751给table设置细边框: .table_border{ ... -
HTML 按钮添加mouseOver 和 mouseOut 事件,改变按钮的事件.
2011-09-13 16:24 5273HTML页面加载完的时候, 给按钮为class= ... -
JavaScript 触发click事件 兼容FireFox,IE 和 Chrome
2011-09-09 13:36 1857解决了火狐下无法触发click事件的问题 Ht ... -
改变HTML浏览文件的按钮样式
2011-09-09 11:08 5866思路如下: 看看代码就明白。 其实就是把系统自带 ... -
HTML CSS样式中,自动换行
2011-08-25 19:59 1608在项目实际应用中出现了表格的内容不会换行,本文列举了兼容 IE ... -
javascript 操作两个select,左右选择值。
2011-08-21 18:45 3117下面是我做的一个简单的例子. 就是当 ... -
HTML中小meta的大作用
2011-07-11 22:26 1076meta是用来在HTML文档中模拟HTTP协议的响应头报文。m ... -
table 隔行变色,并且鼠标经过时变色.
2011-04-14 00:05 2922HTML样式: table 隔行变色,并且鼠标经过时变 ... -
HTML 标签 和 JQuery在线学习网址
2011-04-13 18:44 955http://www.w3school.com.cn/tags ... -
HTML <map> 标签的使用
2011-04-13 18:40 1089HTML <map> 标签 定义和用法 ...
相关推荐
非常酷的拖动分页(JS+CSS).rar非常酷的拖动分页(JS+CSS).rar非常酷的拖动分页(JS+CSS).rar非常酷的拖动分页(JS+CSS).rar非常酷的拖动分页(JS+CSS).rar
一个非常酷的拖动分页(JS+CSS)。可以说是完全兼容主流浏览器,效果很强大...
打开关闭层并支持层拖动的JS+CSS特效。
现在电脑的屏幕越来越大,为了...要在网页上实现这种UI界面,也有不少现成的组件,比如jQuery中提供的Splitter.js,不过自已用HTML+JavaScript+CSS来DIY一下,从而加深对HTML+JavaScript+CSS的了解,也是不错的选择。
Div+CSS层完美实现拖拽特效 Div+CSS 层拖拽 移动层 Div拖动特效 可应用于弹出层拖拽
实用可拖动的日历js+css代码(选择日期用的) 非常精美 骗你,你骂我,是用来做选择日期用的,比如搜索某一个时间段的时间选择。
图文轮播(js+css+html) 左右滚动的代码内容层中可以填写任何内容
<script type="text/javascript" src="SwooleUI.js"> <script type="text/javascript" src="Calendar.js"> <script type="text/javascript"> var baidu = new swoole.Dialog('百度一下,你就知道','...
实现DIV+CSS拖拽功能
js+css_当聚焦文本框时显示可日历,日历随便拖动
主要介绍了JS+CSS实现的拖动分页效果,可实现鼠标拖动页面翻转到上一页或下一页的功能,涉及javascript操作页面元素与css样式的相关技巧,需要的朋友可以参考下
许愿墙,可拖拽,可隐藏,操作方便,适合新手使用和模仿,纯js+css效果
JS+CSS3实现可拖动立方体特效.zip
div+css设计的弹出层,实现弹出层随鼠标的点击拖拽,可以在窗体内随意移动。
这是一款js+css3绘制的彩色圆点冒泡背景动画特效,随机生成各种颜色的圆形变大消失动画效果,可以拖动滑杆调整圆点的数量。
JS+CSS结合的多个随鼠标滚动的浮动层代码,浮动层上端和下端固定,中间位置随之拖动
很不错的JS+CSS层拖动类实例,可以关闭窗口,鼠标可以拖动窗口到任意位置。分别有三个实例:一个是图片窗口,一个是文字,还有一个图文混合。
这是一款js+css3实现的温度计设置交互动画效果,左右拖动滑块控制温度计的摄氏度数。
HTML5+CSS3移动商城-分类
JS+CSS+html做的照片墙,可以自由拖动照片位置,点击照片弹出层放大