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 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
vue实现整屏滚动切换
Jun 29 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
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
angular 服务随记小结
2019/05/06 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
python提取页面内url列表的方法
2015/05/25 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Python使用进程Process模块管理资源
2020/03/05 Python
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
实习自我鉴定
2013/12/15 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
班长自荐书范文
2014/02/11 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis