Mír Chóid aníos Intinn Scoir i JavaScript Agus jQuery
Ar cheann de na tionscadail a bhfuilim ag obair air don suíomh seo tá div aníos le a CTA a spreagann cuairteoirí nua chun liostáil le Martech Zone trí ríomhphost. Tá forbairt bhreise ar a bhfuilim ag obair ionas gur féidir liom ghiuirléid an modh seo le haghaidh WordPress agus bíodh an rannán rún scoir mar bharra taoibh iarbhír… ach bhí fonn orm an fheidhm jQuery agus an mhír chóid shampla a roinnt a chuidíonn le daoine eile rún imeachta imeacht.
Cad is Intinn Scoir?
Teicníc is ea rún scoir a úsáideann láithreáin ghréasáin chun gluaiseacht luiche úsáideora a rianú agus a bhrath nuair atá an t-úsáideoir ar tí an leathanach a fhágáil. Nuair a bhraitheann an suíomh Gréasáin go bhfuil an t-úsáideoir ag fágáil, féadfaidh sé preabfhuinneog nó teachtaireacht de chineál eile a spreagadh chun iarracht a dhéanamh an t-úsáideoir a choinneáil ar an leathanach nó iad a mhealladh chun filleadh ar ais níos déanaí.
Teicneolaíocht rún scoir úsáideann JavaScript chun gluaiseachtaí luiche a rianú agus a chinneadh nuair atá úsáideoir ar tí leathanach a fhágáil. Nuair a bhraitheann an láithreán gréasáin go bhfuil an t-úsáideoir ar tí imeacht, féadfaidh sé teachtaireacht aníos a thaispeáint, beart speisialta a thairiscint, nó dreasacht de chineál éigin eile a sholáthar chun an t-úsáideoir a spreagadh chun fanacht ar an leathanach nó filleadh ar ais níos déanaí.
Is minic a úsáideann suíomhanna gréasáin ríomhthráchtála rún scoir chun iarracht a dhéanamh cosc tréigean cart siopadóireachta nó margaí speisialta agus lascainí a chur chun cinn do chustaiméirí atá ar tí imeacht ón suíomh. Is féidir le láithreáin ghréasáin ábhair é a úsáid freisin chun clárú nuachtlitreach a chur chun cinn nó chun úsáideoirí a spreagadh chun an suíomh a leanúint ar na meáin shóisialta.
Feidhm luchóg na luiche JavaScript
D'fhonn a thuiscint conas mouseleave
oibreacha, tá sé ina chuidiú fios a bheith agat conas a láimhseáiltear imeachtaí luch i gcoitinne. Nuair a bhogann tú do luch thar leathanach gréasáin, spreagtar sraith imeachtaí ag an mbrabhsálaí, ar féidir iad a ghabháil agus a láimhseáil le cód JavaScript. Áirítear ar na himeachtaí seo mousemove
, mouseover
, mouseout
, mouseenter
, agus mouseleave
.
An mouseenter
agus mouseleave
imeachtaí cosúil leis an mouseover
agus mouseout
imeachtaí, ach iad féin a iompar beagán difriúil. Cé go mouseover
agus mouseout
truicear nuair a théann an luch isteach nó a fhágann eilimint, faoi seach, spreagann siad freisin nuair a théann an luch isteach nó a fhágann aon eilimint leanbh laistigh den eilimint sin. Is féidir iompar gan choinne a bheith mar thoradh air seo agus tú ag obair le casta HTML struchtúir.
mouseenter
agus mouseleave
ar an láimh eile, ní spreagann imeachtaí ach amháin nuair a théann an luch isteach nó a fhágann an eilimint a bhfuil an t-imeacht ceangailte léi, agus ní spreagann siad nuair a thagann an luch isteach nó nuair a fhágann sé aon eilimintí linbh. Déanann sé seo iad níos intuartha agus níos éasca oibriú leo i go leor cásanna.
An mouseleave
tacaítear leis an imeacht ón gcuid is mó de na brabhsálaithe nua-aimseartha, lena n-áirítear Chrome, Firefox, Safari, agus Edge. Mar sin féin, b’fhéidir nach dtacaíonn roinnt brabhsálaithe níos sine leis, mar Internet Explorer 8 agus níos luaithe.
Blúire Cód Intinn Scoir JavaScript
Cé go mouseleave
cosúil go n-oibríonn sé ar div ar leith, is féidir leat é a chur i bhfeidhm ar leathanach gréasáin iomlán freisin.
Cruthaíonn an cód cód nua div
eilimint ar a dtugtar overlay
a chlúdaíonn an leathanach iomlán agus a bhfuil cúlra dubh leath-trédhearcach aige (teimhneacht 80%). Cuirimid an forleagan seo leis an leathanach in éineacht leis an bpíosa aníos div.
Nuair a spreagann an t-úsáideoir an rún scoir trína luch a bhogadh lasmuigh den leathanach, taispeánaimid an phreabfhuinneog agus an forleagan araon. Cuireann sé seo cosc ar an úsáideoir cliceáil ar aon áit eile ar an leathanach agus an aníos le feiceáil.
Nuair a chliceálann an t-úsáideoir lasmuigh den phreabfhuinneog nó ar an gcnaipe dúnta, folaímid an phreabfhuinneog agus an forleagan chun gnáthfheidhmiúlacht a chur ar ais ar an leathanach.
document.addEventListener('DOMContentLoaded', function() {
// Create a div element with the desired dimensions and styling
var popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.backgroundColor = '#fff';
popup.style.border = '1px solid #ccc';
popup.style.width = '1200px';
popup.style.height = '630px';
popup.style.padding = '20px';
// Create a close button element with the desired styling
var closeButton = document.createElement('span');
closeButton.style.position = 'absolute';
closeButton.style.top = '10px';
closeButton.style.right = '10px';
closeButton.style.fontSize = '24px';
closeButton.style.cursor = 'pointer';
closeButton.innerHTML = '×';
// Add the close button to the popup div
popup.appendChild(closeButton);
// Create an overlay div with the desired styling
var overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
overlay.style.zIndex = '999';
// Add the overlay and popup to the page
document.body.appendChild(overlay);
document.body.appendChild(popup);
// Hide the popup and overlay initially
popup.style.display = 'none';
overlay.style.display = 'none';
// Show the popup and overlay when the user tries to leave the page
document.addEventListener('mouseleave', function(e) {
if (e.clientY < 0) {
popup.style.display = 'block';
overlay.style.display = 'block';
}
});
// Hide the popup and overlay when the user clicks outside of it
document.addEventListener('click', function(e) {
if (!popup.contains(e.target)) {
popup.style.display = 'none';
overlay.style.display = 'none';
}
});
// Hide the popup and overlay when the close button is clicked
closeButton.addEventListener('click', function() {
popup.style.display = 'none';
overlay.style.display = 'none';
});
});
Le haghaidh comhoiriúnacht uasta brabhsálaí, mholfainn jQuery a úsáid chun é seo a chur i bhfeidhm ina ionad sin, áfach.
jQuery Blúire Cód Intinn Scoir
Seo é an gearrthóg cód jQuery, atá i bhfad níos mó ag luí leis na brabhsálaithe go léir (chomh fada agus atá tú ag cur jQuery i do leathanach).
jQuery(document).ready(function() {
// Create a div element with the desired dimensions and styling
var popup = jQuery('<div></div>').css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'transform': 'translate(-50%, -50%)',
'background-color': '#fff',
'border': '1px solid #ccc',
'width': '1200px',
'height': '630px',
'padding': '20px'
});
// Create a close button element with the desired styling
var closeButton = jQuery('<span></span>').css({
'position': 'absolute',
'top': '10px',
'right': '10px',
'font-size': '24px',
'cursor': 'pointer'
}).html('×');
// Add the close button to the popup div
popup.append(closeButton);
// Create an overlay div with the desired styling
var overlay = jQuery('<div></div>').css({
'position': 'fixed',
'top': '0',
'left': '0',
'width': '100%',
'height': '100%',
'background-color': 'rgba(0, 0, 0, 0.8)',
'z-index': '999'
});
// Add the overlay and popup to the page
jQuery('body').append(overlay, popup);
// Hide the popup and overlay initially
popup.hide();
overlay.hide();
// Show the popup and overlay when the user tries to leave the page
jQuery(document).on('mouseleave', function(e) {
if (e.clientY < 0) {
popup.show();
overlay.show();
}
});
// Hide the popup and overlay when the user clicks outside of it
jQuery(document).on('click', function(e) {
if (!jQuery(e.target).closest(popup).length) {
popup.hide();
overlay.hide();
}
});
// Hide the popup and overlay when the close button is clicked
closeButton.on('click', function() {
popup.hide();
overlay.hide();
});
});