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 未结束的字符串常量常见解决方法
Jan 24 Javascript
初识Node.js
Mar 20 Javascript
jquery不常用方法汇总
Jul 26 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
JS动态图片的实现方法完整示例
Jan 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学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
python使用Matplotlib画条形图
2020/03/25 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
python温度转换华氏温度实现代码
2020/12/06 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
PHP经典面试题
2016/09/03 面试题
难忘的一天教学反思
2014/04/30 职场文书
自主招生教师推荐信
2014/05/10 职场文书
工程部部长岗位职责
2015/02/12 职场文书
高中运动会前导词
2015/07/20 职场文书
教导处教学工作总结
2015/08/12 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python