跟随鼠标的旋转文字效果

脚本说明:
    把如下代码加入<body>区域中
    <script language="JavaScript">
    <!--
    yourLogo=‘http://www.CsrCode.cn/‘;
    logoFont=‘Arial‘;
    logoSize=1; // 1-7 only! for larger font sizes alter logoWidth/Height accordingly!
    logoColor=‘811188‘;
    logoWidth=70;
    logoHeight=70;
    logoSpeed=0.03;
    //Nothing needs altering below!
    yourLogo=yourLogo.split(‘‘);
    L=yourLogo.length;
    Result="<font face="+logoFont+" size="+logoSize+" color="+logoColor+">";
    TrigSplit=360/L;
    br=(document.layers)?1:0;
    if (br){
    for (i=0; i < L; i++)
    document.write(‘<layer name="ns‘+i+‘" top=0 left=0 width=14 height=14">‘+Result+yourLogo[i]+‘</font></layer>‘);
    }
    else{
    document.write(‘<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">‘);
    for (i=0; i < L; i++)
    document.write(‘<div id="ie" style="position:absolute;top:0px;left:0px;width:14px;height:14px">‘+Result+yourLogo[i]+‘</font></div>‘);
    document.write(‘</div></div>‘);
    }
    ypos=0;
    xpos=0;
    step=logoSpeed;
    currStep=0;
    Y=new Array();
    X=new Array();
    Yn=new Array();
    Xn=new Array();
    for (i=0; i < L; i++)
    {
    Yn[i]=0;
    Xn[i]=0;
    }
    (document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
    function Mouse(evnt){
    ypos = (document.layers)?evnt.pageY:event.y;
    xpos = (document.layers)?evnt.pageX:event.x;
    }
    (document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
    function animateLogo(){
    if (!br)outer.style.pixelTop=document.body.scrollTop;
    for (i=0; i < L; i++){
    var layer=(document.layers)?document.layers[‘ns‘+i]:ie[i].style;
    layer.top =Y[i]+logoHeight*Math.sin(currStep+i*TrigSplit*Math.PI/180);
    layer.left=X[i]+logoWidth*Math.cos(currStep+i*TrigSplit*Math.PI/180);
    }
    currStep-=step;
    }
    function Delay(){
    for (i=L; i >= 0; i--)
    {
    Y[i]=Yn[i]+=(ypos-Yn[i])*(0.1+i/L);
    X[i]=Xn[i]+=(xpos-Xn[i])*(0.1+i/L);
    }
    animateLogo();
    setTimeout(‘Delay()‘,20);
    }
    window.onload=Delay;
    // -->
    </script>
时间: 2024-11-14 02:47:19

跟随鼠标的旋转文字效果的相关文章

CSS3跟随鼠标的眼睛转动效果

<!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-

PS制作光束散射的旋转文字效果

下面就来介绍一下制作步骤(#^.^#) 1.新建一画布,背景用蓝色渐变.方向根据光束的照射来定. 2.用图形工具的路径画一个圆,然后添加文字.调整其间距和文字大小. 3.栅格化文字,并且复制一层.然后滤镜?模糊?动感模糊,可以重复两次,使其光线颜色加深. 3-1.角度要90度,不然就是横向的了. 3-2.给光线图层添加蒙板,在蒙板上加渐变, 让光线渐隐一下,ctrl+t后按住ctrl+shift+鼠标左键调整光线. 4.接着对文字图层也执行ctrl+t自由变换处理,把文字处理成旋转的效果,并把其

完整的html+css+javascript实现跟随鼠标移动显示选中效果

1,显示效果: 2,html结构 1 <div class="process_list-lpu"> 2 <div class="process_line"></div> 3 <div class="content_list"> 4 <ul> 5 <li><a href="javascipt:;">End customer get product

JS跟随鼠标旋转的图片

<html> <head> <title>JS跟随鼠标旋转的图片丨Daniel wellington</title> <script> <!-- Beginning of JavaScript - var x,y var step=5 var flag=1 var pause var timersmall var timerbig var isbigcircle=1 var pause=50 var bigradius var smallr

jQuery-鼠标经过显示大图并跟随鼠标效果插件

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=281 今天看完了<JavaScript语言精粹>这本书,还有时间,就决定写写jQuery插件练练手,实现的效果是,鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动:或是移动到提示文字上,也可以显示图片.并且含有方向判别功能,具体来说就是如果缩略图在页面的左半部分,则大图显示在鼠标的右侧,如果缩略图在页面的右半部

css实现鼠标经过导航文字偏位效果

<!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-Typ

通用元素跟随鼠标移动效果

封装鼠标指针定位是一件很有意义的事情,这样在日常开发中就不需要再为鼠标指针定位问题而犯愁了. 设计思路:能够根据传递的具体对象,以及相对鼠标指针的偏移值,即命令该对象能够跟随鼠标移动. JS代码: function getMousePos(o,x,y,event){ //o-->对象;x,y-->相对鼠标指针的偏移距离;event-->事件对象; var posX = 0,posY = 0; //临时变量 var event = event || window.event; //标准化事

JS实现导航条效果——current跟随鼠标hover移动

<!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-

css鼠标滑过出现文字效果

模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图                                鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&qu