JQuery开发3-jQuery中图片动画效果
2016-05-26 13:37
501 查看
网页中经常会见到图片沿水平方向、竖直方向移动,图片动态放大、缩小,图片展开、收缩等功能,在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>
相关文章推荐
- jQuery动画效果图片轮播特效
- jQuery简单实用的图片标题动画效果插件
- jquery动画2.元素坐标动画效果(创建一个图片走廊)
- 20个真棒的jquery和css打造的图片动画效果(网站背景随时变换,广告牌效果..)
- iPhone开发【十三】动画效果之最简单的动画——动态加载图片
- jQuery动画效果实现图片无缝连续滚动
- jQuery动画效果实现图片无缝连续滚动
- jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发
- jQuery动画效果实现图片无缝连续滚动
- Jquery插件开发之图片放大镜效果(仿淘宝)
- 关于使用jquery图片动画效果后png格式的透明效果在ie8出现白底
- jQuery演示10种不同的切换图片列表动画效果
- jQuery的动画效果以及图片切换实例
- jquery动画3.创建一个带遮罩效果的图片走廊
- jquery动画 -- 4.升级版遮罩效果的图片走廊--带自动运行效果
- css3动画高级应用开发唱吧首页图片飞入效果
- iPhone开发【十三】动画效果之最简单的动画——动态加载图片
- Jquery插件开发之图片放大镜效果(仿淘宝)
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- jquery动画2.元素坐标动画效果(创建一个图片走廊)