鼠标特效

原创 2007年10月12日 10:25:00

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
  <HTML>
      <HEAD>
          <title>MouseOverPopWindowDemo</title>
          <script language="javascript">
   <!--       
               //代码整理:Melodicsoul  http://wintersun.cnblogs.com
            //2007年5月21日
               var FADINGTOOLTIP
             var wnd_height, wnd_width;
             var tooltip_height, tooltip_width;
            var tooltip_shown=false;
             var    transparency = 100;
             var timer_id = 1;
           
             // override events
            window.onload = WindowLoading;
              window.onresize = UpdateWindowSize;
            document.onmousemove = AdjustToolTipPosition;
           
             setTimeout('window.location.reload(true)', 1140000); // 19 minutes
           
            function DisplayTooltip(tooltip_text)
            {
                 if (FADINGTOOLTIP) {
                     FADINGTOOLTIP.innerHTML = tooltip_text;
                    tooltip_shown = (tooltip_text != "")? true : false;
                    if(tooltip_text != "")
                    {
                         // Get tooltip window height
                        tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;
                         transparency=0;
                         ToolTipFading();
                     }
                     else
                    {
                        clearTimeout(timer_id);
                         FADINGTOOLTIP.style.visibility="hidden";
                     }
               }
             }
 
             function AdjustToolTipPosition(e)
             {
                 if (navigator.userAgent.toLowerCase().indexOf("msie") != -1)
                   e = event;
                 if( tooltip_shown )
                 {
                    offset_y = 20;//(e.clientY + tooltip_height - document.body.scrollTop + 30 >= wnd_height) ? - 15 - tooltip_height: 20;
                    FADINGTOOLTIP.style.visibility = "visible";
                    FADINGTOOLTIP.style.left = Math.min(wnd_width - tooltip_width - 10 , Math.max(3, e.clientX + 6)) + document.body.scrollLeft + 'px';
                   FADINGTOOLTIP.style.top = e.clientY + offset_y + document.body.scrollTop + 'px';
                 }
            }

             function WindowLoading()
             {
                FADINGTOOLTIP=document.getElementById('FADINGTOOLTIP');
    
                  // Get tooltip  window width               
                 tooltip_width = (FADINGTOOLTIP.style.pixelWidth) ? FADINGTOOLTIP.style.pixelWidth : FADINGTOOLTIP.offsetWidth;
               
                 // Get tooltip window height
                 tooltip_height=(FADINGTOOLTIP.style.pixelHeight)? FADINGTOOLTIP.style.pixelHeight : FADINGTOOLTIP.offsetHeight;

                  FADINGTOOLTIP.style.left = 0;
                 FADINGTOOLTIP.style.top = 0;

                UpdateWindowSize();
             }
            
            function ToolTipFading()
             {
                 if(transparency <= 100)
                 {
                     FADINGTOOLTIP.style.filter="alpha(opacity="+transparency+")";
                    transparency += 10;
                    timer_id = setTimeout('ToolTipFading()', 10);
                 }
             }
 
             function UpdateWindowSize()
            {
                  wnd_height=document.body.clientHeight;
                wnd_width=document.body.clientWidth;
            }
            -->
        </script>
    </HEAD>
     <body>
         <form name="Form1">
             <DIV id="mainPane">
                <a href="http://wintersun.cnblogs.com" onmouseover="DisplayTooltip('<iframe src=http://wintersun.cnblogs.com width=100% height=300px scrolling=no></iframe>');" onmouseout="DisplayTooltip('');">鼠标划过</a>
            </DIV>   
           <div class="FadingTooltip" id="FADINGTOOLTIP" style="Z-INDEX: 103; LEFT: 16px; VISIBILITY: hidden; WIDTH: 360px; POSITION: absolute; TOP: 478px; HEIGHT: 30px">
            </div>
         </form>
     </body>
 </html>
 

【HTML】鼠标特效

鼠标特效 CSS鼠标控制箭头 手形 移动 帮助 箭头朝上双向 指示 等待
  • idealistic
  • idealistic
  • 2017年04月16日 10:32
  • 499

一个鼠标点击水波纹理shader

一张图片,通过鼠标点击产生水波纹理,shader比较简单,算法主要在C#那边,多线程优化计算 用下面shader创建一个材质,创建一个面片或Cube并挂上下面C#脚本,设置图片像素,默认是256*2...
  • zuig2
  • zuig2
  • 2017年01月06日 22:40
  • 1190

前端成长之路—canvas实现跟随鼠标和跟随手指粒子特效

html lang="en"> head> meta charset="UTF-8"> title>粒子跟随特效title> style> *{ ...
  • IForDreams
  • IForDreams
  • 2017年07月20日 03:30
  • 1363

canvas鼠标移动动态星空背景特效

这个可以作为背景,里面是直线匀速运动的散点,当两个点直接小于一定距离时会通过canvas生成一条线相连接。而且当鼠标移入时,鼠标指针一定范围内的点会和鼠标相连接,从而控制散点移动。总的来说还是很好玩的...
  • zh_rey
  • zh_rey
  • 2017年05月03日 14:06
  • 1884

跟随鼠标一起流动的粒子动画 JS 原生代码

粒子效果演示 html, body { text-align: center; margin:0; padding:0; background: #000000; color: #6666...
  • Jensen_Yao
  • Jensen_Yao
  • 2017年03月22日 19:47
  • 1079

炫酷的鼠标特效JS 原生代码

star window.onload = function () { C = Math.cos; // cache Math objects ...
  • Jensen_Yao
  • Jensen_Yao
  • 2017年03月22日 19:34
  • 1025

JQ鼠标滑过特效

从网上找到一个JQ判断鼠标从什么方向进入一个容器的代码,不过没有注释,一眼看上去可能有点难理解,于是我就写了一个分析帮助理解 代码: 判断鼠标进入方向 html,body...
  • bluesky466
  • bluesky466
  • 2014年12月03日 22:54
  • 1235

鼠标移动3D翻转动画特效

好久没有更新文章咯,今天我为大家带来一个酷炫的3D翻转特效效果例子(该效果是用的纯html+css3实现的哦) 特别指示: 1、用到咯;perspective a) perspe...
  • chenxi1025
  • chenxi1025
  • 2016年08月04日 14:21
  • 917

动态背景线条,鼠标移动线条汇聚---背景特效

html代码:css代码:html, body { background: #000; margin: 0; }canvas { position: absolute; }js代码:$(f...
  • lp2659359879
  • lp2659359879
  • 2016年10月19日 15:36
  • 3276

CSS特效——有趣儿的鼠标模糊效果

彩色文字变换 + 动画相框 + 图片模糊 = 一个有趣儿的鼠标模糊效果。 这次学习了百度前端学院的一个课程,增加了一些CSS3方面的前端知识。...
  • as645788
  • as645788
  • 2017年06月15日 21:33
  • 239
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标特效
举报原因:
原因补充:

(最多只允许输入30个字)