js实现鼠标悬停图片上时滚动文字说明的方法


Posted in Javascript onFebruary 17, 2015

本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<title>js实现鼠标悬停图片上时的滚动文字说明</title>

<body>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function showtip2(current,e,text){

  if (document.all&&document.readyState=="complete"){

    document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'

    document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10

    document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10

    document.all.tooltip2.style.visibility="visible"

}

  else if (document.layers){

    document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')

    document.tooltip2.document.nstip.document.close()

    document.tooltip2.document.nstip.left=0

    currentscroll=setInterval("scrolltip()",100)

    document.tooltip2.left=e.pageX+10

    document.tooltip2.top=e.pageY+10

    document.tooltip2.visibility="show"

}

}

function hidetip2(){

  if (document.all)

    document.all.tooltip2.style.visibility="hidden"

    else if (document.layers){

    clearInterval(currentscroll)

    document.tooltip2.visibility="hidden"

}

}

//  End -->

</script>

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:gold;z-index:10"></div>

<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'欢迎来到三水点靠木');" onMouseout="hidetip2();" STYLE="cursor: hand">

<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7">

<img SRC="/images/banner.gif" BORDER="0" style="cursor:pointer;"/>

</TABLE>

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
JavaScript实现前端网页版倒计时
Mar 24 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 #Javascript
js实现双击图片放大单击缩小的方法
Feb 17 #Javascript
js图片模糊切换显示特效的方法
Feb 17 #Javascript
js实现单击图片放大图片的方法
Feb 17 #Javascript
js实现iframe自动自适应高度的方法
Feb 17 #Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 #Javascript
Jquery树插件zTree用法入门教程
Feb 17 #Javascript
You might like
php学习之数据类型之间的转换代码
2011/05/29 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
python通过post提交数据的方法
2015/05/06 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python面试题之列表声明实例分析
2019/07/08 Python
python中dict()的高级用法实现
2019/11/13 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
python实现3D地图可视化
2020/03/25 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
物流管理系毕业生求职信
2014/06/03 职场文书
元宵节寄语大全
2015/02/27 职场文书
赡养老人协议书范本
2015/08/06 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书