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 相关文章推荐
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
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模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
js实现计算器功能
2020/08/10 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
python英语单词测试小程序代码实例
2019/09/09 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
介绍一下Make? 为什么使用make
2013/12/08 面试题
初中生学习的自我评价
2013/11/14 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
简单的辞职信范文
2014/01/18 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
应届护士求职信范文
2014/01/26 职场文书
医院义诊活动总结
2014/07/04 职场文书
教师自我剖析材料
2014/09/29 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
钱学森观后感
2015/06/04 职场文书
垂直极限观后感
2015/06/08 职场文书
2015入党自传格式范文
2015/06/26 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python