返回頂部：設(shè)置為body的scrollTop為0
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、四子王網(wǎng)站維護、網(wǎng)站推廣。
滑動效果：animate（Jquery的自定義動畫）
$("#returnTop").click(function?()?{
var?speed=200;//滑動的速度
$('body,html').animate({?scrollTop:?0?},?speed);
return?false;
});
備注：returnTop為觸發(fā)返回頂部的元素ID
jquery手機觸屏左右滑動切換欄目
$(function(){
TouchSlide({
slideCell:"#slideBox",
titCell:".myhd
ul",
//開啟自動分頁
autoPage:true
，此時設(shè)置
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"http://a
a
class="tit"
href="#"日右翼游行紀念釣島"國有化"周年/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news3.jpg"http://a
a
class="tit"
href="#"女兵競選美國小姐鼓勵女性自強/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news4.jpg"http://a
a
class="tit"
href="#"濟南現(xiàn)“最窄人行道”
僅0.2米寬/a
/li
/ul
/div
div
class="myhd"
ul
style="height:
28px;"/ul
/div
/div
一、原理及實現(xiàn)方法如下：
1、當開始一個touchstart事件的時候，獲取此刻手指的橫坐標startX和縱坐標startY；
2、當觸發(fā)touchmove事件時，在獲取此時手指的橫坐標moveEndX和縱坐標moveEndY;最后，通過這兩次獲取的坐標差值來判斷手指在手機屏幕上的滑動方向。
二、注意：
手指在滑動整個屏幕時，會影響瀏覽器的行為，比如滾動和縮放。所以在調(diào)用touch事件時，要注意禁止縮放和滾動。
1.禁止縮放?
通過meta元標簽來設(shè)置。
2.禁止?jié)L動?
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、左側(cè)橫向交替滑動 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、左側(cè)橫向交替滑動 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、右側(cè)橫向滑動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 滑動函數(shù) - slideDown, slideUp, slideToggle
jQuery 擁有以下滑動函數(shù)：
$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)
speed參數(shù)可以設(shè)置這些值："slow", "fast", "normal" 或毫秒。
callback參數(shù)是在該函數(shù)完成之后被執(zhí)行的函數(shù)名稱。
實例$(".flip").click(function(){$(".panel").slideDown();});
重慶分公司
重慶分公司
