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 相关文章推荐
JavaScript 学习点滴记录
Apr 24 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
vue使用Google地图的实现示例代码
Dec 19 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数组中删除元素的实现代码
2012/06/22 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
总结Python编程中函数的使用要点
2016/03/20 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
古汉语文学求职信范文
2014/03/16 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
学生检讨书
2015/01/27 职场文书
华山导游词
2015/02/03 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
win sever 2022如何占用操作主机角色
2022/06/25 Servers