Khazikitsani zotsatira za kudina chizindikiro cha rocket jquery mpukutu kubwerera ku code yapamwamba ya JS

kugawana bwanjiWordPressLimbikitsani zotsatira za "kudina roketi kuti mubwerere pamwamba" pamutuwu.

• Ngati ndinu WordPress whiz, mukudziwa momwe mungasinthire ku mutu wa WordPress.
• Nkhaniyi ikuyenereransoMangani malo okwererawoyamba.

Rocket Ascent Kubwerera ku Chithunzi Chapamwamba

Tsitsani chithunzi pamwambapa pasadakhale, tikulimbikitsidwa kuti muyike mufoda yazithunzi pansi pa bukhu lamutu.

Gawo 1: Kwezani jQuery laibulale owona

• Kwezani fayilo ya library ya jQuery, ngati mutu wa WordPress watsitsidwa kale, mutha kunyalanyaza sitepe iyi;

WordPress imayambitsa laibulale ya 3rd jQuery, chonde onani phunziro ili ▼

Kodi mungatsitse bwanji laibulale ya jQuery? WordPress imayambitsa laibulale ya 3rd jQuery

WordPress imabwera ndi laibulale ya jQuery, koma laibulale yake ya jQuery imasinthidwa pang'ono.Ngati mutaphunzira kugwiritsa ntchito, simungathe kukwaniritsa zotsatira za jQuery.Laibulale ya jQuery nthawi zambiri imakhala yayikulu 50-90kb, ngati wolandirayo sachita bwino, ndiye kuti tsamba lanu limadzaza ...

Gawo 2: Onjezani kachidindo ku footer.php file

Onjezani kachidindo kotsatira kumalo ofananira nawo pamutuwu footer.php ▼

<div class="one"></div>
<div id="backtotop" style="display:none;"></div>

Gawo 3: Add Code kuti CSS Fayilo

Onjezani kachidindo kotsatira ka CSS ku fayilo yamutu wa style.css ▼

.one {width:100%;height:3000px;}
#backtotop {background:url(images/rocket_up.png) 0px 0px no-repeat;position:fixed;bottom:0px;right:10px;width:149px;height:260px;cursor: pointer;z-index:1000;}

Khwerero 4: Onjezaninso pamwamba pa JS code

Pa js code yotsatira, mutha kupanga fayilo ina ya js;

kapena ayiphatikize mu fayilo yoyenera ya js ya mutu womwe ulipo (womwe ukulimbikitsidwa);

kapena mutha kuzikulunga mu footer.php Wapakati ▼

var scrollTT = {
tTSpeed : 800, // 滚动到顶部的时间
startFlyTime : 1000, // 火箭起飞的时间
restartTime : 1200, // 重置火箭位置的时间
flySpeed : 50, // 火箭向上飞行的速度
obj : $("#backtotop"), // 回到顶部的dom
flyTemp : '', // 一个setInterval的临时变量
/**
* 
* 初始化 scrollTT 函数
* 主要是像对象添加事件
*
*/
init : function( obj, tTSpeed, startFlyTime, restartTime, flySpeed ) {
scrollTT.tTSpeed = scrollTT.tTSpeed || tTSpeed;
scrollTT.startFlyTIme = scrollTT.startFlyTIme || startFlyTime;
scrollTT.restartTime = scrollTT.restartTime || restartTime;
scrollTT.flySpeed = scrollTT.flySpeed || flySpeed;
scrollTT.obj = scrollTT.obj || obj;

// 向window 绑定scroll 事件
scrollTT.onScroll();


scrollTT.obj.click(function(){
// 关闭默认的scroll事件
$(window).off("scroll");
// 页面向上滚动
$('html,body').animate({scrollTop: '0px'}, this.tTSpeed);
// 火箭向上飞行
scrollTT.objFly();
// 火箭的喷气效果
scrollTT.blow();

});

// 鼠标在火箭上的效果
scrollTT.obj.mouseenter(function() {
$(this).css('background-position', '-149px 0px');
});
// 鼠标移开的效果
scrollTT.obj.mouseleave(function() {
$(this).css('background-position', '0px 0px');
});

}, 
/*
* 向window 绑定scroll 事件
*
*/
onScroll : function() {
$(window).on('scroll', function() {
if ($(window).scrollTop()>500){
scrollTT.obj.fadeIn(500);
}else{
scrollTT.obj.fadeOut(1500);
}
});
},
/**
* dom对象向上飞行
*
*/
objFly : function() {
var fly = setTimeout(function(){
scrollTT.obj.animate({top: '-500px'} ,'normal', 'swing');
scrollTT.resetFly();
clearTimeout(fly);
clearInterval(scrollTT.flyTemp);
}, scrollTT.startFlyTime);
},
/**
* dom 对象飞行完毕回到原来的位置
*
*/
resetFly : function() {
var fly2 = setTimeout(function() {
scrollTT.obj.hide();
scrollTT.obj.css("top", 'auto');
scrollTT.obj.css("background-position", '0px 0px');
scrollTT.onScroll();
clearTimeout(fly2);
},scrollTT.restartTime);
},
/**
* dom 对象的喷气效果
*
*/
blow : function() {
var topPosiiton = -149;
scrollTT.flyTemp = setInterval(function() {
topPosiiton += -149;
if(topPosiiton < -743) {
topPosiiton = -149
}
scrollTT.obj.css('background-position', topPosiiton + 'px 0px');
}, this.flySpeed);
}
};

scrollTT.init();