完美世界有声小说全集,完结小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

使用mootools1.3框架怎么實(shí)現(xiàn)一個(gè)圖片滑動(dòng)效果

本篇文章給大家分享的是有關(guān)使用mootools1.3框架怎么實(shí)現(xiàn)一個(gè)圖片滑動(dòng)效果，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)公司專注于響水企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城建設(shè)。響水網(wǎng)站建設(shè)公司,為響水等地區(qū)提供建站服務(wù)。全流程定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

實(shí)現(xiàn)原理:

容器采用相對定位,圖片采用絕對定位,當(dāng)鼠標(biāo)移動(dòng)到相應(yīng)的圖片上,改變?nèi)eft屬性,用tween實(shí)現(xiàn)動(dòng)畫效果.

代碼分析:寫一個(gè)picSlider類實(shí)現(xiàn)代碼封裝

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如果想直接在本地運(yùn)行,請引入
以上就是使用mootools1.3框架怎么實(shí)現(xiàn)一個(gè)圖片滑動(dòng)效果，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。            
            
                                                            

                                                網(wǎng)頁題目：使用mootools1.3框架怎么實(shí)現(xiàn)一個(gè)圖片滑動(dòng)效果                                                

                                                瀏覽路徑：http://fisionsoft.com.cn/article/jidiid.html

新聞中心

其他資訊