為什么80%的碼農都做不了架構師？>>> ??

今天做了個產品介紹的功能,想到只是簡單的顯示信息實在是無聊,那就讓它動態的一個一個顯示出來好了.

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

主要的代碼如下

html:

info里面保存著產品的信息.

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

轉載于:https://my.oschina.net/l3ve/blog/219910

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。