欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 圖片輪換 函數(shù)化繼承

 更新時間:2010年05月18日 01:31:19   作者:  
一直讓我困擾的是,我不知道如何去讓這個效果 自動播放,或者費了很多周折。這可能叫初始化。
先看下前幾天的動畫是如何構(gòu)造JS的:
復(fù)制代碼 代碼如下:

var photo=function(){
var index=0,a,b,c,d;
return {
show:function(){},
auto:function(){}
}
}
var aa=photo();
//基本上是 用return 返回了一些方法。
// 1:無法初始化就執(zhí)行 auto。
// 2:在初始化的時候,我沒辦法把this指向aa。
//上面兩個問題,會很不方便。

1:我不愿意讓自己去這洋寫:
復(fù)制代碼 代碼如下:

var aa=photo("id");
aa.auto()//多一句話,很不好看。

理想狀態(tài)是我在
var aa=photo("id")的時候就告訴程序是否自動播放。
2:如果有兩個動畫在同一個頁面。
比如:
復(fù)制代碼 代碼如下:

var aa=photo("id1");
aa.auto()
var bb=photo("id2");
bb.auto()

那么他們都有用戶控制動畫的A標(biāo)簽,如何各自負(fù)責(zé)自己的動畫。不互相干擾。(其實他涉及到私有變量的問題,還有this指向);

申明:網(wǎng)上有很多解決上面問題的方法。下面的只是我弄明白了。所以來給大家分享,高手見笑了。
不錯,又是在公車上,我解決了這個問題?!秊avascript語言精粹》第52頁 5.4函數(shù)化
我來看一下這個 函數(shù)化構(gòu)造器的源代碼:

//加粗表示強調(diào)
//這個方法是 《javascript語言精粹》第52頁 5.4函數(shù)化 上的。
var constructor = function (spec,my){
var that,其他的私有實例變量;
my = my || {};
把共享的變量和函數(shù)添加到my中
that = 一個新對象
添加給that 的特權(quán)方法
return that;
}

看下面的方法:

復(fù)制代碼 代碼如下:

var photo = function(spec){
var _this={},index,a,c,d;
//這里可以初始化用戶控制的a標(biāo)簽
//比如這洋
a.onmouseover=function(){
_this.go();//可以調(diào)用哦
}
_this.show=function(){};
_this.auto=function(){};
_this.go=function(){};
// 這里可以直接調(diào)用剛才申明好的方法
_this.auto()//可以直接調(diào)用
return _this;
}

var bb=photo({index:1;});
var aa=photo({index:2});
//上面創(chuàng)建了 bb aa 兩個不同的動畫,不會互相影響哦。
// 如果我對javascript語言精粹 的函數(shù)化 理解有問題。還請指教...


最后這個動畫就比較完美了??墒撬接凶兞刻嗔恕H绻梢栽O(shè)置默認(rèn)值,可以使用者選擇性的傳進來。會比較好
所以可以添加下面這個函數(shù):(這是很多人都使用的啦)

復(fù)制代碼 代碼如下:

var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
// 看到 Extend 大家都知道 他是做什么用的了。


最后貼出我今天寫的這個 圖片輪換的源代碼:

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

相關(guān)文章

  • Javascript合并表格中具有相同內(nèi)容單元格示例

    Javascript合并表格中具有相同內(nèi)容單元格示例

    表格相同內(nèi)容單元格的合并在以前也有過類似的教程,本文為大家講解的是使用Javascript合并,具體示例及效果圖如下,感興趣的朋友可以參考下
    2013-08-08
  • OpenLayer3自定義測量控件MeasureTool

    OpenLayer3自定義測量控件MeasureTool

    這篇文章主要為大家詳細(xì)介紹了OpenLayer3自定義測量控件MeasureTool,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • Javascript對象Clone實例分析

    Javascript對象Clone實例分析

    這篇文章主要介紹了Javascript對象Clone用法,實例分析了javascript對象克隆的相關(guān)技巧,需要的朋友可以參考下
    2015-06-06
  • JavaScript Fetch API請求和響應(yīng)攔截詳解

    JavaScript Fetch API請求和響應(yīng)攔截詳解

    這篇文章主要為大家介紹了JavaScript Fetch API請求和響應(yīng)攔截詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • echarts安裝與配置

    echarts安裝與配置

    這篇文章介紹了echarts安裝與配置的方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • ES6 新增的創(chuàng)建數(shù)組的方法(小結(jié))

    ES6 新增的創(chuàng)建數(shù)組的方法(小結(jié))

    這篇文章主要介紹了ES6 新增的創(chuàng)建數(shù)組的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • JavaScript更改原始對象valueOf的方法

    JavaScript更改原始對象valueOf的方法

    這篇文章主要介紹了JavaScript更改原始對象valueOf的方法,涉及javascript使用自定義valueOf函數(shù)替換掉原始o(jì)bject中valueOf的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • js前端導(dǎo)出Excel的方法

    js前端導(dǎo)出Excel的方法

    這篇文章主要為大家詳細(xì)介紹了js前端導(dǎo)出Excel的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • javascript?中動畫制作方法?animate()屬性

    javascript?中動畫制作方法?animate()屬性

    這篇文章主要介紹了javascript?中動畫制作方法?animate()屬性,animate是所有dom元素都有的方法,可以用來最做過度動畫,關(guān)鍵幀動畫,下面文章的相關(guān)介紹需要的小伙伴可以參考一下
    2022-04-04
  • 微信小程序事件對象中e.target和e.currentTarget的區(qū)別詳解

    微信小程序事件對象中e.target和e.currentTarget的區(qū)別詳解

    這篇文章主要介紹了微信小程序事件對象中e.target和e.currentTarget的區(qū)別詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05

最新評論