今天做了个产品介绍的功能,想到只是简单的显示信息实在是无聊,那就让它动态的一个一个显示出来好了.

效果展示: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);
}