基于mootools1.3框架下的图片滑动

效果预览如下:我只测试了ie8,9 和火狐，不保证其他浏览器能运行，sorry!

实现原理:
   容器采用相对定位,图片采用绝对定位,当鼠标移动到相应的图片上,改变去left属性,用tween实现动画效果.

代码分析:写一个picSlider类实现代码封装

  
    

   
      
   
     <
   
     div 
   
     id
   
     ="container"
   
     >
   
     
 
   
     <
   
     img 
   
     src
   
     ="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg"
   
      alt
   
     =""
   
      
   
     />
   
     
 
   
     <
   
     img 
   
     src
   
     ="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg"
   
      alt
   
     =""
   
      
   
     />
   
     
 
   
     <
   
     img 
   
     src
   
     ="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg"
   
      alt
   
     =""
   
      
   
     />
   
     
 
   
     <
   
     img 
   
     src
   
     ="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg"
   
      alt
   
     =""
   
      
   
     />
   
     
 
   
     <
   
     img 
   
     src
   
     ="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song5.jpg"
   
      alt
   
     =""
   
      
   
     />
   
     
 
   
     </
   
     div
   
     >
  
    

CSS样式

  
    

   
      #container
   
     {
   
     width
   
     :
   
     459px
   
     ;
   
      height
   
     :
   
     200px
   
     ;
   
      background-color
   
     :
   
     Black
   
     ;
   
     position
   
     :
   
     relative
   
     ;
   
     overflow
   
     :
   
     hidden
   
     ;
   
     }
   
     
 #container img
   
     {
   
     position
   
     :
   
     absolute
   
     ;
   
      width
   
     :
   
     360px
   
     ;
   
     height
   
     :
   
     300px
   
     ;
   
     display
   
     :
   
     block
   
     ;
   
     top
   
     :
   
     0
   
     ;
   
     width
   
     :
   
     280px
   
     ;
   
     height
   
     :
   
     200px
   
     ;
   
     }
   
      
  
    

JS:picSlider类

  
    

   
     var
   
      picSlider 
   
     =
   
      
   
     new
   
      Class({
 Implements: Options,
 options: {
 container: 
   
     "
   
     container
   
     "
   
     ,
 imgsWidth: 
   
     0.6
   
     ,
 },
 initialize: 
   
     function
   
      (options) {
 
   
     this
   
     .setOptions(options);
 
   
     this
   
     .container 
   
     =
   
      $(
   
     this
   
     .options.container);
 
   
     this
   
     .triggers 
   
     =
   
      
   
     this
   
     .container.getElements(
   
     "
   
     img
   
     "
   
     );
 
   
     this
   
     .containerWidth 
   
     =
   
      
   
     this
   
     .container.getSize().x; 
   
     //
   
     get container's width
   
     

   
      
   
     this
   
     .imgWidth 
   
     =
   
      
   
     this
   
     .containerWidth 
   
     *
   
      
   
     this
   
     .options.imgsWidth;
 
   
     this
   
     .aveWidth 
   
     =
   
      
   
     this
   
     .containerWidth 
   
     /
   
      
   
     this
   
     .triggers.length;
 
   
     this
   
     .newAveWidth 
   
     =
   
      (
   
     this
   
     .containerWidth 
   
     -
   
      
   
     this
   
     .imgWidth) 
   
     /
   
      (
   
     this
   
     .triggers.length 
   
     -
   
      
   
     1
   
     );
 
   
     this
   
     .setImgsInit(); 
   
     //
   
     初始化图片展示
   
     

   
      
   
     this
   
     .start(); 
 },
 setImgsInit:
   
     function
   
     (){
 
   
     for
   
     (
   
     var
   
      i
   
     =
   
     0
   
     ;i
   
     <
   
     this
   
     .triggers.length;i
   
     ++
   
     ){
 
   
     this
   
     .triggers[i].setStyle(
   
     "
   
     left
   
     "
   
     ,i
   
     *
   
     this
   
     .aveWidth);
 }
 },
 start:
   
     function
   
     (){
 
   
     for
   
     (
   
     var
   
      i
   
     =
   
     0
   
     ;i
   
     <
   
     this
   
     .triggers.length;i
   
     ++
   
     ){
 
   
     this
   
     .triggers[i].set(
   
     "
   
     tween
   
     "
   
     ,{property:
   
     "
   
     left
   
     "
   
     ,duration:
   
     300
   
     , fps:
   
     80
   
     }); 
   
     //
   
     为每个元素设置动画参数
   
     

   
      
   
     this
   
     .triggers[i].addEvent(
   
     "
   
     mouseover
   
     "
   
     ,
   
     this
   
     .slider.bindWithEvent(
   
     this
   
     ,[i]));
   
     //
   
     绑定slider函数 
   
     

   
      }
 },
 slider:
   
     function
   
     (e,at){
 e.stop();
 
   
     for
   
     (
   
     var
   
      i
   
     =
   
     1
   
     ;i
   
     <
   
     this
   
     .triggers.length;i
   
     ++
   
     ){
 
   
     if
   
     (i
   
     <=
   
     at){
 
   
     this
   
     .triggers[i].get(
   
     "
   
     tween
   
     "
   
     ).start(i
   
     *
   
     this
   
     .newAveWidth);
 }
   
     else
   
     {
 
   
     this
   
     .triggers[i].get(
   
     "
   
     tween
   
     "
   
     ).start(
   
     this
   
     .imgWidth
   
     +
   
     (i
   
     -
   
     1
   
     )
   
     *
   
     this
   
     .newAveWidth);
 }
 }
 }
});

   
     new
   
      picSlider();
  
    

如果想直接在本地运行,请引入
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js"></script>
 <script type="text/javascript" src="home.js"></script>这个脚本必须在<div><div>后面，原因不解释！
第一次发表文章，不好之处，请大家谅解！

请问哪位朋友知道怎么在效果预览里面引入JS框架，好像不支持！有知道的吗？