javascript跑马灯悬停放大效果实现代码


Posted in Javascript onDecember 12, 2012

用过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>

好了,基本搞定,有什么问题还请多多交流啊!
Javascript 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 #Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 #Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 #Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 #Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 #Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 #Javascript
用js判断页面是否加载完成实现代码
Dec 11 #Javascript
You might like
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
jquery 插件学习(三)
2012/08/06 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python的词法分析与语法分析
2013/05/18 Python
python3简单实现微信爬虫
2015/04/09 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python定时任务sched模块用法示例
2018/07/16 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
自我鉴定范文200字
2013/10/02 职场文书
高中毕业自我鉴定范文
2013/10/02 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
信访工作汇报材料
2014/10/27 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
爱国主义主题班会
2015/08/14 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js