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遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
php探针不显示内存解决方法
2019/09/17 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Django如何自定义分页
2018/09/25 Python
python实现学员管理系统
2019/02/26 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
python第三方库学习笔记
2020/02/07 Python
python中实现栈的三种方法
2020/12/19 Python
普通大学毕业生自荐信范文
2014/02/23 职场文书
房产继承公证书
2014/04/09 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
企业党员一句话承诺
2014/05/30 职场文书
白酒代理协议书范本
2014/10/26 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers