jquery简单动画效果（上）

来源：互联网发布：淘宝直播账号出售编辑：程序博客网时间：2024/05/16 02:00

1 显示和隐藏效果：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(":button:eq(0)").click(function(){$("div").hide(500);});$(":button:eq(1)").click(function(){$("div").show(500);});$(":button:eq(2)").click(function(){$("div").toggle(500);});});</script></head><body><div style="width: 700px;height: 500px;background-color: blue;"></div><input type="button" value="hide"><input type="button" value="show"><input type="button" value="toggle"></body></html>

2 利用显示隐藏，创建简单动态菜单

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">div{display: none;}ul{list-style: none;}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("img").mouseover(function(){$("div").show(1000);});$("div").hover(null,function(){$("div").hide(1000);});});</script></head><body><img alt="" src="ph/menu.jpg" width="70" height="100"><div><ul><li><a href="">图书介绍</a></li><li><a href="">新书预告</a></li><li><a href="">联系我们</a></li></ul></div></body></html>

3 使用淡入淡出创建简单菜单

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">div{display: none;}ul{list-style: none;}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("img").mouseover(function(){//$("div").fadeIn(1000);$("div").fadeTo(1000,0.9);});$("div").hover(null,function(){//$("div").fadeOut(1000);$("div").fadeTo(1000,0.2);});});</script></head><body><img alt="" src="ph/menu.jpg" width="70" height="100"><div><ul><li><a href="">图书介绍</a></li><li><a href="">新书预告</a></li><li><a href="">联系我们</a></li></ul></div></body></html>

0 0