百威
- 浏览: 707359 次
- 来自: ...
-
文章分类
最新评论
-
ranguisheng：
可以加点注释,代码不便于阅读.
用java实现数据库连接池的一个简单示例 -
abcd880129：
这样写的话，还要用专门的下载工具，不然，只能下到一个为空的ex ...
ZK下载文件时,不在服务器生成文件直接下载 -
234369425：
同上，是20
java计算阶乘 -
CodeToMyLaw：
如果目录中含有中文呢？
[^\x00-\xff] 中文的 ...
js验证文件目录格式的正确性 -
yanzhoupuzhang：
加了，还是报那个错误！
org.apache.commons.dbcp.BasicDataSource的解决方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>show()、hide()方法</title>
<style type="text/css">
<!--
p{
border:1px solid #003863;
font-size:13px;
padding:4px;
background:#FFFF00;
}
input{
border:1px solid #003863;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
padding:3px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input:first").click(function(){
$("p").hide(); //隐藏
});
$("input:last").click(function(){
$("p").show(); //显示
});
});
</script>
</head>
<body>
<input type="button" value="Hide"> <input type="button" value="Show">
<p>点击按钮，看看效果</p>
<span>一段其它的文字</span>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多级菜单</title>
<style type="text/css">
<!--
ul{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
li{
padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){
if($(this).children().is(":hidden")){
//如果子项是隐藏的则显示
$(this).css("list-style-image","url(minus.gif)")
.children().show();
}else{
//如果子项是显示的则隐藏
$(this).css("list-style-image","url(plus.gif)")
.children().hide();
}
}
return false; //避免不必要的事件混绕
}).css("cursor","pointer").click(); //加载时触发点击事件
//对于没有子项的菜单，统一设置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>
</head>
<body>
<ul>
<li>第1章 Javascript简介</li>
<li>第2章 Javascript基础</li>
<li>第3章 CSS基础
<ul>
<li>第3.1节 CSS的概念</li>
<li>第3.2节 使用CSS控制页面
<ul>
<li>3.2.1 行内样式</li>
<li>3.2.2 内嵌式</li>
</ul>
</li>
<li>第3.3节 CSS选择器</li>
</ul>
</li>
<li>第4章 CSS进阶
<ul>
<li>第4.1节 div标记与span标记</li>
<li>第4.2节 盒子模型</li>
<li>第4.3节 元素的定位
<ul>
<li>4.3.1 float定位</li>
<li>4.3.2 position定位</li>
<li>4.3.3 z-index空间位置</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多级菜单</title>
<style type="text/css">
<!--
ul{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
li{
padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){
$(this).children().toggle();
$(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
}
return false; //避免不必要的事件混绕
}).css("cursor","pointer").click(); //加载时触发点击事件
//对于没有子项的菜单，统一设置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
</script>
</head>
<body>
<ul>
<li>第1章 Javascript简介</li>
<li>第2章 Javascript基础</li>
<li>第3章 CSS基础
<ul>
<li>第3.1节 CSS的概念</li>
<li>第3.2节 使用CSS控制页面
<ul>
<li>3.2.1 行内样式</li>
<li>3.2.2 内嵌式</li>
</ul>
</li>
<li>第3.3节 CSS选择器</li>
</ul>
</li>
<li>第4章 CSS进阶
<ul>
<li>第4.1节 div标记与span标记</li>
<li>第4.2节 盒子模型</li>
<li>第4.3节 元素的定位
<ul>
<li>4.3.1 float定位</li>
<li>4.3.2 position定位</li>
<li>4.3.3 z-index空间位置</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>伸缩的菜单，用toggle()重写</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation > ul > li > a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
/* 子菜单的CSS样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li").find("ul").prev().click(function(){
$(this).next().toggle();
});
$("li:has(ul)").find("ul").hide();
});
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul>
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volleyball</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul>
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>show()、hide()方法</title>
<style type="text/css">
<!--
body{
background:url(bg1.jpg);
}
img{
border:1px solid #FFFFFF;
}
input{
border:1px solid #FFFFFF;
font-size:13px; padding:4px;
font-family:Arial, Helvetica, sans-serif;
background-color:#000000;
color:#FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input:first").click(function(){
$("img").hide(3000); //逐渐隐藏
});
$("input:last").click(function(){
$("img").show(1000); //逐渐显示
});
});
</script>
</head>
<body>
<input type="button" value="Hide"> <input type="button" value="Show">
<p><img src="01.jpg"></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>toggle(speed)方法</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation > ul > li > a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
/* 子菜单的CSS样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("li").find("ul").prev().click(function(){
$(this).next().toggle(500); //逐渐的显隐
});
$("li:has(ul)").find("ul").hide();
});
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul>
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volleyball</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul>
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>fadeIn()、fadeOut()方法</title>
<style type="text/css">
<!--
body{
background:url(bg2.jpg);
}
img{
border:1px solid #000000;
}
input{
border:1px solid #000000;
font-size:13px; padding:4px;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
color:#000000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input:eq(0)").click(function(){
$("img").fadeOut(3000); //逐渐fadeOut
});
$("input:eq(1)").click(function(){
$("img").fadeIn(1000); //逐渐fadeIn
});
$("input:eq(2)").click(function(){
$("img").hide(3000); //逐渐隐藏
});
$("input:eq(3)").click(function(){
$("img").show(1000); //逐渐显示
});
});
</script>
</head>
<body>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="Hide">
<input type="button" value="Show">
<p><img src="02.jpg"></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>fadeTo()方法</title>
<style type="text/css">
<!--
body{
background:url(bg2.jpg);
}
img{
border:1px solid #000000;
}
input{
border:1px solid #000000;
font-size:13px; padding:2px;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
color:#000000;
}
p{
padding:5px;
border:1px solid #000000; /* 添加边框，利于观察效果 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input:eq(0)").click(function(){
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function(){
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function(){
$("img").fadeTo(1000,0.5);
});
$("input:eq(3)").click(function(){
$("img").fadeTo(1000,0);
});
});
</script>
</head>
<body>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
<p><img src="03.jpg"></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>slideUp()和slideDown()</title>
<style type="text/css">
<!--
body{
background:url(bg2.jpg);
}
img{
border:1px solid #000000;
margin:8px;
}
input{
border:1px solid #000000;
font-size:13px; padding:2px;
font-family:Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
color:#000000;
}
div{
background-color:#FFFF00;
height:80px; width:80px;
border:1px solid #000000;
float:left; margin-top:8px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input:eq(0)").click(function(){
$("div").add("img").slideUp(1000);
});
$("input:eq(1)").click(function(){
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function(){
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function(){
$("div").add("img").show(1000);
});
});
</script>
</head>
<body>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<div></div><img src="04.jpg">
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>animate()方法</title>
<style type="text/css">
<!--
body{
background:url(bg2.jpg);
}
div{
background-color:#FFFF00;
height:40px; width:80px;
border:1px solid #000000;
margin-top:5px; padding:5px;
text-align:center;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("button").click(function(){
$("#block").animate({
opacity: "0.5",
width: "80%",
height: "100px",
borderWidth: "5px",
fontSize: "30px",
marginTop: "40px",
marginLeft: "20px"
},2000);
});
});
</script>
</head>
<body>
<button id="go">Go>></button>
<div id="block">动画！</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>animate()方法</title>
<style type="text/css">
<!--
body{
background:url(bg2.jpg);
}
div{
position:absolute; /* 绝对定位 */
left:90px; top:50px;
}
input{
border:1px solid #000033;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input:first").click(function(){
$("#block").animate({
left: "-=80px" //相对左移
},300);
});
$("input:last").click(function(){
$("#block").animate({
left: "+=80px" //相对右移
},300);
});
});
</script>
</head>
<body>
<input type="button" value="<<左"> <input type="button" value="右>>">
<div id="block"><img src="05.jpg"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>animate()方法</title>
<style type="text/css">
<!--
body{
background:url(bg2.jpg);
}
div{
background-color:#FFFF22;
width:100px; text-align:center;
border:2px solid #000000;
margin:3px; font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}
input{
border:1px solid #000033;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input:eq(0)").click(function(){
//第一个animate与第二个animate同时执行，然后再执行第三个
$("#block1").animate({width:"90%"},{queue:false,duration:1500})
.animate({fontSize:"24px"},1000)
.animate({borderRightWidth:"20px"},1000);
});
$("input:eq(1)").click(function(){
//依次执行三个animate
$("#block2").animate({width:"90%"},1500)
.animate({fontSize:"24px"}, 1000)
.animate({borderRightWidth:"20px"}, 1000);
});
$("input:eq(2)").click(function(){
$("input:eq(0)").click();
$("input:eq(1)").click();
});
$("input:eq(3)").click(function(){
//恢复默认设置
$("div").css({width:"", fontSize:"", borderWidth:""});
});
});
</script>
</head>
<body>
<input type="button" id="go1" value="Block1动画">
<input type="button" id="go2" value="Block2动画">
<input type="button" id="go3" value="同时动画">
<input type="button" id="go4" value="重置">
<div id="block1">Block1</div>
<div id="block2">Block2</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>伸缩的导航条</title>
<style type="text/css">
<!--
body{
padding:0px; margin:0px;
background:url(bg3.jpg) no-repeat;
}
#wrapper{min-height:600px;}
#navigation{
position:absolute;
top:0px; left:0px;
margin:0px; padding:0px;
width:120px; list-style:none;
}
#navigation li{
position:relative;
float:left;
margin:0px; padding:0px;
height:50px; width:120px;
}
#navigation li a{
position:absolute;
display:block;
top:0px; left:0px;
height:50px; width:120px;
line-height:50px;
text-align:center;
color:#FFFFFF;
}
#navigation .nav0 a{background:#F50065;}
#navigation .nav1 a{background:#D60059;}
#navigation .nav2 a{background:#B0004A;}
#navigation .nav3 a{background:#F26B00;}
#navigation .nav4 a{background:#D75F00;}
#navigation .nav5 a{background:#B24F00;}
#navigation .nav6 a{background:#6E8F00;}
#navigation .nav7 a{background:#607D00;}
#navigation .nav8 a{background:#496100;}
#navigation .nav9 a{background:#007f9f;}
#navigation .nav10 a{background:#006b87;}
#navigation .nav11 a{background:#005065;}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$('#navigation li').each(function(){
if(this.className.indexOf("current_page")==-1) {
$("a",this).css("left","-120px"); //不是当前页的移动到页面左侧外
$(this).hover(function(){
$("a",this).animate({left:"0px"}, "fast");
},function(){
$("a",this).animate({left:"-120px"}, "fast");
});
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="navigation">
<li class="nav0 current_page"><a href="#">我的日志</a></li>
<li class="nav1"><a title="资源下载" href="#">资源下载</a></li>
<li class="nav2"><a title="相册" href="#">相册</a></li>
<li class="nav3"><a title="一起走到" href="#">一起走到</a></li>
<li class="nav4"><a title="从明天起" href="#">从明天起</a></li>
<li class="nav5"><a title="纸飞机" href="#">纸飞机</a></li>
<li class="nav6"><a title="下一站" href="#">下一站</a></li>
<li class="nav7"><a title="门" href="#">门</a></li>
<li class="nav8"><a title="人文知识" href="#">人文知识</a></li>
<li class="nav9"><a title="标签记录" href="#">标签记录</a></li>
<li class="nav10"><a title="友情链接" href="#">友情链接</a></li>
<li class="nav11"><a title="联系我们" href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
分享到：
发表评论
-
easyui+ztree后台管理系统模板
2017-12-30 21:14 552index.html <!DOCTYPE html& ... -
jQuery中$.ajax()和$.getJson()同步处理详解
2017-10-02 14:32 380这篇文章主要介绍了jQue ... -
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2017-10-02 14:17 315本文重点是来讲讲jQuery中调用ajax的4种方法：$.ge ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2017-10-02 12:29 442本文是对Jquery中$.get(),$.post(),$.a ... -
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017-10-02 12:11 290通过JQuery可以跨域获取J ... -
jquery实现textarea发布框限制文字字数输入(添加中文识别)
2017-09-28 23:36 513<script type="text/ ... -
jquery实现textarea输入框限制字数的方法
2017-09-28 23:35 484本文实例讲述了jquery实现textarea输入框限制字数的 ... -
EasyUI创建人员树的实例代码
2017-09-27 23:50 318最近做了一个树状的下拉列表，在这里记录一下，以后可以直接使用 ... -
jquery如何判断checkbox（复选框）是否被选中
2015-06-13 22:17 740谁都知道 在html 如果一个复选框被选中 是 checked ... -
利用jQuery简单实现CheckBox全选效果
2015-05-28 20:43 727<!DOCTYPE html> <ht ... -
JQuery 发送Json格式数据
2015-05-23 14:06 640简述： 需要封装一组Json格式的数据到服务器 知识点： ... -
jQuery JSONP跨域
2014-01-11 08:36 845String result=request.getPara ... -
jQuery AJAX 分页插件
2013-12-23 08:37 560<!DOCTYPE html PUBLIC &quo ... -
jQuery表格自动增加
2013-12-23 08:32 679<!DOCTYPE html> <ht ... -
juery 插件使用
2013-07-27 17:49 891<!DOCTYPE html PUBLIC &quo ... -
jquery 开发ajax
2013-07-27 17:27 1139<%@ Page Language="C# ... -
jquery 功能函数
2013-07-26 23:10 820<!DOCTYPE html PUBLIC &quo ... -
jquery控制页面
2013-07-21 22:59 944<!DOCTYPE html PUBLIC &quo ... -
jquery基础
2013-07-21 21:41 1069<!DOCTYPE html PUBLIC &quo ... -
JQuery 获取和设置Select选项的代码
2012-11-17 14:01 973获取Select ： 获取select 选中的 text : ...
相关推荐
第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery] 第15课 - jQuery插件 - [精通JavaScript+jQuery]
"jQuery动画特效大全"这个压缩包显然包含了大量利用jQuery制作的各种动画效果及其源码，对于前端开发者来说，这是一个宝贵的资源库，可以帮助他们快速理解和应用jQuery动画。 jQuery的动画功能主要通过`.animate()`...
jquery动画特效时间轴
标题中的“4个很漂亮的鼠标滑过超链接jQuery动画特效.zip”表明这是一个包含四个不同鼠标悬停效果的jQuery代码集合，专用于超链接。这些特效可能增强了用户在网站上交互时的体验，使得网页更加动态和吸引人。jQuery...
本资源"仿蘑菇街会员等级显示jQuery动画特效.zip"提供了一种利用jQuery库实现的会员等级显示动画效果，旨在帮助开发者创建类似蘑菇街那样具有动态视觉吸引力的用户界面。 jQuery是一个轻量级、高性能的JavaScript库...
这是一款效果非常炫酷的堆叠图片展开和折叠jquery动画特效。该特效中，所有图片可以像扑克牌一样进行堆叠，在触发相应的事件之后，堆叠的图片会议动画的方式全屏展开，效果非常炫酷。 在页面底部，<body>标签...
janimate是一款非常实用的基于Animate.css的jQuery动画特效插件。该动画特效插件允许你在jQuery代码中操纵Animate.css的66种动画效果。通过该插件可以简化Animate.css的使用，非常方便。
这是一款使用jquery animate动画制作的古卷轴平滑打开动画特效。该特效通过将一张完整的卷轴拆分到多个div中，然后通过jquery animate事件，配合不同的时间延迟，形成完整的卷轴打开动画。
### jQuery动画特效实例教程知识点详解 #### jQuery动画特效基础 jQuery动画特效是利用jQuery库提供的方法对网页元素进行动态显示效果的编程技术。通过这些动画效果，开发者可以增强用户界面的交互性和视觉吸引力...
《jQuery垂直时间轴动画特效详解》 在网页设计与开发中，动态效果的运用往往能够提升用户体验，使得信息展示更加生动有趣。今天我们将探讨一种基于jQuery实现的垂直时间轴动画特效，它以其绿色主题和渐进式显示特性...
"jQuery css3图标动画鼠标滑过图标旋转动画特效"是一种常见的交互式设计技术，它结合了jQuery库的便捷性和CSS3的强大动画功能，为网页元素特别是图标按钮提供动态视觉效果。下面将详细介绍这个主题中的相关知识点。 ...
在实现这些jQuery动画特效时，我们需要在HTML中设置好基础结构，包括链接和必要的容器元素。CSS文件用于定义元素的初始样式和动画效果，而JavaScript（jQuery）文件则负责添加交互逻辑。例如，`$(document).ready()`...
【jQuery动画特效与会员等级显示】 在网页设计和开发中，吸引用户的注意力并提供良好的用户体验是至关重要的。"仿蘑菇街会员等级显示jQuery动画特效"是一个很好的例子，它利用了JavaScript库jQuery来实现动态的视觉...
这是一款利用jquery动画特效和css打造的侧边弹出垂直导航，整个弹出过程比较流畅，而且代码很简单，如果你正在寻找一款带动画的垂直导航，那么可以试试这个。下面是效果截图： HTML源码： 代码如下: <title>...
【jQuery经典特效26】：jQuery动画背景滑动切换效果是一种常见的网页动态设计技术，它为网站增添视觉吸引力，使用户界面更具互动性。在网页设计中，背景滑动切换通常用于首页大图轮播、内容区背景变换等场景，为用户...
二、jQuery动画特效 1. **基本动画**：jQuery提供了如`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等方法，轻松实现元素的淡入淡出、滑动显示等效果。例如，`$("#element").fadeIn(1000)`会让指定元素在1秒内逐渐...
在本文中，我们将深入探讨如何使用jQuery来实现一个生动的心电图动画特效，这将涉及到JavaScript编程、CSS样式以及HTML结构。心电图动画特效在许多网页设计中被用来增加视觉吸引力，尤其适用于医疗健康、健身或科技...
**jQuery文字动画特效插件详解** 在Web开发中，动态效果常常能提升用户体验，增加页面的吸引力。"jQuery文字动画特效插件"就是这样一款工具，它利用jQuery库的强大功能，结合animate.css，为网页中的文字元素添加...
fallingsnow.js是一款小巧的jquery下雪动画特效插件。该jquery下雪动画特效兼容ie8浏览器，它会控制雪花的飘落速度，雪花的尺寸越小，下落的速度越慢，可以制作出雪花飞舞的视觉差效果。