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 相关文章推荐
JS 自定义带默认值的函数
Jul 21 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
ES6中Class类的静态方法实例小结
Oct 28 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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
对python生成业务报表的实例详解
2019/02/03 Python
Python异常处理例题整理
2019/07/07 Python
python实现滑雪游戏
2020/02/22 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
水利学院求职自荐书
2014/02/01 职场文书
高三毕业寄语
2014/04/10 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
洗手间标语
2014/06/23 职场文书
文体活动总结
2015/02/04 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
开除通知书范本
2015/04/25 职场文书
《失物招领》教学反思
2016/02/20 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers