动态显示产品信息

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

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