posts - 89, comments - 241, trackbacks - 0, articles - 1
             :: 首頁 ::  :: 聯系 :: 聚合  :: 管理

          代碼收藏-經典的javascript自定義提示信息

          Posted on 2009-07-30 21:44 saobaolu 閱讀(391) 評論(0)  編輯  收藏 所屬分類: 前端
           1<html>
           2<head>
           3<title>tip</title>
           4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
           5</head>
           6<body>
           7<script>
           8if(!document.attachEvent)
           9{
          10 document.attachEvent = function(){document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
          11}

          12document.attachEvent("onmouseover",function(e)
          13{
          14 var tip = "";
          15 if(typeof(event)=="undefined"){
          16  tip = e.target.getAttribute("tips")
          17    }
          else{
          18        e = event;
          19        tip = e.srcElement.tips;
          20    }

          21    if(typeof(tip)!="undefined"&&tip.length>0)
          22    {
          23     var _tips = document.getElementById("myTip");
          24      if(typeof(_tips)=="undefined"||_tips == null)
          25        {
          26            _tips = document.createElement("div");
          27            _tips.id = "myTip";
          28            _tips.style.position = "absolute";
          29            _tips.style.width = "150px";
          30            _tips.style.borderWidth = "1px";
          31            _tips.style.borderStyle = "solid";
          32            _tips.style.borderColor = "gray";
          33            _tips.style.fontSize = "9pt";
          34            _tips.style.backgroundColor = "#ffffff";
          35            _tips.style.color = "#349045";          
          36            _tips.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)";
          37        _tips.style.padding = "5px 8px 3px 8px";
          38        document.body.appendChild(_tips);            
          39            _tips.style.display = "none";
          40        }

          41            _tips.style.display = "";
          42            _tips.innerHTML  = tip;
          43            _tips.style.left = document.body.scrollLeft+e.clientX+10
          44            _tips.style.top = document.body.scrollTop+e.clientY+10
          45    }

          46}

          47);
          48document.attachEvent('onmouseout',function(e)
          49{   
          50    var _tips = document.getElementById("myTip");
          51    if(_tips!=null)
          52    {
          53        _tips.style.display="none";
          54    }

          55}

          56)
          57
          </script>
          58<href="#" tips="自定義提示" >測試鏈接</a>
          59<href="#" tips="<h1>你好世界</h1>">測試鏈接</a>   
          60<href="#" tips="這里填寫tips">測試鏈接</a>   
          61
          62</body>
          63</html>
          最終代碼預覽
          http://dev.mobai.org/js/JS_Tags_Tips.html

          沒有所謂的命運,只有不同的選擇!
          主站蜘蛛池模板: 卢氏县| 灵武市| 乌恰县| 梁平县| 田林县| 东至县| 高尔夫| 宜春市| 永年县| 凤翔县| 六安市| 五莲县| 桑日县| 石阡县| 离岛区| 阿拉尔市| 宜黄县| 筠连县| 清镇市| 钦州市| 连江县| 东台市| 镶黄旗| 满城县| 榕江县| 五河县| 乌拉特中旗| 南宁市| 启东市| 布拖县| 岳西县| 卓尼县| 金乡县| 遵化市| 永兴县| 元朗区| 临城县| 桦南县| 武宣县| 陕西省| 家居|