两个完整的jquery slide多方面滑动效果实例
2024-08-27 21:06:13
实例1，需要引用jquery-ui.js
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
slideRightShow: function() {
return this.each(function() {
$(this).show('slide', {direction: 'right'}, 1000);
});
},
slideLeftHide: function() {
return this.each(function() {
$(this).hide('slide', {direction: 'left'}, 1000);
});
},
slideRightHide: function() {
return this.each(function() {
$(this).hide('slide', {direction: 'right'}, 1000);
});
},
slideLeftShow: function() {
return this.each(function() {
$(this).show('slide', {direction: 'left'}, 1000);
});
}
}); $(function(){
$("body").on("click","a#show",function(){
$("#test").slideRightShow();
});
$("body").on("click","a#hide",function(){
$("#test").slideRightHide();
});
});
</script>
</head> <body>
<div id="test" style="position:absolute;">asdfasdf</div>
<br />
<a href="javascript:void(0)" id="show">显示</a>
<a href="javascript:void(0)" id="hide">隐藏</a>
</body>
</html>
实例二：
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
jQuery.fn.slideLeftHide = function( speed, callback ) {
this.animate({
width : "hide",
paddingLeft : "hide",
paddingRight : "hide",
marginLeft : "hide",
marginRight : "hide"
}, speed, callback );
};
jQuery.fn.slideLeftShow = function( speed, callback ) {
this.animate({
width : "show",
paddingLeft : "show",
paddingRight : "show",
marginLeft : "show",
marginRight : "show"
}, speed, callback );
};
</script>
<script type="text/javascript">
$(function() {
$(".title_bar").slideLeftHide(4000);
$(".title_bar").slideLeftShow(4000);
});
</script> </head>
<body> <div class="title_bar">
asdfasfasdfas
</div>
</body>
</html>
最新文章
- 利用注解来保存uri
- WPF中的image控件的Source赋值
- [js开源组件开发]query组件,获取url参数和form表单json格式
- Java查询大文本
- Cocos2d-x 3.0 Json用法 Cocos2d-x xml解析
- BizTalk开发系列(三十四) Xpath
- android中判断sim卡状态和读取联系人资料的方法
- Python实践之（七）逻辑回归（Logistic Regression）
- Linux07--Shell程序设计03 通配符与正则表达式
- Problem C: 学生的排序
- Linux 系统目录结构说明
- C语言表达式和语句
- JS 将canvas画布保存到本地
- [matlab] 10.最小覆盖
- 源码解析之AQS源码解析
- 【转】Vue中mintui的field实现blur和focus事件
- [leetcode]Remove Duplicates from Sorted List II @ Python
- Appium升级后安装UnicodeIME-debug.apk 提示
- TensorFlow 实现分类操作的函数学习
- Shell的for和select