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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
js面向对象的写法
Feb 19 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
js+canvas实现刮刮奖功能
Sep 13 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设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP中比较时间大小实例
2014/08/21 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
使用js实现数据格式化
2014/12/03 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
js解决movebox移动问题
2016/03/29 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
Python requests模块session代码实例
2020/04/14 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
职业教育毕业生求职信
2013/11/09 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年服务员工作总结
2014/11/18 职场文书
大学生自我评价范文
2015/03/03 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书