javascript跑马灯悬停放大效果实现代码
JavaScript代码 实现 效果 放大 跑马灯 悬停
2023-06-13 09:14:42 时间
用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,我琢磨了三天,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,我会在以后将其完善的.
先说下思路:
首先动态创建一个html结构
复制代码代码如下:
先说下思路:
首先动态创建一个html结构
<divstyle="overflow-x:hidden;">
<tableborder="0"cellspacing="0"cellpadding="0">
<tr>
<td><imgsrc="1.jpg"><imgsrc="2.jpg"><imgsrc="3.jpg"><imgsrc="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){
vardemo=document.createElement("div");
vartbody=document.createElement("tbody");
vardemo1=document.createElement("td");
vardemo2=document.createElement("td");
vartable=document.createElement("<tableborder=/"0/"cellspacing=/"0/"cellpadding=/"0/">");
vartr=document.createElement("tr");
demo.style.position="absolute";
demo.style.height=h+"px";
demo.style.width=w+"px";
demo.style.overflowX="hidden";
for(vari=0;i<imga.length;i++){
varimg=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);
varc=demo1.all;
for(vari=0;i<c.length;i++){
c[i].style.marginLeft=margin+"px";
c[i].style.border=border;
}
demo2.innerHTML=demo1.innerHTML
functionMarquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0){
//alert(demo.scrollLeft);
demo.scrollLeft-=demo1.offsetWidth;}
else{
demo.scrollLeft+=step;
}
}
varMyMar=setInterval(Marquee,speed);
demo.onmouseenter=function(){
clearInterval(MyMar);
vart=document.elementFromPoint(window.event.clientX,window.event.clientY);
if(t.tagName!="IMG")
return;
if(t.offsetHeight>demo.offsetHeight+10)
return;
//alert(t.src);
vard=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)}
returndemo;
}
}
函数参数的imga是你要传入img地址的数组,border是图片的边框属性,margin是图片间的距离,w是外层div的width,h同理,step是计时器执行一次图片移动的步数,speed是计时器的时间间隔.
上面的计时器代码借用了网上的一段代码,不过我自己做了些改进.
下面给出调用代码:
<html>
<head>
<title>UntitledDocument</title>
</head>
<body>
<scriptsrc="kongjian.js"></script>
<script>
vara=sx.activex.dynamicpic.init(["1(1).jpg","1.jpg","1(2).jpg","1(3).jpg"],"2pxredsolid",5,500,100,2,10);
document.body.appendChild(a);
</script>
</body>
</html>
好了,基本搞定,有什么问题还请多多交流啊!
相关文章
- 在 Java 代码中来一段 JavaScript?聊聊 Flowable 中的脚本任务
- 实例:尽可能写友好的Javascript代码
- 用javascript连接access数据库的方法
- javascript下给元素添加事件的方法与代码
- javascript实现二分查找法实现代码
- javascript一段代码引发的思考
- javascript像素拼图实现代码
- Javascript表格操作实现代码
- Javascript代码也可以变得优美的实现方法
- Javascript数组添加shuffle方法的实现代码
- 一个特殊的排序需求的javascript实现代码
- javascript下搜索子字符串的的实现代码(脚本之家修正版)
- JavaScript井字棋人工智能实现代码
- javascript可控式透明特效实现代码
- JavaScript中文转拼音实现代码有些bug
- asp.net中JavaScript数据验证实现代码
- javascript单选按钮单击选中双击取消选择实现代码
- Javascript动态绑定事件的简单实现代码
- javascript与webservice的通信实现代码
- JavaScript打开word文档的实现代码(c#)
- Javascript键盘事件的组合使用实现代码
- 实现网页内容水平或垂直滚动的Javascript代码
- Javascript实现滑块滑动改变值的实现代码
- javascript获取ckeditor编辑器的值(实现代码)
- 如何实现正则表达式的JavaScript的代码高亮
- JSP中使用JavaScript动态插入删除输入框实现代码
- ruby、javascript、php中的观察者模式实现代码
- JavaScript代码复用模式详解
- javascript和jquery实现设置和移除文本框默认值效果代码