精华内容
下载资源
问答
  • 文字跟随鼠标移动

    2012-12-19 21:09:15
    authorware 文字跟随鼠标移动 文字跟随鼠标移动 文字跟随鼠标移动
  • 主要介绍了js实现文字跟随鼠标移动而移动的方法,实例分析了javascript处理鼠标事件及文字特效的技巧,需要的朋友可以参考下
  • html书写文字跟随鼠标移动

    千次阅读 2019-04-13 14:36:20
    ##描述 html书写文字跟随鼠标移动 ...文字跟随鼠标移动实例</title> <script language="JavaScript"> <!-- var x,y; var i=0; var ismove=0; function canmove(){ x=document.bo...

    #描述
    html书写文字跟随鼠标移动
    ##代码

    <html>
    <head>
    <title>文字跟随鼠标移动实例</title>
    <script language="JavaScript">
    
    <!--
    var x,y;
    var i=0;
    var ismove=0;
    function canmove(){
    x=document.body.scrollLeft+event.clientX
    y=document.body.scrollTop+event.clientY
    ismove=1
    }
     function move(){
    if(ismove){
    movetext.style.posLeft=x+20
    movetext.style.posTop=y
    }
    
    setTimeout('move()',1)}
    -->
    
    </script >
    </head>
    <body "move()"  onMouseMove="canmove()" >
    <div id="movetext" style="position:absolute; left:200px;top:18px;z-index:"6">
    哈哈,你是甩不掉我的
    </div>
    </body>
    </html>
    

    ##问题
    用谷歌打不开 要用ie具体什么原因,我不晓得,欢迎留言

    展开全文
  • MFC 文字跟随鼠标移动

    热门讨论 2011-08-30 10:49:15
    MFC中实现文字可以跟随鼠标任意移动的功能。
  • 这是三个文字跟随鼠标移动而变化的javascript 的例子,希望大家好好利用。
  • 文字跟随鼠标移动即是实时获取鼠标位置,并将文字的位置设置为鼠标的位置,用left和top即可控制文字的位置。 html  hint为存放文字的div,必须设置position它才会跟随鼠标的位置移动而移动,一般用absolute。  ...

    效果图

    方法

    文字跟随鼠标移动即是实时获取鼠标位置,并将文字的位置设置为鼠标的位置,用left和top即可控制文字的位置。

    html

     hint为存放文字的div,必须设置position它才会跟随鼠标的位置移动而移动,一般用absolute。

     

    <div id="clickme1">点我DOM</div>
    <div id="clickme2">点我JQuery</div>
    <div id="hint" style="position: absolute;"></div>

    js

     上面是js的原生方法,下面是jquery方法,两个都可以直接调用执行。 

     

    //提示跟随鼠标移动而移动功能
    
    // DOM
    function WordsFollowMouseDOM(hintwords) {
        document.addEventListener("mousemove", function (e) {
            var myhint = document.getElementById("hint");
            myhint.style.left = e.clientX + 8 + "px";
            myhint.style.top = e.clientY + 2 + "px";
            switch (hintwords) {
                case 1:
                myhint.innerHTML = "我是文字跟随鼠标1。";
                myhint.style.display = 'block';
                break;
                case 2:
                myhint.innerHTML = "我是文字跟随鼠标2。";
                myhint.style.display = 'block';
                break;
                default:
                myhint.innerHTML = "";
                myhint.style.display = 'none';
                break;
            }
        });
    }
    
    // JQuery
    function WordsFollowMouseJQuery(hintwords) {
        document.addEventListener("mousemove", function (e) {
            var myhint = $("#hint");
            $(myhint).css({
                "left": e.clientX + 8 + "px",
                "top": e.clientY + 2 + "px"
            });
            switch (hintwords) {
                case 1:
                    $(myhint).text("我是文字跟随鼠标3。");
                    $(myhint).css({"display":  "block"});
                    break;
                case 2:
                    $(myhint).text("我是文字跟随鼠标4。");
                    $(myhint).css({"display":  "block"});
                    break;
                default:
                    $(myhint).text("");
                    $(myhint).css({"display":  "none"});
                    break;
            }
        });
    }
    $("#clickme1").click(function(){
        WordsFollowMouseDOM(1);
    });
    $("#clickme2").click(function(){
        WordsFollowMouseJQuery(1);
    });

    完整代码为:   可直接使用

     

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"/>
    	<title>文字跟随鼠标</title>
    	<meta name="viewport" content="width=device-width"/>
    	<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    </head>
    <body>
    	<div id="clickme1">点我DOM</div>
    	<div id="clickme2">点我JQuery</div>
    	<div id="hint" style="position: absolute;"></div>
    	<script type="text/javascript">
    	
    	//提示跟随鼠标移动而移动功能
    
    	// DOM
    	function WordsFollowMouseDOM(hintwords) {
    		document.addEventListener("mousemove", function (e) {
    			var myhint = document.getElementById("hint");
    			myhint.style.left = e.clientX + 8 + "px";
    			myhint.style.top = e.clientY + 2 + "px";
    			switch (hintwords) {
    				case 1:
    				myhint.innerHTML = "我是文字跟随鼠标1。";
    				myhint.style.display = 'block';
    				break;
    				case 2:
    				myhint.innerHTML = "我是文字跟随鼠标2。";
    				myhint.style.display = 'block';
    				break;
    				default:
    				myhint.innerHTML = "";
    				myhint.style.display = 'none';
    				break;
    			}
    		});
    	}
    
    	// JQuery
    	function WordsFollowMouseJQuery(hintwords) {
    		document.addEventListener("mousemove", function (e) {
    			var myhint = $("#hint");
    			$(myhint).css({
    				"left": e.clientX + 8 + "px",
    				"top": e.clientY + 2 + "px"
    			});
    			switch (hintwords) {
    				case 1:
    				$(myhint).text("我是文字跟随鼠标3。");
    				$(myhint).css({"display":  "block"});
    				break;
    				case 2:
    				$(myhint).text("我是文字跟随鼠标4。");
    				$(myhint).css({"display":  "block"});
    				break;
    				default:
    				$(myhint).text("");
    				$(myhint).css({"display":  "none"});
    				break;
    			}
    		});
    	}
    
    
    
    	$("#clickme1").click(function(){
    		WordsFollowMouseDOM(1);
    	});
    	$("#clickme2").click(function(){
    		WordsFollowMouseJQuery(1);
    	});
    </script>
    </body>
    </html>

     

    下载完整代码learning-everything/javascript/word_follow_mouse

     

    展开全文
  • 文字跟随鼠标移动的效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery</title> <style> body{height:3000px; backgrou.....
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Jquery</title>
    <style>
    body{height:3000px; background:#09F;}
    .wenzi{position:absolute; left:0; top:0;}
    p{cursor:pointer;}
    </style>
    
    <script src="jquery.js" type="text/javascript"></script>
    <script>
    $(function(){
        $(document).mousemove(function(e){var x=e.pageX-$('p').width()/2;    //获取鼠标的x坐标
            var y=e.pageY-$('p').height()/2-10;   //获取鼠标的y坐标
             $('.wenzi').css({'left':x,'top':y},1000)
        });
    })
    </script>
    </head>
    <body>
    <p class='wenzi'>这是一段文字</p>
    </body>
    </html>

     

    posted on 2015-08-20 20:37 TXXT 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/txxt/p/4746213.html

    展开全文
  • 根据网上文档修改的,网上的都不能用,现在这个在火狐浏览器不能用
  • C#文字跟随鼠标移动

    千次阅读 2017-02-24 15:21:12
    原文转自:... 1、WinForm中,左击后鼠标右侧会出现文字,会跟随鼠标一起移动。放开后效果消失。代码如下: private void Form1_MouseMove(object sender, MouseEventArgs e)  {  

    原文转自:http://blog.csdn.net/plutus_sutulp/article/details/7817781


    1、WinForm中,左击后鼠标右侧会出现文字,会跟随鼠标一起移动。放开后效果消失。代码如下:

    private void Form1_MouseMove(object sender, MouseEventArgs e)
            {
                this.label2.Location = new Point(e.X + 10, e.Y);
                this.label2.Text = "当前坐标:"+e.X + "," + e.Y;
            }

            private void Form1_MouseDown(object sender, MouseEventArgs e)
            {
    if(e.Button == MouseButtons.Left)
    {
                this.label2.Visible = true;
    }//判断是否为左键
            }

            private void Form1_MouseUp(object sender, MouseEventArgs e)
            {
                this.label2.Visible = false;
            }

    提示信息:
    MouseMove:当鼠标在窗体移动的触发事件,跟e获取x,y的坐标

    MouseDown:当按下鼠标的时候,判断是否为左键,如果true,就把label.visible=true;设置显示,

    MouseUp:当放开(弹出)鼠标的时候,就直接设置Label为visible=false 

    2、C#当鼠标移动到一个panel上是,显示一下信息,当鼠标移走的时候信息没了。
    拖一个 ToolTip 控件到窗体里。窗体里的控件就会自动有一个 "tooltip 上的 ToolTip"属性,你想显示什么提示就在这里写什么。
    如果你要动态的去设置这个提示 代码是 this.toolTip1.SetToolTip(this.panel1, "鼠标放这里的提示");
    补充,如果你是asp.net中的panel控件的话,直接去设置该控件的ToolTip属性即可。

    3、在C#中,我如何实现鼠标移动到某个画图去就显示文字或点击就执行代码?
    代码如下:public void gd_(int x, int y,int w,int h)
            {         
                Graphics g = this.CreateGraphics();   
                g.DrawRectangle(new Pen(Color.Black, 1), x, y, w, h );
            }
    上面代码我定义了一个矩形,我想鼠标移动到这个矩形区域就显示成手的形状和点击就会执行textbox1.Text="sss";这段代码,我如何能实现?谢谢各位大侠了! 

    你可以把弄个label 
    然后使用这个label的鼠标悬停(mousehover)事件 
    在这个事件执行时把你想显示的现实出来就好了
    this.Cursor = Cursors.Hand; //手型
    this.Cursor = Cursors.Default;//恢复 

    4、c#限制鼠标移动问题
    我想让鼠标只能在form窗体范围内,怎么实现 

    不是control即更简单啦,就下面一行。
    Cursor.Clip = form.bounds;

    如果是控件control的话,
    那就:
    Rectangle bounds = control.Bounds;
    bounds.Location = control.PointToScreen(bounds.Location);
    Cursor.Clip = bounds; 

    5、c#如何限制鼠标的移动范围
    让鼠标在一个固定的范围内移动,不能移动到范围外面去

    int   titleHeight   =   System.Windows.Forms.SystemInformation.CaptionHeight;   
      Point   myFormPoint   =   this.PointToScreen(new   Point(0,0-titleHeight));   
      Rectangle   rect   =   new   Rectangle(myFormPoint,   new   Size(this.ClientRectangle.Width,this.ClientRectangle.Height   +   titleHeight));   
      System.Windows.Forms.Cursor.Clip   =   rect; 

    6、c# 移动鼠标复制坐标区域图像
    制作要点:

    【1.Point对象的应用。

    【2.PointToScreen()方法的应用。

       该方法可以将制定工作区的位置计算成屏幕坐标,其语法结构如下:

          public  System.Drawing.Point PointToScreen(System.Drawing.Point p)

       其中参数p表示要转换的工作区坐标System.Drawing.Point。

    【3.Graphics对象的应用。

    【4.Size对象的应用。

    【5.Graphics对象的CopyFromScreen()方法的应用。

      该方法可以执行颜色数据从屏幕到System.Drawing.Graphics的绘图图面的位块传输,其语法结构如下:

         public void CopyFromScreen(int sourceX,int sourceY,int destinationX,int destinationY,System.Drawing.Size blockRegionSize)

      各参数意义如下:

      1)sourceX:位于源矩形左上角的点的x坐标。

      2)sourceY:位于源矩形左上角的点的y坐标。

      3)destinationX:位于目标矩形左上角的点的x坐标。

      4)destinationY:位于目标矩形左上角的点的y坐标。

      5)blockRegionSize:要传输的区域大小。

    制作步骤:

    新建一个Windows窗体应用程序。设置"Text"属性为“移动鼠标复制坐标区域图像”。

    添加代码:

    双击窗体中"MouseMove"事件,添加:

     private void Form1_MouseMove(object sender, MouseEventArgs e)
            {
                Point myp = this.PointToScreen(e.Location);
                Graphics myg = this.CreateGraphics();
                Size mys = new Size(100,100);
                myg.CopyFromScreen(myp.X-50,myp.Y-50,0,0,mys);
                myg.Dispose();
            }

    展开全文
  • 呈上code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .sp{ ... position:absolute...
  • 文字跟随鼠标<!--body{ background-color:#004593;}.spanstyle{ color:#fff000; font-family:"Courier New"; font-size:18px; font-weight:bold; position:absolute; /* 绝对定位 */ top:-50px;}
  • 层 ,文字跟随鼠标移动效果

    千次阅读 2014-03-24 08:49:50
    页面上的跟随鼠标文字 onmousemove="mover()"> POSITION: absolute" ,> function mover() { document.all.x1.style.left = event.clientX+10; document.all.x1.style.top = event.clientY+10; }
  • 可能首先会想到SetROP2()函数,利用这个函数在鼠标移动的时候将上次的文字擦除再显示当前文字,可SetROP2()对于DrawText()输出文本不起作用,因 为其没有用到画笔,所以SetROP2()可以用来当作“橡皮线”而不是整块...
  • function fnINews() { var aA=$("#iNewsList a"); var aLi=$("#iNewsList li"); var iMtNow=0;... 这段JS 就在你说的那个里面 可以看的很清楚啊 通过 鼠标事件 +CSS 实现的 那个CSS 也可以dong 下来 你试试看
  • head .flytxt{ color:#006600; filter:Glow(Color=#yellow,Strength=2); font-weight:bold; position:absolute; top:-50px; visibility:visible} 
  •  <center><h1>文字跟随鼠标</h1></center>    <!--Beginning of JavaScript-  for(i=0;i;i++)  {  document.write("<span id='span"+i+"' class='spanstyle'>");  document.write(message[i]);  document....
  • 文字跟随鼠标移动轨迹移动,文字成波浪效果
  • 文字跟随鼠标

    2010-06-02 13:26:31
    实现文字跟随鼠标移动,即鼠标移动到任何一个地方都 可以实现文字的移动
  • 跟随鼠标移动文字

    2014-02-24 09:39:19
    跟随鼠标移动文字精简版+详细版 两个大同小异但是为了新手理解还是很有帮助的 用记事本打开看源代码
  • 插件描述:随着鼠标的晃动,各个图片也在相当的相对运动。 参考示例:http://www.jq22.com/jquery-info5009
  • JavaScript-跟随鼠标移动文字

    千次阅读 2018-02-05 00:20:41
    文字跟随鼠标移动t <!-- style是html元素的一个属性,在这里可以直接设置元素的样式 这里的.move_out应该是最后这个字体的属性(?不是很清楚) Position属性有四个可选值,它们分别是:static、absolute、...
  • 字体跟随鼠标移动

    2014-12-06 10:58:45
    字体跟随鼠标移动
  • javascript网页编程从入门到精通,实现随机颜色文本跟随鼠标移动
  • 易语言-文字跟随鼠标

    2021-06-29 23:24:44
    程序功能:设置文字跟随鼠标一起移动。程序过程:将文字在透明标签中显示,而透明标签所在窗口随鼠标移动。p>程序支持:需要 扩展界面支持库一 的支持,其它说明:代码编写成模块接口形式,方便移植到其它程序中使用...
  • 利用低级鼠标钩子,监控鼠标位置,使得文字跟随鼠标移动,可以为水印,小游戏工具,提供思路。个人测试作品,不喜勿喷,水平有限,错误难免,另外没有注释,见谅
  • wpf动画 - 跟随鼠标移动

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,416
精华内容 2,166
关键字:

文字跟随鼠标移动