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.
Core JavaScript code: Click here to view DEMO
//@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/
Statement: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