Hvordan lage en meny kan forankres med Javascript
Hvis du ønsker å vise menyen som en stilig rad med bilder du kan bla gjennom og klikke på, må du gjennomføre en Javascript-dokkmenyen. Når du plasserer musepekeren over en av de små bildene, utvider det og du kan klikke den for å navigere til en annen side. En dokkbare menyen script er nyttig for å legge til funksjoner til ditt nettsted. Videre vises det riktig i alle nettlesere, og du kan bruke den hvor som helst på sidene dine.
Bruksanvisning
1 Åpne et tekstredigeringsprogram, for eksempel Notisblokk eller WordPad å opprette et nytt tekstdokument.
2 Sett inn denne koden inne redaktøren:
funksjon MacStyleDock (node, imageDetails, minimumSize, maximumSize, range) {
Var iconsNode = document.createElement ( 'div');
node.appendChild (iconsNode);
Var reflectedIconsNode = document.createElement ( 'div');
node.appendChild (reflectedIconsNode);
iconsNode.style.textAlign = 'sentrum';
reflectedIconsNode.style.textAlign = 'sentrum';
iconsNode.style.height = maximumSize + 'px';
reflectedIconsNode.style.height = maximumSize + 'px';
Var maximumWidth = 0;
Var skala = 0;
var closeTimeout = null;
Var closeInterval = null;
Var openInterval = null;
var images = [];
Var iconNodes = [];
Var reflectedIconNodes = [];
Var iconSizes = [];
for (var i = 0; i <imageDetails.length; i ++) {
iconNodes[i] = document.createElement('img');
iconNodes[i].style.position = 'relative';
iconSizes[i] = minimumSize;
reflectedIconNodes[i] = document.createElement('img');
updateIconProperties(i);
iconsNode.appendChild(iconNodes[i]);
reflectedIconsNode.appendChild(reflectedIconNodes[i]);
if (iconNodes[i].addEventListener){
iconNodes[i].addEventListener('mousemove', processMouseMove, false);
iconNodes[i].addEventListener('mouseout', processMouseOut, false);
iconNodes[i].addEventListener('click', imageDetails[i].onclick, false);
}else if (iconNodes[i].attachEvent){
iconNodes[i].attachEvent('onmousemove', processMouseMove);
iconNodes[i].attachEvent('onmouseout', processMouseOut);
iconNodes[i].attachEvent('onclick', imageDetails[i].onclick);
}
for (var j = 0; j < imageDetails[i].sizes.length; j++){
var image = document.createElement('img');
image.setAttribute(
'src',
imageDetails[i].name
+ imageDetails[i].sizes[j]
+ imageDetails[i].extension);
images.push(image);
}
}
funksjons updateIconProperties (indeks) {
var size = minimumSize + scale * (iconSizes[index] - minimumSize);
var sizeIndex = 0;
while (imageDetails[index].sizes[sizeIndex] < size
&& sizeIndex + 1 < imageDetails[index].sizes.length){
sizeIndex++;
}
if (size == maximumSize){
iconNodes[index].setAttribute('src',
imageDetails[index].name
+ maximumSize
+ '-full'
+ imageDetails[index].extension);
}else{
iconNodes[index].setAttribute('src',
imageDetails[index].name
+ imageDetails[index].sizes[sizeIndex]
+ imageDetails[index].extension);
}
reflectedIconNodes[index].setAttribute('src',
imageDetails[index].name
+ imageDetails[index].sizes[sizeIndex]
+ '-reflection'
+ imageDetails[index].extension);
iconNodes[index].setAttribute('width', size);
iconNodes[index].setAttribute('height', size);
reflectedIconNodes[index].setAttribute('width', size);
reflectedIconNodes[index].setAttribute('height', size);
iconNodes[index].style.marginTop = (maximumSize - size) + 'px';
reflectedIconNodes[index].style.marginBottom = (maximumSize - size) + 'px';
}
3 Tilføy denne koden:
funksjon processMouseMove (e) {
window.clearTimeout(closeTimeout);
closeTimeout = null;
window.clearInterval(closeInterval);
closeInterval = null;
if (scale != 1 && !openInterval){
openInterval = window.setInterval(
function(){
if (scale < 1) scale += 0.125;
if (scale >= 1){
scale = 1;
window.clearInterval(openInterval);
openInterval = null;
}
for (var i = 0; i < iconNodes.length; i++){
updateIconProperties(i);
}
},
20);
}
Hvis e = window.event (e!);
var target = e.target || e.srcElement;
var index = 0;
while (iconNodes[index] != target) index++;
var across = (e.layerX || e.offsetX) / iconSizes[index];
if (across){
var currentWidth = 0;
for (var i = 0; i < iconNodes.length; i++){
if (i < index - range || i > index + range){
iconSizes[i] = minimumSize;
}else if (i == index){
iconSizes[i] = maximumSize;
}else if (i < index){
iconSizes[i] =
minimumSize
+ Math.round(
(maximumSize - minimumSize - 1)
* (
Math.cos(
(i - index - across + 1) / range * Math.PI)
+ 1)
/ 2);
currentWidth += iconSizes[i];
}else{
iconSizes[i] =
minimumSize
+ Math.round(
(maximumSize - minimumSize - 1)
* (
Math.cos(
(i - index - across) / range * Math.PI)
+ 1)
/ 2);
currentWidth += iconSizes[i];
}
}
if (currentWidth > maximumWidth) maximumWidth = currentWidth;
if (index >= range
&& index < iconSizes.length - range
&& currentWidth < maximumWidth){
iconSizes[index - range] += Math.floor((maximumWidth - currentWidth) / 2);
iconSizes[index + range] += Math.ceil((maximumWidth - currentWidth) / 2);
}
for (var i = 0; i < iconNodes.length; i++) updateIconProperties(i);
}
}
fungere processMouseOut () {
if (!closeTimeout && !closeInterval){
closeTimeout = window.setTimeout(
function(){
closeTimeout = null;
if (openInterval){
window.clearInterval(openInterval);
openInterval = null;
}
closeInterval = window.setInterval(
function(){
if (scale > 0) scale -= 0.125;
if (scale <= 0){
scale = 0;
window.clearInterval(closeInterval);
closeInterval = null;
}
for (var i = 0; i < iconNodes.length; i++){
updateIconProperties(i);
}
},
20);
},
100);
}
}
}
4 Lagre filen i mappen som inneholder HTML-siden du vil sette inn dock i og gi den navnet "dockable_menu.js". Den "JS" forlengelse er obligatorisk å endre fil fra et tekstdokument til en Javascript-fil.
5 Åpne nettsiden i tekst eller HTML-editor. Sett inn denne koden mellom "<head>" og "</ head>" koder for å utføre skriptet:
<Script type = "text / javascript" src = "dockable_menu.js"> </ script>
6 Sett inn denne koden hvor som helst mellom "<body>" og "</ body>" tags:
<Div id = "dock"> </ div>
Dokken må settes inn i denne DIV struktur.
7 Sett inn denne koden mellom "<div id =" dock ">" og "</ div>" tags:
<Script type = "text / javascript">
Var dock = new MacStyleDock (
document.getElementById('dock'),
[
{
name : 'image1',
extension : '.jpg',
sizes : [32, 64],
onclick : function(){
window.location = 'www.example.com';
}
},
{
name : 'image2',
extension : '.bmp',
sizes : [32, 64],
onclick : function(){
alert('You clicked on the wrong icon');
}
}
],
32,
64,
2);
</ Script>
Du kan sette inn så mange elementer mellom "[" og "]" tags som du ønsker. Erstatt "image1" med det nøyaktige navnet på bildet, uten dens forlengelse. Erstatt ".jpg" med utvidelsen av bildet. I "størrelser" linje, erstatte "32" med bildets minste pikselstørrelse og "64" med bildet maksimale pikselstørrelse. Bruk "window.location" i "funksjonen" -funksjonen til å knytte bildet til en webside og "varsle" hvis du bare vil vise en melding. Erstatt "32" og "64" under "]" tag med minimum og maksimum størrelse på dine dock ikoner. Erstatt "2" med antallet ikoner du har i dokken din.
8 Lagre nettsiden og legger det i din nettleser for å teste ein annan menyen.