`
- 浏览:
55702 次
- 性别:
- 来自:
北京
-
今天又学习了一个小例子,不记得在网上哪里下载到的例子了,呵呵,模仿+学习~~~呵呵!!
每天进步一点点,要感谢无私的网友的~~~嘿嘿~
程序说明:
1、animate用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。
每个属性的值表示这个样式属性到多少时动画结束。
2、图片翻转加上颜色变化:
$("a",this).animate({ height: "0px",top: "25px"}, 80);
$("a",this).animate({ height: "28px",top: "10px"}, 80);
$("a",this).css("background","yellow");
3、.css("z-index","4"):
检索或设置对象的层叠顺序。
<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
<style type="text/css">
ul,li{list-style:none;padding:0;margin:0;}
#btncell{width:300px;height:100px;border:1px solid #777;margin:50px auto;}
#btncell li{width:100px;float:left;height:50px;font-size:14px;text-align:center;line-height:28px;position:relative;z-index:1;}
#btncell li a{display:block;height:28px;border:2px solid #333;text-decoration:none;width:50px;background:#888;overflow:hidden;position:absolute;left:25px;top:10px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
var smove=0;
var sout=0;
$(function(){
$("#btncell li").hover(
function(){
if(smove==0)
{
$("a",this).animate({ height: "0px",top: "25px"}, 80);
$("a",this).animate({ height: "28px",top: "10px"}, 80);
$("a",this).css("background","yellow");
}
},
function(){
if(sout==0)
{
$("a",this).animate({ height: "0px",top: "25px"}, 80);
$("a",this).animate({ height: "28px",top: "10px"}, 80);
$("a",this).css("background","#000");
}
}
)
$("#btncell li a").click(function(){
$(this).parents("li").css("z-index","4")
$(this).animate({ height: "558px",top: "-255px",width: "1000px",left: "-460px",opacity: 'toggle',lineHeight: '558px',fontSize: '500px'}, 1000);
$(this).animate({ height: "28px",top: "10px",width: "50px",left: "25px",opacity: 'toggle',lineHeight: '28px',fontSize: '12px'}, 400);
$(this).parents("li").css("z-index","2")
})
})
</script>
</head>
<body>
<ul id="btncell">
<li><a href="#">静</a></li>
<li><a href="#">吕</a></li>
<li><a href="#">娜</a></li>
<li><a href="#">馨</a></li>
<li><a href="#">宇</a></li>
<li><a href="#">男</a></li>
</ul>
</body>
</html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery-2.1.0jquery-2.1.0 jquery-2.1.0.min.js jquery-2.1.0-vsdoc.js 附Jquery官网下载方法: 源文件:http://code.jquery.com/jquery-[版本号].js 压缩文件:http://code.jquery.com/jquery-[版本号].min.js 如...
【jquery插件】jquery.maskedinput-1.2.2.js
jquery插件jquery-ui-1.8.18.custom.min.js
超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通JavaScript+jQuery] 第3课 - CSS基础 - [精通JavaScript+jQuery] 第4课 - CSS...
jquery--frame--ziyuan jquery--frame--ziyuan jquery--frame--ziyuan jquery--frame--ziyuan
强大的jQuery滑块效果脚本-Side Effect,不论是左滑、右滑,还是上滑、下滑,效果都是杠杠的!
jquery-mousewheel-master-3.0.13 最新版jquery滚轮事件插件
jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
jquery-colorbox jquery-colorbox jquery-colorbox
最新jquery-ui-1.11.2日期控件,官网下载内涵图片和自己添加的中文辅助jquery-ui-timepicker-zh-CN.js,经过本人测试绝对可以用,不知道怎么用的百度上找个例子即可,需要导入的包 ${ctx}/plugins/jquery-ui-1.11.2/...
jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)
jquery学习-----jquery库讲义,更快的了解jquery
easyui1.2.6整站文件.zip jquery1.7.2中文API修正版.chm jquery-easyui-1.2.6.zip JQuery-esqyUI中文-1.2.5API.CHM