onmouseover 事件缩略图片滑动修正版

最新推荐文章于 2024-01-24 09:47:05 发布

weixin_34088583

最新推荐文章于 2024-01-24 09:47:05 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/562035

本文介绍了一个使用HTML、CSS和JavaScript实现的网页设计案例，主要内容包括一个带有动画效果的导航栏和轮播图。通过鼠标悬停事件触发元素移动，实现了平滑过渡效果。

 
    
         #slideshow{
         width
         :
         100px
         ;
         height
         :
         100px
         ;
         position
         :
         relative
         ; 
         overflow
         :
         hidden
         ;} 
        

  

 
   
         <!DOCTYPE html>
        
 
         <
         html 
         lang
         =
         "en"
         > 
        
 
         <
         head
         > 
        
 
         <
         meta 
         charset
         =
         "utf-8"
         > 
        
 
         <
         title
         >Web Design</
         title
         > 
        
 
         <
         script 
         src
         =
         "addLoadEvent.js"
         ></
         script
         > 
        
 
         <
         link 
         rel
         =
         "stylesheet" 
         type
         =
         "text/css" 
         href
         =
         "10.2.css" 
         > 
        
 
         <
         script 
         src
         =
         "10.2.js"
         ></
         script
         >  
        
 
         </
         head
         > 
        
 
         <
         body
         > 
        
 
         <
         h1
         >Web Design</
         h1
         > 
        
 
         <
         p
         >These are the things you should know.</
         p
         > 
        
 
         <
         ol 
         id
         =
         "linklist"
         > 
        
 
         <
         li
         ><
         a 
         href
         =
         "structure.html"
         >Structure</
         a
         ></
         li
         > 
        
 
         <
         li
         ><
         a 
         href
         =
         "presentation.html"
         >Presentation</
         a
         ></
         li
         > 
        
 
         <
         li
         ><
         a 
         href
         =
         "behavior.html"
         >Behavior</
         a
         ></
         li
         > 
        
 
         </
         ol
         > 
        
 
         <
         div 
         id
         =
         "slideshow"
         > 
        
 
         <
         img 
         src
         =
         "topics.gif" 
         alt
         =
         "building bolcks of web design" 
         id
         =
         "preview" 
         /> 
        
 
         </
         div
         > 
        
 
         </
         body
         > 
        
 
         </
         html
         > 
        

  

 
         function 
         addLoadEvent(func){    
         //不管在页面加载完毕执行多少个函数，都应付自如 
        
         var 
         oldonload = window.onload; 
        
         if
         (
         typeof 
         window.onload != 
         'function'
         ){ 
        
         window.onload = func;
        
         }
         else
         { 
        
         window.onload = 
         function
         (){ 
        
         oldonload();
        
         func();
        
         }
        
         }
        
         }
        
         function 
         moveElement(elementID,final_x,final_y,interval){ 
        
         if
         (!document.getElementById) 
         return 
         false
         ; 
        
         if
         (!document.getElementById(elementID)) 
         return 
         false
         ; 
        
         var 
         elem = document.getElementById(elementID); 
        
         if
         (elem.movement){              
        
         clearTimeout(elem.movement);      
         //进行复位，防止动画效果产生滞后 
        
         }
        
         var 
         xpos = parseInt(elem.style.left); 
         //parseInt(string)把字符串里面的数值信息提取出来，因为后面要进行很多算术比较操作。 
        
         var 
         ypos = parseInt(elem.style.top);  
         //parseFloat(string)可以把带小数的数值（也就是浮点数）提取出来。 
        
         if
         (xpos == final_x && ypos == final_y){ 
        
         return 
         true
         ; 
        
         }
        
         if
         (xpos < final_x){ xpos++;}       
         //如果xpos小于终点的left,给它加1. 
        
         if
         (xpos > final_x){ xpos--;}       
         //如果xpos大于终点的left,给它减1. 
        
         if
         (ypos < final_y){ ypos++;}       
         //如果ypos小于终点的left,给它加1. 
        
         if
         (ypos > final_y){ ypos--;}       
         //如果ypos大于终点的left,给它减1. 
        
         elem.style.left = xpos + 
         "px"
         ; 
        
         elem.style.top = ypos + 
         "px"
         ; 
        
         //var  repeat = function() {moveElement(elementID, final_x,final_y,interval)} 
        
         var 
         repeat = 
         "moveElement('" 
         + elementID + 
         "'," 
         + final_x + 
         "," 
         + final_y + 
         "," 
         + interval + 
         ")"
         ;  
        
         elem.movement = setTimeout(repeat,interval); 
         //为元素创建属性movement，element.property = value; 
        
         }
        
         function 
         prepareSlideshow(){ 
        
         //确保浏览器支持DOM方法。
        
         if
         (!document.getElementsByTagName) 
         return 
         false
         ; 
        
         if
         (!document.getElementById) 
         return 
         false
         ; 
        
         //确保元素存在。
        
         if
         (!document.getElementById(
         "linklist"
         )) 
         return 
         false
         ; 
        
         if
         (!document.getElementById(
         "preview"
         )) 
         return 
         false
         ; 
        
         //为图片应用样式。
        
         var 
         preview = document.getElementById(
         "preview"
         ); 
        
         preview.style.position = 
         "absolute"
         ; 
        
         preview.style.left = 
         "0px"
         ; 
        
         preview.style.top = 
         "0px"
         ; 
        
         //取得列表中所有链接。
        
         var 
         list = document.getElementById(
         "linklist"
         ); 
        
         var 
         links = list.getElementsByTagName(
         "a"
         ); 
        
         //为mouseover事件添加动画效果。
        
         links[0].onmouseover = 
         function
         (){ 
        
         moveElement(
         "preview"
         ,-100,0,10); 
        
         }
        
         links[1].onmouseover = 
         function
         (){ 
        
         moveElement(
         "preview"
         ,-200,0,10); 
        
         }
        
         links[2].onmouseover = 
         function
         (){ 
        
         moveElement(
         "preview"
         ,-300,0,10); 
        
         }
        
         }
        
         addLoadEvent(prepareSlideshow);