- 浏览: 2273967 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (357)
- J2EE (49)
- JavaScript (40)
- Spring (19)
- Struts (5)
- CSS (8)
- Hibernate (16)
- Java (67)
- DWR (4)
- JSON (3)
- XFIRE (1)
- Tomcat (1)
- Ant (2)
- 设计模式 (2)
- 经典收藏 (2)
- JSP (10)
- Linux (0)
- WebLogic (11)
- myeclipse (13)
- Buffalo (4)
- 文件上传相关 (1)
- oracle (33)
- html (6)
- JSTL (3)
- SVN (2)
- GIT (1)
- 孙卫琴(Java网络编程精解) (1)
- DOM4J (2)
- Swing (1)
- AJAX (1)
- Eclipse (5)
- 日志组件 (3)
- PowerDesigner (1)
- Jquery (22)
- IT技术开发相关网址 (1)
- Nutz (1)
- 其它 (1)
- Velocity (3)
- WebService (1)
- MySql (2)
- Android (1)
- Maven (2)
- Quartz (11)
- Lucene (1)
- springsource (1)
- Junit (1)
- Activiti (0)
最新评论
-
yzlseu:
拼凑,没有营养
Activiti进阶—分配组任务 -
zhangsenhao:
非常赞!代码很清楚
SpringMVC3.0+MyIbatis3.0(分页示例) -
xiamw2000:
分页写得不对,应该是 : order by ${orderNa ...
SpringMVC3.0+MyIbatis3.0(分页示例) -
sheertewtw:
...
SpringMVC:上传与下载 -
kingtoon:
...
XSS之xssprotect
参考资料
从零开始学习jQuery (7) jQuery动画-让页面动起来!
http://www.cnblogs.com/tinawan/archive/2010/11/12/1875743.html
全文代码如下:
从零开始学习jQuery (7) jQuery动画-让页面动起来!
http://www.cnblogs.com/tinawan/archive/2010/11/12/1875743.html
全文代码如下:
<%@ page language="java" pageEncoding="UTF-8"%> <!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>jQuery效果</title> <style type="text/css"> .panel { margin-left:25%; margin-top:5%; padding: 60px; background-color: #546456; color: #FFFFFF; font-size:30px; font-weight: bold; width: 600px; text-align:center; } input{ margin-left:25%; margin-top:10px; } </style> <script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript" > $(function(){ $("input:button").eq(0).bind("click",function(){ //加上div提高访问速度 /** *匹配的元素将被立即隐藏,没有动画。这大致相当于调用.css('display', 'none'),但display属性值保存在jQuery的数据缓存中, *所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline,然后是隐藏和显示,这个元素将再次显示inline. */ $("div.panel").hide(); }).end()//返回所有按钮 .eq(1).click(function(){//绑定第一个按钮事件 //匹配的元素将被立即显示,没有动画。这大致相当于调用.css('display', 'block') $("div.panel").show(); }).end().eq(2).click(function(){ //当提供一个持续时间参数,.hide()成为一个动画方法。.hide()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画。一旦透明度达到0, //display样式属性将被设置为none,这个元素将不再在页面中影响布局。 //持续时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时,normal //$("div.panel").hide("normal"); //$("div.panel").hide("fast"); //$("div.panel").hide("slow"); $("div.panel").hide(2000); }).end().eq(3).click(function(){ $("div.panel").show(2000); }).end().eq(4).click(function(){ $("div.panel").toggle(2000); }).end().eq(5).click(function (){ //对隐藏的元素进行动画显示:向下滑动(显示)被选元素 $("div.panel").slideDown("slow"); }).end().eq(6).click(function(){ //对显示的元素进行动画隐藏:向上滑动(隐藏)被选元素 $("div.panel").slideUp("slow"); }).end().eq(7).click(function(){ //对元素进行显示和隐藏的切换展示:对被选元素切换向上滑动和向下滑动 $("div.panel").slideToggle("slow"); }).end().eq(8).click(function(){ //对隐藏的元素进行淡化显示效果 $("div.panel").fadeIn("slow"); }).end().eq(9).click(function(){ //对显示的元素进行淡化的隐藏效果 $("div.panel").fadeOut("slow"); }).end().eq(10).click(function(){ //把被选元素淡出为给定的不透明度 $("div.panel").fadeTo("slow",0.2); }).end().eq(11).click(function(){ //把被选元素淡出为给定的不透明度 $("div.panel").animate({fontSize:"1em"},"slow"); }); }); </script> </head> <body> <div class="panel"> HTML 元素默认是静态定位,且无法移动。 如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。 </div> <input type="button" value="隐藏DIV: hide()" /><br> <input type="button" value="显示DIV: show()" /><br> <input type="button" value="动画隐藏DIV" /><br> <input type="button" value="动画显示DIV" /><br> <input type="button" value="jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。" /><br> <input type="button" value="jQuery 滑动函数 - slideDown" /><br> <input type="button" value="jQuery 滑动函数 - slideUp" /><br> <input type="button" value="jQuery 滑动函数 - slideToggle" /><br> <input type="button" value="jQuery Fade 函数 - fadeIn()" /><br> <input type="button" value="jQuery Fade 函数 - fadeOut()" /><br> <input type="button" value="jQuery Fade 函数 - fadeTo()" /><br> <input type="button" value="jQuery 自定义动画 - animate()" /><br> <br> <p><a href="index.jsp">返回</a></p> </body> </html>
发表评论
-
jQuery图表(jqPlot,Highcharts)
2012-05-18 00:48 23514jQuery图表在http://www.oschina.net ... -
jQuery之Ztree
2011-10-19 17:14 17547参考资料 1 spring+struts2+hibernate ... -
jQuery之弹出层(用于提示)
2011-10-19 10:26 2262参考了权威指南的部分代码 实现效果:单击按钮显示层,在单击就 ... -
jQuery之get(txt,xml,json二点注意事项)
2011-10-18 14:42 5663参考资料 1 jQuery ajax - get() 方法 h ... -
jQuery之load
2011-10-17 15:33 7715参考资料 1 jQuery ajax - load() 方法 ... -
jQuery之ID选择器
2011-08-23 15:25 9862参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之css
2011-08-23 13:54 1582jQuery W3C文档 http://www.w3schoo ... -
jQuery之select
2011-08-22 16:39 2305话不多说,详见代码吧 网页代码 <div style ... -
jQuery之实战(checkbox,table)
2011-08-19 16:22 3780实现功能如下:参考图片 1 页面加载时效果 2 全选效果 ... -
jQuery之table(隔行变色)
2011-08-19 15:52 2749页面代码如下: <table style=&quo ... -
jQuery之checkbox(复选框)
2011-08-18 17:06 2068业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项 ... -
jQuery之radio(单选)
2011-08-18 15:41 2429页面代码如下: <inpu ... -
jQuery之get(val,text,html)
2011-08-18 14:53 5990参考资料 1 jquery中,html、val与text三者属 ... -
jQuery之ID选择器
2011-08-18 13:58 16参考资料 强烈推荐:张子秋 从零开始学习jQuery (二) ... -
jQuery之jqzoom(图片放大镜插件)
2011-08-18 11:07 19699参考资料 1 基于jQuery开发的图片放大镜插件 - 淘宝网 ... -
jQuery之DOM
2011-08-17 14:45 1448参考资料 1 跳蚤的小窝:)jQuery对象和DOM对象【jQ ... -
jQuery之入门(ready)
2011-08-17 11:46 2081参考资料 1 jquery $(document).ready ... -
jQuery与Java实现图片的剪切
2011-08-05 15:10 30430一 参考资料 1 jquery Jcrop 头像,logo截图 ... -
jQueryAPI 中文版及相关参考资料
2010-12-24 12:52 1986转载: http://www.css88.com/catego ... -
jQuery对象和DOM对象【jQuery开发注意点(一)】
2010-12-23 16:45 2619转载:jQuery对象和DOM对象【jQuery开发注意点(一 ...
相关推荐
强大的jQuery滑块效果脚本-Side Effect,不论是左滑、右滑,还是上滑、下滑,效果都是杠杠的!
Overlay-like Effect with jQuery 是一个基于jquery的过渡(筛选)特效插件,区别于传统的遮罩效果,它通过改变其他元素的透明度实现类似遮罩的效果,它可以使某个元素突出显示,其他元素则在遮罩之下。
18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
jQuery Tooltips悬停提示效果是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效。
Effect Toggle Hide Show [Utilities] Position Widget [About jQuery UI] Getting Started Upgrade Guide Changelog Roadmap Subversion Access UI Developer Guidelines [Theming] Theming jQuery UI jQuery UI...
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
基于JQuery的一款滑动切换插件,就是大家熟悉的滑动门和选项卡,也称为Tab标签,不过本插件内含有多款标签,有的带有动画效果,带有注释,不熟悉网页的也可轻松上手。一些代码注释: * defaultIndex - 默认选中的...
一款支持多达12种特效,22个自定义参数的多种切换效果jQuery焦点图片轮播插件,网页幻灯片自动切换特效。 <title>多种切换效果jQuery焦点图片轮播插件</title> <!--[if lt IE 9]>[removed]...
61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏相册图片自动切换插件 63.[荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64.[荐]...
JQuery drag and drop substitution effect.
jQuery UI 主要分为3个部分:交互、微件和效果库。 交互(Interactions) 交互部件是一些与鼠标交互相关的内容,包括缩放(Resizable) , 拖动(Draggable) , 放置(Droppable) , 选择(Selectable) , 排序...
jQuery就是如此强大,你可以轻易地找到DOM中的任何元素,而这也是jQuery设计之初query的真实含义(查询)。 编辑本段Jquery对象 jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象...
Jquery是网页编程所需的重要技术之一。Jquery是继prototype之后又一个优秀的Javascrīpt框架,它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、...
jQuery 降雪效果,降雪效果 用于 首先,我们在页面上调用 jQuery 库和我们的 jQuery 插件文件。 < script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.2.min.js" > < / script...
jQuery,jQuery插件 Overlay-like Effect with jQuery 是一个基于jquery的过渡特效插件,区别于传统的遮罩效果,它通过改变其他元素的透明度实现类似遮罩的效果,它可以使某个元素突出显示,其他元素则在遮罩之下。...
您首先用一些随机文本替换您的文本,如下所示: <h3>5y5pvh2SZdHMQutybUTXGPhc#1d使用 jQuery,只需创建一个 jQuery 对象并调用decrypt.js提供的自定义decrypt_effect方法,将实际文本作为选项传递: $("h3")....
effect:动画效果(默认:"fade") fade:渐显;|| left:左滚动;|| fold:淡入淡出 autoPlay:自动运行(默认:false) delayTime:毫秒(默认:500);切换效果持续时间(一次切换效果执行所用的时间长度)。pt> ...
帮助实现非常酷的文字显示效果,可用于标题、LOGO和幻灯片