来源：未知 时间：2015-08-11 09:25 作者：xxadmin 阅读:次
[导读] 本教程讲解jquery实现滑动特效代码slide...方法详解 在项目中，有需求要使用jquery实现滑动效果，于是把相关内容整理如下，下文介绍了很详细，有文字说明和代码分析，需要的朋友可以...
|
本教程讲解jquery实现滑动特效代码slide...方法详解 在项目中，有需求要使用jquery实现滑动效果，于是把相关内容整理如下，下文介绍了很详细，有文字说明和代码分析，需要的朋友可以来学习下。 实现方式一： .slideUp([duration][,complete])——目标元素向上滑入隐藏；
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>滑动效果</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/slide.js"></script>
<style>
img{
width:500px;
}
</style>
</head>
<body>
<div>
<div>
<button id="btn1">向上划入隐藏</button>
<button id="btn2">向下滑出显示</button>
<button id="btn3">向上划入隐藏/向下滑出显示</button>
</div>
<img src="images/2.jpg"/>
</div>
</body>
</html>slide.js代码： /*滑动效果*/
$(document).ready(function(){
//向上滑入
$('#btn1').click(function(){
$('img').slideUp(2000);
});
//向下滑出
$('#btn2').click(function(){
$('img').slideDown(2000);
});
//切换滑动
$('#btn3').click(function(){
$('img').slideToggle(2000);
});
})
实现方式二： 一、jQuery___效果(滑动效果) slideDown(speed, [callback]) 概述 参数 speedString,Number 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) 在动画完成时执行的函数 示例 描述: 用600毫秒缓慢的将段落滑下 jQuery 代码: $("p").slideDown("slow");描述: 用200毫秒快速将段落滑下，之后弹出一个对话框 jQuery 代码: $("p").slideDown("fast",function(){
alert("Animation Done.");
});slideUp(speed, [callback]) 概述 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 参数 speedString,Number 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function 在动画完成时执行的函数 示例 描述: 用600毫秒缓慢的将段落滑上 jQuery 代码: $("p").slideUp("slow");描述: 用200毫秒快速将段落滑上，之后弹出一个对话框 jQuery 代码: $("p").slideUp("fast",function(){
alert("Animation Done.");
});slideToggle(speed, [callback]) 概述 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。 参数 speedString,Number 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function 示例 描述: 用600毫秒缓慢的将段落滑上或滑下 jQuery 代码: $("p").slideToggle("slow");描述: 用200毫秒快速将段落滑上或滑下，之后弹出一个对话框 jQuery 代码: $("p").slideToggle("fast",function(){
alert("Animation Done.");
});以上内容是jquery实现滑动特效代码，希望大家喜欢。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
