引入jquery.js，复制以下代码，即可运行
专注于为中小企业提供成都网站建设、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业紫金免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
1，style type="text/css"
2，.slide {
3，position: relative;
4，height: 200;
5，lightyellow;
6，}
7 ，
8，.slide .inner {
9，position: absolute;
10，left: 0;
11，bottom: 0;
12，height: 100;
13，lightblue; ,
14，width: 100%
15，}
16，/style
1、slidetoggle() 交替slidedown(),slideup()
Html代码
div id="slidebottom" class="slide"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$('#slidebottom button').click(function() {
$(this).next().slideToggle();
});
2、左侧横向交替滑动 Animate Left
Html代码
div id="slidewidth" class="slide"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$("#slidewidth button").click(function(){
$(this).next().animate({width: 'toggle'});
});
3、左侧横向交替滑动 Animate Left Margin （非隐藏）
Html代码
div id="slideleft" class="slide" style="width: 50%;float: right"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$("#slideleft button").click(function(){
var $lefty = $(this).next();
$lefty.animate({
left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0
});
});
4、右侧横向滑动Slide to right
Html代码
div id="slidemarginleft" class="slide" style="width: 60%;float: left"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$("#slidemarginleft button").click(function(){
var $marginlefty = $(this).next();
$marginlefty.animate({
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0
});
});
一、原理及实现方法如下：
1、当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY；
2、当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。
二、注意：
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
2.禁止滚动
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。
event.preventDefault()。
返回顶部：设置为body的scrollTop为0
滑动效果：animate（Jquery的自定义动画）
$("#returnTop").click(function () {
var speed=200;//滑动的速度
$('body,html').animate({ scrollTop: 0 }, speed);
return false;
});
备注：returnTop为触发返回顶部的元素ID
1
2
3
4
5
6
var a = $('#你的div id');
a.slideDown("slow");
语法：
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
