Deji saamaynta gujinta sumadda gantaalka jquery dib ugu laabo koodhka sare ee JS

wadaag sidaWordPressHirgeli saamaynta "gujista gantaalka si aad ugu noqoto xagga sare" mawduuca.

• Haddii aad tahay whiz WordPress, waxaad taqaanaa sida loo geeyo mawduuca WordPress.
• Maqaalkani sidoo kale wuu ku habboon yahaydhisa websitebilow.

Koritaanka Gantaalka ee Ku laabo Sawirka Sare

Horay u soo deji sawirka kore, waxaa lagu talinayaa in lagu dhejiyo galka sawirada hoostiisa hagaha mawduuca.

Tallaabada 1: Soo rar faylasha jQuery maktabadda

• Soo rar faylka maktabadda jQuery, haddii mawduuca WordPress mar hore la raray, waxaad iska indho tiri kartaa tallaabadan;

WordPress wuxuu soo bandhigayaa qaybta 3aad ee jQuery maktabadda, fadlan hubi casharkan ▼

Sida loo soo dejiyo maktabadda jQuery? WordPress wuxuu soo bandhigayaa qaybta 3aad ee jQuery maktabadda

WordPress waxay la socotaa maktabadda jQuery, laakiin maktabadeeda jQuery wax yar ayaa wax laga beddelay.Haddii aad barato isticmaalka, waxaa laga yaabaa inaadan awoodin inaad gaarto qaar ka mid ah saameynta jQuery.Maktabada jQuery inta badan waa 50-90kb weyn, haddii martigeliyahaagu aanu ahayn mid wax qabad leh, markaa mareegahaagu waa uu buuxsamaa...

Talaabada 2: Kudar koodka faylka footer.php

Ku dar summada soo socota meesha u dhiganta ee mawduuca footer.php ▼

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

Tallaabada 3: Ku dar Koodhka Faylka CSS

Ku dar koodka CSS ee soo socda faylka style.css mawduuca ▼

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

Tallaabada 4: Ku soo celi koodhka sare ee JS

Koodhka js ee soo socda, waxaad abuuri kartaa fayl kale oo js ah;

ama ku biir faylka js ee khuseeya mawduuca jira (lagu taliyay);

ama waxaad ku duubi kartaa footer.php Dhexdhexaad ▼

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