网页中经常会见到图片沿水平方向、竖直方向移动,图片动态放大、缩小,图片展开、收缩等功能,在jQuery中可以用animate()函数很方便的实现该功能,具体参考代码如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b1").click(function s(){ var div=$("#div1"); div.animate({left:'350px'},"slow"); }); $("#b2").click(function(){ $("#div2").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); $("#b3").click(function(){ $("#div3").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); $("#b4").click(function(){ $("#div4").animate({ height:'toggle' }); }); $("#b5").click(function(){ var div=$("#div5"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); $("#b6").click(function(){ var div=$("#div6"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'2em'},"slow"); }); }); </script> </head> <body> <button id="b1">单个动画</button> <br> <div id="div1" style="width:80px;height:80px;background-color:green;position:absolute;"></div> <br> <br> <br> <br> <br> <br> <button id="b2">变换动画</button> <div id="div2" style="width:80px;height:80px;background-color:green;position:absolute;"></div> <br> <br> <br> <br> <br> <br> <br> <button id="b3">相对值动画</button> <div id="div3" style="width:80px;height:80px;background-color:green;position:absolute;"></div> <br> <br> <br> <br> <br> <br> <br> <button id="b4">预定义动画</button> <div id="div4" style="width:80px;height:80px;background-color:green;position:absolute;"></div> <br> <br> <br> <br> <br> <br> <br> <button id="b5">使用队列功能</button> <div id="div5" style="width:80px;height:80px;background-color:green;position:absolute;"></div> <br> <br> <br> <br> <br> <br> <br> <button id="b6">操作文本</button> <div id="div6" style="width:80px;height:80px;background-color:green;position:absolute;">hello</div> </body> </html>
相关推荐
Effects则提供了各种动画效果,如Fade(淡入淡出)、Slide(滑动)等。Position模块提供了元素相对定位的功能,而Utilities则是各种实用函数的集合,为开发带来便利。 在使用"jquery-ui-1.8.2.custom.min.js"之前,...
在Web开发领域,jQuery库因其强大的功能和易用性而备受青睐。今天我们将深入探讨一个独特的jQuery插件——"jquery-3d-menu",它为网页添加了引人注目的三维效果,极大地提升了用户界面的交互体验。 “jquery-3d-...
5. **动画效果**:解释如何利用jQuery UI的内置动画效果,如淡入淡出(Fade)、滑动(Slide)等,增强用户体验。 6. **无障碍性**:讨论如何确保jQuery UI组件符合无障碍性标准,使所有用户都能方便地使用。 7. **...
3. **Effects**:jQuery UI 提供了一套完整的特效库,如淡入淡出(Fade)、滑动(Slide)、切换(Toggle)等,以及一个用于自定义动画效果的工具集。 4. **Positioning**:这个功能可以帮助开发者精确地定位页面...
jQuery 是一个广泛使用的 JavaScript 库,简化了 DOM 操作、事件处理、动画以及Ajax交互。`jquery.editable-select` 就是建立在 jQuery 之上,因此在使用前需要确保页面中已经引入了 jQuery。 2. **选择器的增强**...
通过深入研究源代码,我们可以了解到插件的内部工作机制,包括图片位置计算、动画实现等细节,这对于进阶开发和自定义功能非常有帮助。 总之,jQuery Waterwheel Carousel 是一个强大且灵活的图片轮播解决方案,它...
第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery] 第15课 - jQuery插件 - [精通JavaScript+jQuery]
这些效果可以通过CSS3的transition属性和jQuery的animate方法实现,使得图片之间的切换更为自然流畅。 在实际使用中,开发者需要注意图片的尺寸和格式,确保它们能够在不同设备和浏览器上正确显示。同时,为了优化...
"jQuery-lightbox-0.5" 是一个基于...在实际应用中,开发人员需要理解上述知识点,根据项目需求进行配置和调整,以实现最佳的图片灯箱效果。同时,了解jQuery的API和基本的JavaScript语法是使用此插件的前提。
在现代网页开发中,jQuery 是一个不可或缺的库,它极大地简化了JavaScript的使用,使得DOM操作、事件处理、动画效果以及Ajax交互变得更加简单易行。"jquery-1.12.4-jquery.min.js.zip"是一个包含jQuery 1.12.4精简版...
在Web开发中,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画等任务。而jQuery-flip插件则是对jQuery功能的一个扩展,提供了3D翻转效果。这个插件允许开发者将任何HTML元素设置为可翻转,...
在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 DOM 操作、事件处理和动画制作等任务。而 `jquery.hash.min.js` 和 `jquery.ba-hashchange.min.js` 这两个文件则是在 jQuery 基础上扩展了对...
在本篇文章中,我们将聚焦于jQuery 1.7.2版本,这是一个稳定且功能强大的版本,尤其对于那些需要API文档进行中文参考的开发者来说,汉化后的版本提供了极大的便利。 **1. jQuery对象与DOM元素的区别** 在jQuery中,...
7. **效果 (Effects)**:包括基本动画、过渡效果以及自定义效果,如淡入淡出、滑动等。 8. **自动完成 (Autocomplete)**:为输入字段提供动态建议,常用于搜索或输入辅助。 9. **布局 (Resizable)**:允许用户调整...
再比如,使用jQuery的动画效果和jQuery UI的拖放功能,可以实现自定义的拖拽排序列表,使用户能够自由调整元素顺序。 在实际项目中,为了充分利用这两个库,开发者需要了解它们的API文档,学习如何结合使用选择器、...
在"jquery-ui-1.10.3"这个压缩包中,包含了jQuery UI 1.10.3版本的所有资源,这对于web开发来说是一个极其宝贵的资源。 首先,jQuery UI的核心在于其丰富的组件库。其中包括了诸如日期选择器(Datepicker)、滑块...
在JavaScript开发中,jQuery是一个广泛使用的库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。在针对Visual Studio的开发环境中,jQuery提供了vsdoc.js文件,这是一个特殊的文档文件,为开发人员在IDE...
"jquery插件库-jquery仿京东商品详情页图片放大效果.zip"这个压缩包文件包含了一个jQuery插件,旨在模仿京东商品详情页中的图片放大效果,为用户提供更直观的商品查看体验。 首先,我们来详细了解一下jQuery插件的...
在.NET开发环境中,尤其是使用Visual Studio 2008 (VS.NET2008)时,这两个文件对于实现jQuery的智能感知功能至关重要。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互。...
**jQuery-1.4.2-vsdoc.js** 文件是Visual Studio的智能提示文档,它是针对jQuery 1.4.2版本的,为开发人员在使用VS进行jQuery开发时提供代码补全和API参考。在Visual Studio中,当开发者键入$.或者$(时,vsdoc文件会...