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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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
Terran历史背景
2020/03/14 星际争霸
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
PHP进程通信基础之信号
2017/02/19 PHP
Javascript Global对象
2009/08/13 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python中的高级数据结构详解
2015/03/27 Python
举例讲解Python中is和id的用法
2015/04/03 Python
python数组过滤实现方法
2015/07/27 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
详解python中的闭包
2020/09/07 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
求职推荐信
2013/10/28 职场文书
质检部岗位职责
2013/11/11 职场文书
大学生找工作推荐信范文
2013/11/28 职场文书
初一家长会邀请函
2014/01/31 职场文书
培训主管岗位职责
2014/02/01 职场文书
离婚协议书范文
2015/01/26 职场文书
表扬信格式模板
2015/05/05 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
深入理解pytorch库的dockerfile
2022/06/10 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技