十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
返回顶部:设置为body的scrollTop为0
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟主机、营销软件、网站建设、四子王网站维护、网站推广。
滑动效果:animate(Jquery的自定义动画)
$("#returnTop").click(function () {
var speed=200;//滑动的速度
$('body,html').animate({ scrollTop: 0 }, speed);
return false;
});
备注:returnTop为触发返回顶部的元素ID
jquery手机触屏左右滑动切换栏目
$(function(){
TouchSlide({
slideCell:"#slideBox",
titCell:".myhd
ul",
//开启自动分页
autoPage:true
,此时设置
titCell
为导航元素包裹层
mainCell:".bd
ul",
effect:"leftLoop",
autoPage:true,//自动分页
autoPlay:true
//自动播放
});
div
id="slideBox"
class="slideBox"
div
class="bd"
ul
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news1.png"
//a
a
class="tit"
href="#"墨西哥教师罢工
与警察激烈冲突/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news2.jpg"//a
a
class="tit"
href="#"日右翼游行纪念钓岛"国有化"周年/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news3.jpg"//a
a
class="tit"
href="#"女兵竞选美国小姐鼓励女性自强/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news4.jpg"//a
a
class="tit"
href="#"济南现“最窄人行道”
仅0.2米宽/a
/li
/ul
/div
div
class="myhd"
ul
style="height:
28px;"/ul
/div
/div
一、原理及实现方法如下:
1、当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY;
2、当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。
二、注意:
手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
2.禁止滚动
preventDefault是阻止默认行为,touch事件的默认行为就是滚动。
event.preventDefault()。
引入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
});
});
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数:
$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)
speed参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback参数是在该函数完成之后被执行的函数名称。
实例$(".flip").click(function(){$(".panel").slideDown();});