登录  /  注册
首页 > web前端 > js教程 > 正文
javascript跑马灯悬停放大效果实现代码_文字特效
php中文网
发布： 2016-05-16 17:46:35
原创
790人浏览过
用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,我琢磨了三天,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,我会在以后将其完善的.

先说下思路:
首先动态创建一个html结构
复制代码 代码如下:







javascript跑马灯悬停放大效果实现代码_文字特效javascript跑马灯悬停放大效果实现代码_文字特效javascript跑马灯悬停放大效果实现代码_文字特效javascript跑马灯悬停放大效果实现代码_文字特效.............



这个很关键,然后设置一个计时器来模拟img的移动,并且绑定外层div的onmouseenter和onmouseleave事件.最后将外层的div对象返回.

下面看代码
复制代码 代码如下:

sx.activex.dynamicpic={
init:function(imga,border,margin,w,h,step,speed){
var demo=document.createElement("div");
var tbody=document.createElement("tbody");
var demo1=document.createElement("td");
var demo2=document.createElement("td");
var table=document.createElement("");
var tr=document.createElement("tr");
demo.style.position="absolute";
demo.style.height=h+"px";
demo.style.width=w+"px";
demo.style.overflowX="hidden";
for(var i=0;ijavascript跑马灯悬停放大效果实现代码_文字特效var img=document.createElement("img")
img.src=imga[i];
img.style.height=h+"px";
img.style.width=parseInt(w/imga.length)+"px";
demo1.appendChild(img)
}
tr.appendChild(demo1);
tr.appendChild(demo2);
tbody.appendChild(tr);
table.appendChild(tbody);
demo.appendChild(table);
var c=demo1.all;
for(var i=0;ic[i].style.marginLeft=margin+"px";
c[i].style.border=border;
}
demo2.innerHTML = demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0){
//alert(demo.scrollLeft);
demo.scrollLeft-=demo1.offsetWidth;}
else{
demo.scrollLeft+=step;
}
}
var MyMar = setInterval(Marquee,speed);
demo.onmouseenter = function(){
clearInterval(MyMar);
var t=document.elementFromPoint(window.event.clientX,window.event.clientY);
if(t.tagName!="IMG")
return;
if(t.offsetHeight>demo.offsetHeight+10)
return;
//alert(t.src);
var d=document.createElement("img");
d.style.height=t.offsetHeight+50+"px";
d.style.width=t.offsetWidth+50+"px";
d.style.position="absolute";
d.style.top="-25px";
if(t.parentNode==demo2){
d.style.left=t.offsetLeft+demo1.offsetWidth-20+"px";
//alert(1);
//demo.scrollLeft-=demo1.offsetWidth;
}else{
d.style.left=t.offsetLeft-25+"px";}
//alert(d.style.left);
//alert(window.event.clientX);
//alert(t.offsetLeft-demo.scrollLeft+demo.offsetWidth-25);
d.src=t.src;
d.onmouseleave=function(){
d.parentNode.removeChild(d);
MyMar = setInterval(Marquee,speed)
}
//alert(1);
//demo.style.overflow="visible";
demo1.appendChild(d);
//alert(m.innerHTML);
}
demo.onmouseleave = function(){MyMar = setInterval(Marquee,speed)}
return demo;
}
}

函数参数的imga是你要传入img地址的数组,border是图片的边框属性,margin是图片间的距离,w是外层div的width,h同理,step是计时器执行一次图片移动的步数,speed是计时器的时间间隔.
上面的计时器代码借用了网上的一段代码,不过我自己做了些改进.
下面给出调用代码:
复制代码 代码如下:



Untitled Document







好了,基本搞定,有什么问题还请多多交流啊!
相关标签：
跑马灯 悬停
来源：php中文网
上一篇：js onkeypress与onkeydown 事件区别详细说明_基础知识 下一篇：javascript实现div的拖动并调整大小类似qq空间个性编辑模块_其他特效
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 立即咨询

  • 微信沟通

  • QQ群

  • 优惠券

  • 返回顶部