超实用的jQuery代码段 - jQuery实现Animate动画
2015-12-06 22:03
615 查看
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../jquery/jquery-1.9.1.min.js"></script>
<script src="../jquery/js/jquery-ui-1.10.3.custom.js"></script>
<link href="../jquery/css/cupertino/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link rel="stylesheet" href="../jquery/themes/base/jquery.ui.all.css">
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../jquery/ui/jquery.ui.widget.js"></script>
<script src="../jquery/ui/jquery.ui.position.js"></script>
<script src="../jquery/ui/jquery.ui.menu.js"></script>
<script src="../jquery/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="css/demos.css">
<script type="text/javascript">
$(document).ready(function(){//预加载函数，当Dom树加载完成后，执行的函数
$("button").click(function(){//为button元素添加click事件匿名函数。
$("div").animate({left:'350'});//div从原有位置向左移动350px的动画
$("#div-log").html($("#div-log").html()+"<p>"+"animate()方法 ：实现Animate动画"+"</p>");
})
})
</script>
<style type="text/css">
body{
font: 62.5% "Trebuchet MS",sans-serif;
margin: 64px;
}
#h2-caption{
font:20px "Trebuchet MS",sans-serif;
}
p{
font:16px "Trebuchet MS",sans-serif;
}
.demoHeaders{
margin-top: 2em;
}
#div-log{
font: 13.5px "Trebuchet MS",sans-serif;
}
</style>
</head>
<body>
<h2 id="h2-caption">超实用的jQuery代码段 - jQuery实现Animate动画</h2>
<hr><br>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<!--position解释
CSS的Position很重要，有以下几个值：static，relative，absolute，fixed。
Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
text-align的解释见http://www.w3school.com.cn/cssref/pr_text_text-align.asp
-->
<div style="background: #98bf21;height: 60px;width: 100px;position: absolute;text-align: center;">
<b>我会动画功能的哦！</b><br>
<b>我会动画功能的哦！</b><br>
<b>我会动画功能的哦！</b><br>
</div>
<br><br><br><br><br><br><hr>
<div id="div-log">
<p>日志记录：</p>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../jquery/jquery-1.9.1.min.js"></script>
<script src="../jquery/js/jquery-ui-1.10.3.custom.js"></script>
<link href="../jquery/css/cupertino/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link rel="stylesheet" href="../jquery/themes/base/jquery.ui.all.css">
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../jquery/ui/jquery.ui.widget.js"></script>
<script src="../jquery/ui/jquery.ui.position.js"></script>
<script src="../jquery/ui/jquery.ui.menu.js"></script>
<script src="../jquery/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="css/demos.css">
<script type="text/javascript">
$(document).ready(function(){//预加载函数，当Dom树加载完成后，执行的函数
$("button").click(function(){//为button元素添加click事件匿名函数。
$("div").animate({left:'350'});//div从原有位置向左移动350px的动画
$("#div-log").html($("#div-log").html()+"<p>"+"animate()方法 ：实现Animate动画"+"</p>");
})
})
</script>
<style type="text/css">
body{
font: 62.5% "Trebuchet MS",sans-serif;
margin: 64px;
}
#h2-caption{
font:20px "Trebuchet MS",sans-serif;
}
p{
font:16px "Trebuchet MS",sans-serif;
}
.demoHeaders{
margin-top: 2em;
}
#div-log{
font: 13.5px "Trebuchet MS",sans-serif;
}
</style>
</head>
<body>
<h2 id="h2-caption">超实用的jQuery代码段 - jQuery实现Animate动画</h2>
<hr><br>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<!--position解释
CSS的Position很重要，有以下几个值：static，relative，absolute，fixed。
Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
text-align的解释见http://www.w3school.com.cn/cssref/pr_text_text-align.asp
-->
<div style="background: #98bf21;height: 60px;width: 100px;position: absolute;text-align: center;">
<b>我会动画功能的哦！</b><br>
<b>我会动画功能的哦！</b><br>
<b>我会动画功能的哦！</b><br>
</div>
<br><br><br><br><br><br><hr>
<div id="div-log">
<p>日志记录：</p>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【Asp.net MVC】AJAXHelper 和jQueryAjax
- 火狐浏览器下使用jquery修改img的src
- jquery uploadifive使用
- [问题解决] MVC5 中缺失jquery.unobtrusive-ajax，如何安装。
- jquery hover事件只触发一次动画
- javaScript基础练习题-下拉框制作(JQuery)
- Jquery给easyui的表单元素赋值，获取值总结
- 原生JavaScript和jQuery的较量
- jquery分页插件开发
- JQuery实现——黑客帝国代码雨效果
- jQuery的ajax链式编程方法
- jQuery.form.js使用
- 小巧强大的jquery layer弹窗弹层插件
- 使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
- jquery入门
- Chrome下JQuery的mouseup事件丢失
- jQuery创建ajax关键词数据搜索
- jquery实现图片轮播
- 10018---jQuery--Ajax(load,get,post方法）
- 如何通过jquery异步传数组array数据到后台