js实现鼠标移上去显示详细信息

最新推荐文章于 2023-11-07 15:35:33 发布
最新推荐文章于 2023-11-07 15:35:33 发布
阅读量923 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/htys/p/3503632.html
版权

<body>

<DIV id=page>
<DIV id=pageNav>
<UL class="solidmenupage">
 <LI id="li1" οnmοuseοver="mouseover(this)"   οnmοuseοut="mouseover()" title="封面"  ><a id="lis1"  href="lhrhxm-ggfw-fm.html" target='mainFrame' οnclick=""  name="ssss">第一页</a></LI>
    <LI id="li2" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseover()"  title="材料一" ><a id="lis2" href="lhrhxm-ggfw-part1.html" target='mainFrame' οnclick="" >第二页</a></LI>
 <LI id="li3" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseover()" title="材料二"  ><a id="lis3" href="lhrhxm-ggfw-part2.html" target='mainFrame'  οnclick="" >第三页</a></LI>
 <LI id="li4" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseover()" title="附件"  ><a id="lis4" href="lhrhxm-ggfw-part3.html"  target='mainFrame' οnclick="" >第四页</a></LI>
 </UL>
  </DIV>
</DIV>

<script type="text/javascript">    
  var li = document.getElementsByTagName("li");    
  var detaildiv = document.createElement("div");    
  detaildiv.style.width = "100px";    
  detaildiv.id = "detail";    
  detaildiv.style.backgroundColor = "#ccc"    
  detaildiv.style.height = "100px";    
  detaildiv.style.border = "1px solid #f00";
  detaildiv.style.position = "absolute";    
   function mouseover(demo) {
    var   title =  document.getElementsByTagName("detail").title;
    detaildiv.innerHTML = title.innerHTML;
 //   demo.innerHTML;  
    document.body.appendChild(detaildiv);        
    document.getElementById("detail").style.display = "";    
    detaildiv.style.left = event.clientX + "px";      
    detaildiv.style.top = event.clientY + "px";     }  
   function mouseout() {        
   document.getElementById("detail").style.display = "none";     }
</script>
</body>

转载于:https://www.cnblogs.com/htys/p/3503632.html

weixin_30455023
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现鼠标移上去显示图片或微信二维码
10-20
本文给大家分享一段使用的js代码实现鼠标移入显示图片或微信二维码样式，代码简单易懂，非常不错，需要的朋友参考下吧
JavaScript实现鼠标移到地图上显示实际地理坐标
12-13
范例使用SuperMap iClient 6R for JavaScript开发模式，使用MousePosition控件实现鼠标移动到地图上展示实际的地理坐标。
前台JS：通过Hover（鼠标悬停事件）动态悬浮显示DIV的ID
热门推荐
.NET开发工程师吃瓜日常的日常
01-16 3万+
HTML代码：定义两个DIV并设置大小宽度 &lt;div id="Div1" class="div-list" style="width:20px; height:50px; border:1px solid #F00"&gt; &lt;a&gt;DIV1&lt;/a&gt; &lt;/div&gt; &lt;div id="
鼠标移上，对应下拉框显示详细信息
m0_58893670的博客
05-12 378
首先给select下拉框增加两个方法。
CSS实现鼠标放上去显示提示工具
最新发布
qingdouxiaohua的博客
11-07 1338
【代码】CSS实现鼠标放上去显示提示工具。
鼠标移入移出显示详情CSS3配合js
weixin_47278755的博客
08-09 463
效果图 第一步：引入JQ 第二步：编写html <div class="tr"> <div class="tha">01</div> <div class="tha"><input type="checkbox" name="apk[]" /></div> <!-- 部门 --> <div class="t...
video.js实现鼠标移入播放鼠标移出暂停
12-31
video.js实现鼠标移入播放鼠标移出暂停
js实现当鼠标移到表格上时显示这一格全部内容的代码
11-22
想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。 css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 ...
javascript实现鼠标移到Image上方时显示文字效果的方法
10-23
主要介绍了javascript实现鼠标移到Image上方时显示文字效果的方法,涉及javascript鼠标事件及图文属性动态设置的相关技巧,可用于为图片增加文字提示效果,需要的朋友可以参考下
纯JS实现鼠标划过时显示提示框
12-27
js提示框特效制作多种js提示框效果,如js文字提示框,js图片提示框,js tooltip文字与图片提示框。一款很实用的js提示框插件。
js鼠标放到图片上 出现的 新闻列表 或 其他提示浮动层效果
06-16
鼠标放到图片上 出现的 新闻列表 或 其他提示浮动层效果
js鼠标悬浮显示详细内容
12-21
js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容
javascript div鼠标悬停提示信息
05-14
页面为,html,在页面顶端放置有两个文本不input 当鼠标悬停在上面时,会出现相应的提示,提示信息可以根据自己须要在html代码中更改....
鼠标放上去显示的效果
imkaifan的博客
12-30 1985
鼠标放上去显示的效果
jQuery实现鼠标移入突出显示
qq_61950936的博客
05-22 535
jQuery实现鼠标移入突出显示案例
最简单的鼠标悬停文字详情
zhh0310235的博客
08-06 219
<html> <head> </head> <body> <div style="height:130px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;width: 200px;border: 1px solid #757584;" title="这...
js 怎么实现鼠标移入canvas画的棋盘，显示下一步棋子
04-23
首先需要在canvas上注册鼠标移动事件，对应的方法为onmousemove。同时，需要用到e.clientX和e.clientY获取鼠标在canvas上的坐标。 具体实现步骤如下： 1. 获取canvas元素和上下文 ``` var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` 2. 定义棋盘格子的大小 ``` var gridSize = 50; //每个格子的大小为50x50 ``` 3. 定义一个函数用于绘制棋盘 ``` function drawBoard(){ for(var i=0;i<10;i++){ ctx.moveTo(gridSize*i,0); ctx.lineTo(gridSize*i,gridSize*9); ctx.stroke(); ctx.moveTo(0,gridSize*i); ctx.lineTo(gridSize*9,gridSize*i); ctx.stroke(); } } drawBoard(); //绘制棋盘 ``` 4. 注册鼠标移动事件，根据鼠标位置计算下一个棋子的坐标，绘制下一个棋子。 ``` canvas.addEventListener("mousemove",function(e){ var x = e.clientX - canvas.offsetLeft; var y = e.clientY - canvas.offsetTop; x = Math.floor(x/gridSize); y = Math.floor(y/gridSize); ctx.fillStyle = "red"; ctx.beginPath(); ctx.arc(x*gridSize+25,y*gridSize+25,20,0,2*Math.PI); ctx.fill(); }); ``` 注意：以上代码只是一个示例，实际项目中还需要进行一些细节处理，例如禁止下在已有棋子的位置等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值