作者:Pingac | 来源:互联网 | 2018-06-19 10:38
用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么Javascript可不可以呢,我琢磨了三天,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,我会在以后将其完善的.
先说下思路 :
首先动态创建一个html结构
代码如下:
这个很关键,然后设置一个计时器来模拟img的移动,并且绑定外层p的onmouseenter和onmouseleave事件.最后将外层的p对象返回.
下面看代码 代码如下:
sx.activex.dynamicpic={ init:function(imga,border,margin,w,h,step,speed){ var demo=document.createElement("p"); 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;ivar 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是外层p的width,h同理,step是计时器执行一次图片移动的步数,speed是计时器的时间间隔. 上面的计时器代码借用了网上的一段代码,不过我自己做了些改进. 下面给出调用代码: 代码如下:
好了,基本搞定,有什么问题还请多多交流啊!
推荐阅读
IamtryingtodrawpolarcurvesonHTMLcanvasusingJavascript.WhatshouldIdowhenIwanttoco ...
[详细]
蜡笔小新 2023-12-11 18:14:13
Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ...
[详细]
蜡笔小新 2023-12-12 15:59:36
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ...
[详细]
蜡笔小新 2023-12-10 12:35:46
前言对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ...
[详细]
蜡笔小新 2023-10-16 17:08:23
表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ...
[详细]
蜡笔小新 2023-10-15 18:44:55
Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ...
[详细]
蜡笔小新 2023-10-15 16:40:16
本文详细介绍了Java中final关键字的含义和用法。final关键字可以修饰非抽象类、非抽象类成员方法和变量。final类不能被继承,final类中的方法默认是final的。final方法不能被子类的方法覆盖,但可以被继承。final成员变量表示常量,只能被赋值一次,赋值后值不再改变。文章还讨论了final类和final方法的应用场景,以及使用final方法的两个原因:锁定方法防止修改和提高执行效率。 ...
[详细]
蜡笔小新 2023-12-14 18:07:46
今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ...
[详细]
蜡笔小新 2023-12-14 17:58:15
本文介绍了求解gcdexgcd斐蜀定理的迭代法和递归法,并解释了exgcd的概念和应用。exgcd是指对于不完全为0的非负整数a和b,gcd(a,b)表示a和b的最大公约数,必然存在整数对x和y,使得gcd(a,b)=ax+by。此外,本文还给出了相应的代码示例。 ...
[详细]
蜡笔小新 2023-12-14 17:48:30
本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ...
[详细]
蜡笔小新 2023-12-14 17:43:56
本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ...
[详细]
蜡笔小新 2023-12-14 17:15:38
本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ...
[详细]
蜡笔小新 2023-12-14 17:15:19
本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ...
[详细]
蜡笔小新 2023-12-14 17:08:34
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ...
[详细]
蜡笔小新 2023-12-14 16:19:10