Home > Web Front-end > JS Tutorial > A simple js mouseover switching effect_javascript skills

A simple js mouseover switching effect_javascript skills

WBOY
Release: 2016-05-16 18:24:09
Original
1038 people have browsed it

I wrote a simple switching effect for a friend last time. It is super simple, but also quite applicable. Because it uses CSS Sprite technology, the DEMO comes with IE6-compatible png JS.
A simple js mouseover switching effect_javascript skills
Core JavaScript code: Click here to view DEMO

Copy code The code is as follows:

//@Mr.Think Get the object Attribute compatible methods
function $(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);// W3C DOM
} else if (document.all && document.all(objectId)) {
return document.all(objectId);// MSIE 4 DOM
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];// NN 4 DOM..this won't find nested layers
} else {
return false;
}
}
//@Mr .Think switches the display of text and background image positions
function iLeftNav(type) {
var inum,i_navinfo=$("i_navinfo");
if(type=="writeblog"){
inum ="-300px";
}else if(type=="sharepic"){
inum="-600px";
}else if(type=="writemsg"){
inum ="-900px";
}else{
inum="-300px";
}
i_navinfo.innerHTML=$(type).innerHTML;
i_navinfo.style.backgroundPosition=inum " 0";
}
//@Mr.Think is the best way to load the mouse event
window.onload=function(){
var liitem=$("i_blognav").getElementsByTagName("li ");
for(var i=0; iliitem[0].onmouseover=function(){iLeftNav("writeblog")}
liitem[1] .onmouseover=function(){iLeftNav("sharepic")}
liitem[2].onmouseover=function(){iLeftNav("writemsg")}
}
}

This article is a simple mouse over effect, which can also be achieved with CSS, but it is relatively cumbersome. If you need a cooler and more dazzling effect, you can click here to view the bubble prompt effect based on jQuery written by cssrain.
Original text Published on Mr.Think's personal blog: http://mrthink.net/script-mousechange-simple/
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template