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 相关文章推荐
Js控制滑轮左右滑动实例
Feb 13 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
php报错502badgateway解决方法
2019/10/11 PHP
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
Python 列表list使用介绍
2014/11/30 Python
Python内建数据结构详解
2016/02/03 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python的依赖管理的实现
2019/05/14 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python 读取位于包中的数据文件
2020/08/07 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
会计实习自我鉴定
2013/12/04 职场文书
仓库文员岗位职责
2014/04/06 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
汉语拼音教学反思
2016/02/22 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
SQL SERVER中的流程控制语句
2022/05/25 SQL Server