javascript跑马灯悬停放大效果实现代码
更新时间：2012年12月12日 10:41:12 作者：
用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,需要的朋友可以了解下
用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,我琢磨了三天,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,我会在以后将其完善的.
先说下思路:
首先动态创建一个html结构
<div style="overflow-x:hidden;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg">.............</td>
<td></td>
</tr>
</table>
</div>
这个很关键,然后设置一个计时器来模拟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("<table border=/"0/" cellspacing=/"0/" cellpadding=/"0/">");
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;i<imga.length;i++){
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;i<c.length;i++){
c[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是计时器的时间间隔.
上面的计时器代码借用了网上的一段代码,不过我自己做了些改进.
下面给出调用代码:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script src="kongjian.js"></script>
<script>
var a=sx.activex.dynamicpic.init(["1 (1).jpg","1.jpg","1 (2).jpg","1 (3).jpg"],"2px red solid",5,500,100,2,10);
document.body.appendChild(a);
</script>
</body>
</html>
好了,基本搞定,有什么问题还请多多交流啊!
先说下思路:
首先动态创建一个html结构
复制代码 代码如下:
<div style="overflow-x:hidden;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg">.............</td>
<td></td>
</tr>
</table>
</div>
这个很关键,然后设置一个计时器来模拟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("<table border=/"0/" cellspacing=/"0/" cellpadding=/"0/">");
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;i<imga.length;i++){
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;i<c.length;i++){
c[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是计时器的时间间隔.
上面的计时器代码借用了网上的一段代码,不过我自己做了些改进.
下面给出调用代码:
复制代码 代码如下:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script src="kongjian.js"></script>
<script>
var a=sx.activex.dynamicpic.init(["1 (1).jpg","1.jpg","1 (2).jpg","1 (3).jpg"],"2px red solid",5,500,100,2,10);
document.body.appendChild(a);
</script>
</body>
</html>
好了,基本搞定,有什么问题还请多多交流啊!
相关文章
JavaScript控制文字像跳跳球一样在网页上浮动，碰到边缘自动回来，有兴趣看一下。2009-11-11
图片切换很流行，文字切换也很实用哦，而且用CSS与JavaScript配合，避免纯JS实现时把文字写进JavaScript代码里，修改不方便，本款可以说是方便，简单，效果实用，兼容性好.2009-10-10
鼠标滑过文章中的链接文字，要在相应位置弹出提示框，提示框的样式由css来控制，高度自适应；鼠标可以点击提示框的中的链接,滑离提示框时，框自动消失2010-06-06
一个炫彩的网页欢迎词，其实就是Javascript文字特效，只不过它是打字与炫彩的结合，在网页的一角放上这效果，给平静的网页增添点动态元素。2009-10-10
用按钮触发Javascript，动态生成一个表格，主要是使用innerHTML功能，每点击一次按钮，就会生成一个表格，当然也可以把表格改成一个DIV，这样就是生成一个层了，不过删除时候有些麻烦。2009-10-10
基于JavaScript的平滑文字闪烁,不是单纯的闪烁,貌似还带有一点点别的效果,比如淡入/淡出,那些颜色值你是可以变的,改成你想要的,还有闪烁间隔等,都可以修改的.2009-10-10
在网上找到的，我认为最为方便的一段定时滚动代码，找了很多其他的总是有这样那样的问题，好不容易找到的，就分享一下。2010-06-06
用js实现的上下文字滚动效果代码，需要的朋友可以参考下。2010-07-07
再发一个实现字体大中小方法的JavaScript代码，这种效果估计大家在网上见到挺多了，点击适时改变网页上字体的大小，以适合不同人群的浏览体验，本代码较简单，使用方便。2011-08-08
一个文本框的另类用法，结合JavaScript实现文字慢慢向上爬的效果，一层一层往上爬，由此你可以创意出不少的文字特效来。2009-10-10
最新评论