尾随鼠标旋转的文字

本文实例讲述了JavaScript如何实现文字跟随鼠标特效。分享给大家供大家参考。具体如下:

[Ctrl+A 全选
注:如需引入外部Js需刷新才能执行]

css3过渡属性结合jq,如果直接复制代码运行,需要加载一个jquery文件

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

可能首先会想到SetROP2()函数,利用这个函数在鼠标移动的时候将上次的文字擦除再显示当前文字,可SetROP2()对于DrawText()输出文本不起作用,因
为其没有用到画笔,所以SetROP2()可以用来当作“橡皮线”而不是整块“橡皮”……

运行效果图如下:

vnsc威尼斯城官方网站,这是一段跟随鼠标旋转的文字,我希望字体在旋转的时候,每一个字的颜色都互不相同。不知道应该如何实现呢?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m</title>
</head>
<style>
/* CSS 预设*/
*{ margin:0; padding:0;}
a{ text-decoration:none;}
img{ border:none;}
ul{ list-style:none;}
body{ color:#222121; font-size:12px; font-family:"宋体"; background-color:#fefefe}
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
/*clear*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
/*demo4*/
.demo{ margin:0 50px;}
.hover-list{ line-height:40px; width:500px;}
.hover-list li{ height:40px; border-bottom:1px solid #969; position:relative;}
.hover-list li a span{ width:12px; height:40px;cursor:pointer;transition:all .1s cubic-bezier(.06,1.15,1,1.4) 0s;}
.hover-list li a{ color:#39F; cursor:pointer;}
</style>
<body>
<div class="demo">
  <div class="wrapper box-con">    
    <ul class="hover-list">
      <li><a href="http://www.miaov.com/2013/#" target="_blank">我们内地,大红撒谎道夫们内地道夫们内地</a></li>
      <li><a href="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地,大红撒谎</a></li>
      <li><a href="#2">是我们内地,道夫们内地大红撒谎</a></li>
      <li><a href="#2">大红撒方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地谎</a></li>
      <li><a href="#2">我们内地,大红撒谎道夫们内地道夫们内地</a></li>
      <li><a href="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地,大红撒谎</a></li>
      <li><a href="#2">是我们内地,道夫们内地大红撒谎</a></li>
    </ul>
  </div>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){

//demo
  //可以变化的参数
  var setccid=$(".hover-list");//设置ul的class,添加效果
  var setleft=12;//设置字与字之间的left值
  var setskip=10;//设置上下抖动值

  var hov=setccid.children("li");
  for(var i=0;i<hov.length;i++){
    var hovtext=hov.eq(i).find("a").html();
    var hovtextl=hovtext.length;
    //alert(hovtextl)
    var hovtexta=hovtext.split("");
    var arrys=[];
    for(var j=0;j<hovtexta.length;j++){
      arrys.push(hovtexta[j].replace(hovtexta[j],""+hovtexta[j]+""))
    };
    hov.eq(i).find("a").html(arrys);
    var hovtextspan=hov.eq(i).find("a").find("span").length;
    for(var z=0;z<hovtextspan;z++){
      hov.eq(i).find("a").find("span").eq(z).css({position:"absolute",top:"0px"});
      hov.eq(i).find("a").find("span").eq(z).css('left',z*setleft);
    }
  };

  setccid.children("li").find("a").children("span").hover(function(event){
    var sppz=$(this).index();
    var sppzp=$(this).parent().children("span");
    var sppzpl=$(this).parent().children("span").length;
    var sppy=$(this).offset().top;
    var ey=event.pageY;
    var chay=sppy+$(this).height()/2;
    var sppcony=$(this).position().top; 
    if(ey>=chay) {
      $(this).css('top',sppcony+setskip);
      var lla=sppcony+setskip;
      var lll=lla;
      var llr=lla;
      var teshu=(sppz-lla)>0?sppz-lla:0;    
      for(var xx=sppz+1;xx<=sppz+lla;xx++){
        llr=llr-1;
        sppzp.eq(xx).css('top',llr);   
      };
      for(var x=sppz-1;x>=teshu;x--){
        lll=lll-1;
        sppzp.eq(x).css('top',lll); 
      }; 
    }else{
      $(this).css('top',sppcony-setskip);
      var lla=sppcony-setskip;
      var lll=lla;
      var llr=lla;
      var teshu=(sppz+lla)>0?sppz+lla:0;
      for(var xxxx=sppz+1;xxxx<=sppz-lla;xxxx++){
        llr=llr+1;
        sppzp.eq(xxxx).css('top',llr);
      }; 
      for(var xxx=sppz-1;xxx>=teshu;xxx--){
        lll=lll+1;
        sppzp.eq(xxx).css('top',lll);
      };           
    }    
  },function(event){
    $(this).css('top',"0px");
    $(this).parent().children("span").css('top',"0px");
  });
//end    
});
</script>
</html>

这是一段跟随鼠标旋转的文字,我希望字体在旋转的时候,每一个字的颜色都互不相同。不知道应该如何实现呢?

一种实现方法:在鼠标移动事件函数中绘制文字,首次产生鼠标移动事件的时候先保存要输出的文字区域的背景,然后在文字区域输出文字,以后的鼠标
事件发生后则先利用保存的原文字区域的背景去除原文字区域的文字(即绘制原文字区域背景到原文字区域),然后再保存要输出的文字区域的背景,然
后在文字区域输出文字。

vnsc威尼斯城官方网站 1

[Ctrl+A 全选
注:如需引入外部Js需刷新才能执行]

以上所述就是本文的全部内容了,希望大家能够喜欢。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

多说一点,鼠标移动事件函数OnMouseMove的第一个参数nFlags为一些特定的按键是否被按下的标志,

<HTML>
<HEAD>
<TITLE>鼠标特效--文本围绕鼠标</TITLE>
</HEAD>

<BODY>

<br><br>
<center>
<font color="red"><h2>鼠标特效--文本围绕鼠标</h2></font>
<hr width=300>
<br><br>

<!-- 案例代码开始 -->

<script language=JavaScript>

var cx=0;
var cy=0;
var val=0;

function MouseTextStart(){ 
 for(i=1;i<=7;i++) { val=setInterval("MouseTextShow(1)",20); 
<!-- [Step1]: 这里可以设置文本的抖动速度,数值大速度慢 --> 
 setInterval("MouseTextfollow("+i+")",100); }
} 

function MouseTextShow(i){ 
 var w=eval("MouseText"+i);
 with(w.style) { visibility="visible"; s=parseInt(fontSize); if(s>=200)s-=100; else if(s>90&&s<=100) { s-=85; clearInterval(val); if(i<7)val=setInterval("MouseTextShow("+(i+1)+")",20); } 
 fontSize=s; } 
}

function MouseTextfollow(i){ 
 var x;
 if(i<6)x=cx-70+i*10;
 else x=cx-35+i*10;
 var y=cy-10+Math.floor(Math.random()*40);
 w=eval("MouseText"+i);
 with(w.style) { left=x.toString()+"px"; top=y.toString()+"px"; }
}

function MouseTextLocation(){ 
 cx=window.event.x;
 cy=window.event.y; 
}

document.onmousemove=MouseTextLocation;
<!-- [Step2]: 在此能够更改文本的总数目 -->
var MouseText=new Array(7);
<!-- [Step3]: 这里可以按序增加文本信息 -->
MouseText[1]="脚"; MouseText[2]="本"; MouseText[3]="之"; MouseText[4]="家"; MouseText[5]="欢"; MouseText[6]="迎"; MouseText[7]="你";
<!-- [Step4]: 在此能够更改文本的颜色 -->
for(i=1;i<=7;i++) document.write("<div id='MouseText"+i+"' style='width:20px; height:20px; position:absolute; font-size:1000; visibility:hidden'><font face='Forte' color='#FF0000'>"+MouseText[i]+"</font></div>");

MouseTextStart();

</script>

<!-- 案例代码结束 -->


</BODY>

</HTML>

您可能感兴趣的文章:

  • jQuery实现动态表单验证时文本框抖动效果完整实例
  • jQuery实现网页抖动的菜单抖动效果
  • jQuery插件jRumble实现网页元素抖动
  • jQuery通过扩展实现抖动效果的方法
  • jquery果冻抖动效果实现方法
  • Jquery右下角抖动、浮动
    实例代码(兼容ie6、FF)
  • jquery.messager.js插件导致页面抖动的解决方法
  • 基于jquery的仿百度的鼠标移入图片抖动效果
  • jQuery模拟窗口抖动效果

全选 注:如需引入外部Js需刷新才能执行]
这是一段跟随鼠标旋转的文字,我希望字体在旋转的时候,每一个字的颜色都互不相同。不…

MK_CONTROL Set if the CTRL key is down.

希望本文所述对大家的javascript程序设计有所帮助。

MK_LBUTTON Set if the left mouse button is down.

您可能感兴趣的文章:

  • javascript实现图片跟随鼠标移动效果的方法
  • js实现简单鼠标跟随效果的方法
  • js实现文字跟随鼠标移动而移动的方法
  • javascript DIV跟随鼠标移动
  • js图片跟随鼠标移动代码
  • javascript跟随鼠标的文字带滚动效果
  • javascript跟随鼠标x,y坐标移动的字效果
  • Js鼠标跟随代码小手点击实例方法
  • js实现的跟随鼠标移动的时钟效果(中英文日期显示)
  • js实现鼠标跟随运动效果

MK_MBUTTON Set if the middle mouse button is down.

MK_RBUTTON Set if the right mouse button is down.

MK_SHIFT Set if the SHIFT key is down.

eg:

void Cmfc_testDlg::OnMouseMove(UINT nFlags, CPoint point)
{
    // TODO: 在此添加消息处理程序代码和/或调用默认值
    if(nFlags == MK_LBUTTON)
    {
        ......
    }
    if(nFlags == (MK_CONTROL | MK_SHIFT))
    {
            ......
    }

    ......

    CDialogEx::OnMouseMove(nFlags, point);
}

 

以下为实现代码:

//保存指定区域的背景到参数MemBitmap
void ScreenShot(CBitmap *MemBitmap, CDC* pDC, int Xcoords, int Ycoords, int Width, int Height)
{    
    CDC memDC; 
    memDC.CreateCompatibleDC(pDC);        
    MemBitmap->CreateCompatibleBitmap(pDC, Width, Height);    
    memDC.SelectObject(MemBitmap);    
    memDC.BitBlt(0, 0, Width, Height, pDC, Xcoords, Ycoords, SRCCOPY);      
    memDC.DeleteDC();    
}

//鼠标移动事件函数
void CXXXDlg::OnMouseMove(UINT nFlags, CPoint point)
{    
    // TODO: 在此添加消息处理程序代码和/或调用默认值   

    CClientDC cdc(this); 

    if(!m_first_show_flag)        
    {          
        m_OldX = point.x+10;            
        m_OldY = point.y-20;   

        m_MemBitmap.DeleteObject();            
        ScreenShot(&cdc, &m_MemBitmap, m_OldX, m_OldY, 110, 50);//保存要输出的文字区域的背景图片 

        cdc.SetBkMode(TRANSPARENT);
        CString strPointMove;
        strPointMove.Format(_T("%d, %d"), point.x, point.y);
        cdc.DrawText(strPointMove, CRect(m_OldX,m_OldY, m_OldX+110, m_OldY+50), DT_LEFT);//在文字区域输出坐标 

        m_first_show_flag = true;    
    }        
    else        
    {                 
        BITMAP bm;            
        m_MemBitmap.GetObject (sizeof(BITMAP), &bm);            
        CDC MemDC;      
        MemDC.CreateCompatibleDC(&cdc);            
        CBitmap *pOldBitmap=MemDC.SelectObject(&m_MemBitmap);             
        cdc.BitBlt(m_OldX, m_OldY, bm.bmWidth , bm.bmHeight, &MemDC, 0, 0, SRCCOPY);//利用保存的原文字区域的背景图片去除原来文字区域的

文字                
        MemDC.SelectObject(pOldBitmap);            
        MemDC.DeleteDC();

        m_OldX = point.x+10;//新坐标作为下次使用的前一次坐标            
        m_OldY = point.y-20;            
        m_MemBitmap.DeleteObject();            
        ScreenShot(&cdc, &m_MemBitmap, m_OldX, m_OldY, 110, 50);//保存要输出的文字区域的背景图片 

        cdc.SetBkMode(TRANSPARENT);
        CString strPointMove;
        strPointMove.Format(_T("%d, %d"), point.x, point.y);
        cdc.DrawText(strPointMove, CRect(m_OldX, m_OldY, m_OldX+110, m_OldY+50), DT_LEFT);//在文字区域输出坐标                   
    }

    CDialog::OnMouseMove(nFlags, point);
}

在实际运行中发现,如果窗口为自绘,比如在OnPaint()中整个窗口被绘制成了白色,那么窗口显示的时候,如果鼠标在当前窗口区域则会出现文字区域
背景没有自绘的情况,我猜是窗口显示的时候如果鼠标在当前窗口则会产生鼠标移动事件,而窗口重绘事件在其后产生,即先进入OnMouseMove(),再进
入OnPaint(),所以才导致这种情况。一个解决方法就是设置一个全局或成员标志,当自绘完成后设置该标志为真,在OnMouseMove中先判断该标志,如果
为假的话则什么都不做。

参考原文:

相关文章