JavaScript 操作图片

1. 使用几个图片的翻转

下面是一种最简单、没有使用任何缓存机制的方法：

 

    
<
script type
=
"
text/javascript
"
>

        
function
 rollover(img, url) {
            document.images[img].src 
=
 url;
        }
    
<
/
script>

 

THML的代码如下所示：

    
<
a 
href
="contact.html"
 onmouseover
="rollover('contact','but_contact_on.gif')"
 onmouseout
="rollover('contact','but_contact.gif')"
>

        
<
img 
src
="but_contact.gif"
 name
="contact"
 width
="103"
 height
="28"
 alt
="Contact Us"

            border
="0"
 
/>

    
</
a
>

 

这段代码没有使用缓存机制，默认显示but_contact.gif，onmouseover事件发生时，会加载but_contact_on.gif并显示，如果图片比较大，用户可能就看不到这个图片了。所以，如果要在网页中动态使用图片来实现翻转或者幻灯片效果，需要把已加装过的图片放到浏览器的缓冲区中以给访问者一种平滑流畅的体验。这不是个好办法。Daniel Nolan提出了另外一种方法：

 

    
<
script type
=
"
text/javascript
"
>

    
/*
a new object ro is initialized, with following properties
*/

        ro 
=
 {
            rollClass: 
'
roll
'
,
            overSrcAddOn: 
'
_on
'
,
            preLoads: [],                   
//
 preLoads is an emptry array;


            init: 
function
 () {             
//
 init is a fuction 


                
var
 oversrc;
                
var
 imgs 
=
 document.images;
                
for
 (
var
 i 
=
 
0
; i 
<
 imgs.length; i
++
) {
                    
if
 (
!
DOMhelp.cssjs(
'
check
'
, imgs[i], ro.rollClass)) { 
continue
; }       
//
 check wether the img element supports roll class: if not continue


                    oversrc 
=
 imgs[i].src.toString().replace(
'
.
'
, ro.overSrcAddOn 
+
 
'
.
'
);   
//
, if yes get the src property value of the img element;


                    ro.preLoads[i] 
=
 
new
 Image();                                           
//
 create a new Image to preload the image file;


                    ro.preLoads[i].src 
=
 oversrc;
                    DOMhelp.addEvent(imgs[i], 
'
mouseover
'
, ro.roll, 
false
);                 
//
register event handler for these img element;


                    DOMhelp.addEvent(imgs[i], 
'
mouseout
'
, ro.roll, 
false
);
                }
            },
            roll: 
function
 (e) {            
//
 roll is also a function


                
var
 t 
=
 DOMhelp.getTarget(e);
                
var
 s 
=
 t.src;
                
var
 s 
=
 s.replace(
/
.*\
//
g, '');


                
if
 (e.type 
==
 
'
mouseover
'
) {
                    t.src 
=
 s.replace(
'
.
'
, ro.overSrcAddOn 
+
 
'
.
'
);                          
//
 if it is mouseover event, use the xxx_on.gif ;


                }
                
if
 (e.type 
==
 
'
mouseout
'
) {
                    t.src 
=
 s.replace(ro.overSrcAddOn 
+
 
'
.
'
, 
'
.
'
);                          
//
 if it is mouseout event, use the xxx.gif;


                }
            }
        }
        DOMhelp.addEvent(window, 
'
load
'
, ro.init, 
false
);                                   
//
 when window.load event happens, call ro.init function;


    
<
/
script>

这两种是使用多个图片来实现翻转效果的。下面介绍其他的方法。 

2. 使用一张图片的翻转

CSS的:hover 伪类是很有用的，使用background-position属性改变图片的位置，那么当mouseover时显示图片的左半部分，mouseout时显示图片的右半部分，就可以实现翻转效果了。下面是CSS代码：

 

 

    <style type="text/css">
        body
{

            font-family
:
arial,sans-serif
;

            font-size
:
.9em
;

        
}

        p img
{

            vertical-align
:
bottom
;

        
}

        h1
{

            font-size
:
1.2em
;

        
}

        #nav,#nav *
{

            margin
:
0
;

            padding
:
0
;

            list-style
:
none
;

        
}


        #nav a
{

            display
:
block
;

            text-align
:
center
;

            text-transform
:
uppercase
;

            text-decoration
:
none
;

            color
:
#000
;

            width
:
103px
;
                
/*
constrain the width of the <a> element, otherwise all image will show up
*/

            padding-top
:
6px
;

            height
:
22px
;

            background
:
url(doublebutton.gif) top left no-repeat #ccc
;

        
}

        #nav a:hover
{

            background-position
:
-103px 0
;

        
}

    </style>

 

 

3. 父元素的翻转

 

    
<
script type
=
"
text/javascript
"
>

        pr 
=
 {
            navId: 
'
nav
'
,
            navHeight: 
50
,                                              
//
 the height of each row;


            currentLink: 
'
current
'
,
            init: 
function
 () {
                
if
 (
!
document.getElementById 
||
 
!
document.createTextNode) { 
return
; }
                pr.nav 
=
 document.getElementById(pr.navId);
                
if
 (
!
pr.nav) { 
return
; }
                
var
 lis 
=
 document.getElementsByTagName(
'
li
'
);              
//
get all <li> element


                
for
 (
var
 i 
=
 
0
; i 
<
 lis.length; i
++
) {
                    
if
 (lis[i].getElementsByTagName(
'
strong
'
).length 
>
 
0
 
||
 DOMhelp.cssjs(
'
check
'
, lis[i], pr.currentLink)) {
                        pr.current 
=
 i;
                    }
                    lis[i].index 
=
 i;                                       
//
 get the index for the specified <li> element


                    DOMhelp.addEvent(lis[i], 
'
mouseover
'
, pr.roll, 
false
);
                    DOMhelp.addEvent(lis[i], 
'
mouseout
'
, pr.roll, 
false
);
                }
            },
            roll: 
function
 (e) {
                
var
 pos;
                
var
 t 
=
 DOMhelp.getTarget(e);
                
while
 (t.nodeName.toLowerCase() 
!=
 
'
li
'
 
&&
 t.nodeName.toLowerCase() 
!=
 
'
body
'
) {
                    t 
=
 t.parentNode;
                }
                pos 
=
 e.type 
==
 
'
mouseover
'
 
?
 t.index : pr.current;
                pos 
=
 pos 
*
 pr.navHeight;                                  
//
 based on the event target, calculate the position of the image;


                pr.nav.style.backgroundPosition 
=
 
'
0 -
'
 
+
 pos 
+
 
'
px
'
;      
//
 set the background position;


            }
        }
        DOMhelp.addEvent(window, 
'
load
'
, pr.init, 
false
);
    
<
/
script>