為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

今天做了個產(chǎn)品介紹的功能,想到只是簡單的顯示信息實(shí)在是無聊,那就讓它動態(tài)的一個一個顯示出來好了.

效果展示:http://runjs.cn/detail/topt9b26

主要的代碼如下

html:

info里面保存著產(chǎn)品的信息.

<div?id="context"><img?alt="廣州圣豐索菲特大酒店"?src="jpg"?class="pic"info="廣州圣豐索菲特大酒店采用了3C?JDS系列的酒店資產(chǎn)管理系統(tǒng)(PMSI)和語言系統(tǒng)(VRS),是于AVAYA大型程控交換機(jī)S8800進(jìn)行通訊融合,語言融合的酒店信息化典型方案"><img?alt="廣州白云國際會議中心"?src="JPG"?class="pic"info="廣州白云國際會議中心從開業(yè)至今一直使用3C?JDS系列的酒店資產(chǎn)管理系統(tǒng)(PMSI)和語音系統(tǒng)(VRS),享受著三信科技(3C)為酒店提供的優(yōu)質(zhì)服務(wù).2010年,為了滿足酒店的大容量和高效率叫醒服務(wù),三信科技將語音叫醒服務(wù)系統(tǒng)通道擴(kuò)容至60路,使廣州白云國際會議中心成為業(yè)界第一個采用60路語音端口叫醒服務(wù)的成功案例"> </div> <div?id="cp_info">天之道，損有余而補(bǔ)不足，是故虛勝實(shí)，不足勝有余。其意博，其理奧，其趣深，天地之象分，陰陽之候列，變化之由表，死生之兆彰，不謀而遺跡自同，勿約而幽明斯契，稽其言有微，驗(yàn)之事不忒，誠可謂至道之宗，奉生之始矣。假若天機(jī)迅發(fā)，妙識玄通，成謀雖屬乎生知，標(biāo)格亦資于治訓(xùn)，未嘗有行不由送，出不由產(chǎn)者亦 </div>

主要js代碼:

for?(i?=?0;?i?<?pics_len;?i++)?{pics[i].onmouseover?=?pcin(); }

function?pcin()?{return?function?()?{pic_info.innerHTML?=?"?";showInfo(this,?0);}; }

function?showInfo(elem,?i)?{var?len;//獲取每張圖片的info屬性len?=?elem.getAttribute("info").length;//消除在2個產(chǎn)品間快速移動,導(dǎo)致動態(tài)顯示時(shí)錯亂if?(pic_info.movement)?{clearTimeout(pic_info.movement);}if?(i?===?len)?{return?true;}pic_info.innerHTML?+=?elem.getAttribute("info")[i];i?=?i?+?1;pic_info.movement?=?setTimeout(function?()?{showInfo(elem,?i);},?5); }

轉(zhuǎn)載于:https://my.oschina.net/l3ve/blog/219910

總結(jié)

以上是生活随笔為你收集整理的动态显示产品信息的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。