Untitled Page 效果预览如下:


实现原理:
   容器采用相对定位,图片采用绝对定位,当鼠标移动到相应的图片上,改变去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.getElementsByTagName("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框架，好像不支持！有知道的吗？

作者: !nothing 发表于 2011-04-21 21:23 原文链接

关键字 基于mootools1.3框架下的图片滑动
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架