Itakda ang epekto ng pag-click sa icon ng rocket na jquery scroll pabalik sa tuktok na JS code

ibahagi kung paanoWordPressIpatupad ang epekto ng "pag-click sa rocket upang bumalik sa tuktok" sa tema.

• Kung ikaw ay isang WordPress whiz, alam mo kung paano i-port ito sa isang WordPress theme.
• Ang artikulong ito ay angkop dinBumuo ng istasyonbaguhan

Pag-akyat ng Rocket Bumalik sa Itaas na Larawan

I-download ang imahe sa itaas nang maaga, inirerekumenda na ilagay ito sa folder ng mga imahe sa ilalim ng direktoryo ng tema.

Hakbang 1: I-load ang mga file ng library ng jQuery

• I-load ang jQuery library file, kung na-load na ang WordPress theme, maaari mong balewalain ang hakbang na ito;

Ipinakilala ng WordPress ang 3rd party na jQuery library, pakitingnan ang tutorial na ito ▼

Paano mag-download ng jQuery library? Ipinakilala ng WordPress ang 3rd party na jQuery library

Ang WordPress ay kasama ng jQuery library, ngunit ang sarili nitong jQuery library ay bahagyang binago.Kung matutunan mong gamitin ito, maaaring hindi mo magawang makamit ang ilang mga epekto ng jQuery.Ang isang library ng jQuery ay karaniwang 50-90kb malaki, kung ang iyong host ay hindi masyadong gumaganap, pagkatapos ay naglo-load ang iyong website...

Hakbang 2: Magdagdag ng code sa footer.php file

Idagdag ang sumusunod na code sa kaukulang lokasyon sa theme footer.php ▼

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

Hakbang 3: Magdagdag ng Code sa CSS File

Idagdag ang sumusunod na CSS code sa style.css file ng tema ▼

.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;}

Hakbang 4: Idagdag pabalik sa itaas na JS code

Para sa sumusunod na js code, maaari kang lumikha ng isa pang js file;

o pagsamahin ito sa nauugnay na js file ng isang umiiral na tema (inirerekomenda);

o maaari mo itong balutin sa footer.php Katamtaman ▼

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();