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 各浏览器的 Javascript 效率对比
Jan 23 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 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/01/19 PHP
php上传图片类及用法示例
2016/05/11 PHP
MSN消息提示类
2006/09/05 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
shell变量的作用空间是什么
2013/08/17 面试题
爱岗敬业演讲稿范文
2014/01/14 职场文书
英语简历自我评价
2014/01/26 职场文书
公司管理建议书范文
2014/03/12 职场文书
小学教师师德承诺书
2014/05/23 职场文书
学生安全责任书范本
2014/07/24 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
体育委员竞选稿
2015/11/21 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang