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 相关文章推荐
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
js对象的复制继承实例
Jan 10 Javascript
js文字横向滚动特效
Nov 11 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
javascript每日必学之循环
Feb 19 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
js实现蒙版效果
Jan 11 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php中取得文件的后缀名?
2012/02/20 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
Joomla开启SEF的方法
2016/05/04 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
表单内同名元素的控制
2006/11/22 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Django rest framework实现分页的示例
2018/05/24 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
如何通过python画loss曲线的方法
2019/06/26 Python
python自动发微信监控报警
2019/09/06 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
优秀党员个人总结
2015/02/14 职场文书
人力资源部工作计划
2019/05/14 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang