javascript跑马灯悬停放大效果实现代码
用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,我琢磨了三天,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,我会在以后将其完善的.
<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新闻跑马灯实例代码
本文实例为大家分享了javascript实现的跑马灯效果代码,实现了新闻公告之类的功能,下面提供了一段跑马灯实例供大家参考之用,希望能够对需要的朋友有所帮助. 运行效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>javascript新闻跑马灯效果</title> </head> <script ty
-
原生JS实现跑马灯效果
效果如下:(动态效果可复制代码查看,案例中的图片可自行选择添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; } div{ position: relative
-
JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
最近做了个项目,其中有项目需求是要实现跑马灯抽奖效果,实现此功能主要用到js相关知识,废话不多说,感兴趣的朋友可以阅读下全文. 开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的: 1.移动端1px像素线的问题 对于设计师给我的手机端网页的设计稿都是2倍图.按照道理来说,在写网页的时候,所有对象的实际尺寸都是会除2.但是对于1像素的线呢? 先来看两张图,设计稿的效果: 在三星 S4下的实际显示效果: 可以看到这个时候1px的线竟然显示不出来了.这个问题是跟 S4手机的
-
Javascript实现跑马灯效果的简单实例
页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel
-
JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）
在上篇文章给大家介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化(一),既然是要编写插件.那么叫做"插件"的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率.那么叫做插件的东西应该具有哪些基本特征呢?让我们来总结一下: 1.JavaScript 插件一些基本特征: 配置一定要简单 插件中定义的变量不污染全局变量: 同一段代码可以在不同的地方复用: 用户可以自定义自己功能参数: 具有销毁变量和参数的功能: 如果按照以上的几个特征来写插件的话,我们可
-
js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本框走动跑马灯代码</title> </
-
js跑马灯代码(自写)
复制代码 代码如下: function cls_marquee(id,id1,id2,sp){ this.obj_id=id; this.obj_id1=id1; this.obj_id2=id2; this.speed=sp; eval(this.obj_id2+".innerHTML="+this.obj_id1+".innerHTML"); function Marquee(){ if(eval(id2).offsetTop-eval(id).scrollTo
-
JS实现状态栏跑马灯文字效果代码
本文实例讲述了JS实现状态栏跑马灯文字效果代码.分享给大家供大家参考,具体如下: 这款状态栏跑马灯,文字跑动的定义在数组内,自己可修改内容.现在的IE8貌似不兼容,有缺憾的代码,欢迎JS爱好者修正,修正请发回一份.状态栏为效果显示区. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>间隔状态栏跑马灯</T
-
javascript 单行文字向上跑马灯滚动显示
代码如下: =sh/2) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } // --> 我们 服务器常用软件 百度 浏览器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
javascript跑马灯抽奖实例讲解
本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖游戏</title> <style> #box{ width:720px; margin:0 auto; margin-top:20p