使用mootools1.3框架怎么實現一個圖片滑動效果

本篇文章給大家分享的是有關使用mootools1.3框架怎么實現一個圖片滑動效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

實現原理:

容器采用相對定位,圖片采用絕對定位,當鼠標移動到相應的圖片上,改變去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; backgroundcolor: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>

以上就是使用mootools1.3框架怎么實現一個圖片滑動效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。