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 相关文章推荐
基于jquery封装的一个js分页
Nov 15 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
JS 树形递归实例代码
2010/05/18 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python实现字典的key和values的交换
2015/08/04 Python
PyCharm代码格式调整方法
2018/05/23 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
中专自我鉴定范文
2013/10/16 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
岳麓书院导游词
2015/02/03 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP