鼠标跟随的div

最新推荐文章于 2022-07-20 17:36:59 发布
最新推荐文章于 2022-07-20 17:36:59 发布
阅读量765 收藏
点赞数
分类专栏： HTML开发备忘 文章标签： div function generator javascript html border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/googolplex/article/details/4699557
版权

鼠标跟随的div

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

  <SCRIPT LANGUAGE="JavaScript">
  <!--
    function mOverPrompt(proValue){
    mEvnPrompt();
    document.all.Prompt.innerHTML = proValue;
    document.all.Prompt.style.visibility = "visible";
}

function mOutPrompt(){
    document.all.Prompt.style.visibility = "hidden";
}
//取得位置
function mEvnPrompt() {
   x=event.x;
   y=event.y;
if (document.body.scrollLeft||document.body.scrollTop)
   {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}

  document.all.Prompt.style.left = x+15;
  document.all.Prompt.style.top = y-60;

}

  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
  <a href='#' οnmοuseοver=mOverPrompt('tt');>tt</a><br/><br/>
  <a href='#' οnmοuseοver=mOverPrompt('tt');>tt</a><br/><br/>
  <a href='#' οnmοuseοver=mOverPrompt('tt');>tt</a><br/><br/>
  <a href='#' οnmοuseοver=mOverPrompt('tt');>tt</a><br/><br/>


  <div id="Prompt"  style="border:1px solid red;HEIGHT: 75px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 117px"></div>

 </BODY>
</HTML>

googolplex
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现的简单鼠标跟随DiV层效果完整实例
10-23
主要介绍了JS实现的简单鼠标跟随DiV层效果,涉及JavaScript基于时间函数动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript实现div块跟随鼠标移动效果
qq_39155611的博客
06-03 1514
JavaScript实现div块跟随鼠标移动效果 前面讲了这么多DOM事件有关的属性等，现在我们进行一些相关的练习，实现div块跟随鼠标移动效果，如图： HTML代码： <div id="box"></div> CSS代码： *{ margin: 0; padding: 0; } body{ width: 2000px; height: 2000px; } #box{
鼠标跟随div移动
weixin_45215652的博客
11-21 72
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 10px; height: 10px; background-color: red; /* 设计位置开启绝对定位 */ position: absolut
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
weixin_42522817的博客
06-04 789
本文实例讲述了JS实现的简单鼠标跟随DiV层效果。分享给大家供大家参考，具体如下：这段代码呈现一串跟随鼠标的Div效果，并有拖影特效，随着鼠标快速的晃动，Div层效果会不断的增加，后面的Div会自动消失，不过还有些Bug，期待与大家完善这个JS特效。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...
拖拽及鼠标跟随div运动
qq_38401285的博客
03-27 490
刚看了一下事件对象，即是event对象，表示当一个对象发生事件时，与这个对象相关的一些详细信息会保存到event对象中，以方便这个对象调用。低版本IE、chrome和标准浏览器的事件对象不一样。在低版本IE、chrome下，event是一个内置的全局对象;而在标准的浏览器中，事件函数的第一个参数默认为时间对象，为了兼容这些浏览器的差异，一般做一个兼容处理：document.onclick=func...
div跟随鼠标移动练习
最新发布
qq_51088023的博客
07-20 558
代码】div跟随鼠标移动练习。
js+css实现div跟随鼠标位移
皮蛋solo粥的博客
04-08 355
body{ perspective: 500px; transform-style: preserve-3d; } .box{ background-color: pink; width: 500px; height: 500px; margin: 200px auto 0px; transition: all 0.8s ease; } <body> <div class="box" onmousemove="go(event)"></div..
div跟随鼠标实现效果
cjFrontEnd的博客
04-12 350
实现思路：div脱离文档流,设置为固定定位： position: fixed; left: Number(event.clientX - event.offsetX + ‘偏移常量’)； top: Number(event.clientY- event.offsetY+ ‘偏移常量’)； 如果div位置过低： if（top值> (window.innerHeight -...
div跟随鼠标
从盲流子到程序员
12-15 542
#div1 { width: 100px; height: 100px; background: red; position: absolute; } &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body style="height:2000px"&gt; &lt;div id="div1"&gt;&lt;/div&a
div跟随鼠标移动
xiaoxingxingzai的博客
11-07 407
一.先了解元素与鼠标的坐标原点都是谁
html5 div 鼠标跟随,CSS实用：DIV+CSS打造跟随鼠标的层
weixin_36230923的博客
06-07 151
以下为引用的内容：跟随鼠标的层 － 建站学院function show_mp(){var obj=document.getElementById(’mpDiv’);var L=T=0;var divWidth=220;var divHeight=70;var padding=15;var R= document.body.scrollLeft+document.body.clientWidth-d...
javascript DIV跟随鼠标移动
10-22
主要介绍了javascript DIV跟随鼠标移动，有一个div跟随鼠标移动的结果，有一连串跟随鼠标移动的效果，感兴趣的小伙伴们可以参考一下
jQuery实现div跟随鼠标移动
10-19
主要为大家详细介绍了jQuery实现div跟随鼠标移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Div跟随鼠标
04-16
鼠标放在指定地方，显示DIV，跟随鼠标移动
Local image preview sample
googol的专栏
02-14 908
SCRIPT LANGUAGE="JavaScript">...function  DrawImage(ImgD,ImgWidth,ImgHeight)...{    var  image=new  Image();    image.src=ImgD.src;        if(ImgWidth0)ImgWidth=image.width;    if(ImgHeight0)ImgHeig
javascript 全文替换
googol的专栏
02-14 893
HTML>HEAD>TITLE>Replace allTITLE>HEAD>BODY bgColor=#ffffff topMargin=5 marginheight="5">10月25日上午国防科工委副主任、国家航天局局长孙来燕接受中国政府网专访，就军民结合、寓军于民的主题进行在线访谈。图为孙来燕就国防科技工业在“十五”取得的主要成就回答网民提问。（中国政府网图；陈竞超 摄） 　　中新网10
div的分别显示控制
googol的专栏
07-19 816
html>body onload="test();">input type=button value="test1" onmouseover="testss(0);">input type=button value="test2" onmouseover="testss(1);">input type=button value="test3" onmouseover="testss(
页面内部跳转
googol的专栏
07-19 779
html>body>script>...function testddd()...{    location.href="#1";}script>input type=button value=anwo onclick="testddd();">br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>
Table行选择
googol的专栏
10-14 776
Table行选择         .EvenOrOddRow{  background-color: expression((this.sectionRowIndex%2)?white:#E0E0E0);  }     var currentActiveRow; function changeActiveRow(obj)  {   if(current

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值