`

javascript 结合div 效果

    博客分类:
  • ajax
阅读更多
<html>  
<head>  
 
<title>tip</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
 
</head>  
 
<body>  
<script>  
 
 
 
if(!document.attachEvent)  
{  
    document.attachEvent = function(){document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}  
}  
 
document.attachEvent("onmouseover",function(e)  
{  
    var tip = "";  
 
    if(typeof(event)=="undefined"){  
        tip = e.target.getAttribute("tips")  
    }else{  
        e    = event;  
        tip = e.srcElement.tips;  
    }  
 
      
    if(typeof(tip)!="undefined"&&tip.length>0)  
    {  
        var _tips = document.getElementById("myTip");  
          
        if(typeof(_tips)=="undefined"||_tips == null)  
        {  
            _tips        = document.createElement("div");  
            _tips.id    = "myTip";  
            _tips.style.position        = "absolute";  
            _tips.style.width            = "150px";  
            _tips.style.borderWidth        = "1px";  
            _tips.style.borderStyle        = "solid";  
            _tips.style.borderColor        = "gray";  
            _tips.style.fontSize        = "9pt";  
            _tips.style.backgroundColor    = "#ffffff";  
            _tips.style.color            = "#349045";  
 
              
            _tips.style.filter            = "progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)";  
            _tips.style.padding            = "5px 8px 3px 8px";  
              
 
            document.body.appendChild(_tips);              
            _tips.style.display            = "none";  
        }  
 
            _tips.style.display    = "";  
              
            _tips.innerHTML        = tip;  
            _tips.style.left = document.body.scrollLeft+e.clientX+10;   
            _tips.style.top = document.body.scrollTop+e.clientY+10;   
    }  
}  
);  
 
document.attachEvent('onmouseout',function(e)  
{     
    var _tips = document.getElementById("myTip");  
    if(_tips!=null)  
    {  
        _tips.style.display="none";  
    }  
}  
)  
</script>  
 
<a href="#" tips="自定义提示" >测试链接</a>  
<a href="#" >测试链接</a>     
<a href="#" tips="中华人民共和国中华人民共和国自中华人民共和国中华人民共和国自定义提示中华人民共和国中华人民共和国自定义提示中华人民共和国中华人民共和国自定义提示定义提示中华人民共和国中华人民共和国自中华人民共和国中华人民共和国自定义提示中华人民共和">测试链接</a>     
  <a href="#" tips="wwwwwwwwww" >测试链接</a>  
</body>  
</html> 

转载http://melin.iteye.com/?show_full=true
分享到:
评论

相关推荐

    使用div实现类似模式窗体效果

    今天研究了下用javascript结合DIV来制作当前窗体显示模式窗体,并使子窗体不能操作的一个小例子! 这个效果我通过参考赛我网上的个别效果而参考而来,他的比较复杂,因为结合了其他的一些功能,在这里我就是简要的总结下...

    JavaScript实现可拖拽的拖动层Div实例

    主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    117. 适合网站内容推广淡入淡出特效的jQuery焦点图结合文字导航切换特效(很精美) 118. 非常不错jQuery放大镜实例包下载(可放大图片与区域放大的AnythingZoomer插件) 119. 非常不错jQuery网页内容图片分类插件带...

    纯CSS结合DIV实现的右侧底部简洁悬浮效果

    右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果

    基于JavaScript技术的途游畅享网站设计

    ·JavaScript结合html与css进行框架调整 ·动画函数封装 ·自动轮播特效实现 ·运行网页,查看效果 4)相册展示鼠标事件特效设计与JavaScript功能代码实现 ·鼠标移上停止轮播并显示左右按钮特效实现 ·鼠标移出开始...

    用Div仿showModalDialog模式菜单的效果的代码

    今天研究了下用javascript结合DIV来制作当前窗体显示模式窗体,并使子窗体不能操作的一个小例子! 这个效果我通过参考赛我网上的个别效果而参考而来,他的比较复杂,因为结合了其他的一些功能,在这里我就是简要的总结下...

    ScrollNews 新闻无缝循环滚动切换特效 ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而并非是一行或几个简单图片构成的滚动。

    ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而...

    JavaScript网页特效范例宝典源码

    实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...

    使用div+css开发个人网站毕业设计.doc

    在技术上,采用了 Dreamweaver网站开发工具,以 HTML的超大功能结合 JAVAScript 的客户端语言,并加以 FLASH 等动画以增加网站的动态效果。这样的构造有利于以后对网站系统开发的把握,并给以 后的开发积累一定的...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    javascript代码常用大全

    12,DIV层相关(拖拽、显示、隐藏、移动、增加) 13,TABLAE相关(客户端动态增加行列,模拟进度条,滚动列表等) 14,各种&lt;object classid=&gt;相关类,如播放器,flash与脚本互动等 16, 刷新/模拟无刷新 异步...

    jQuery插件ImageFlyout弹出图片实现javascript放大图片功能

    结合jQuery插件Easing Plugin,可增强javascript图片放大和缩小过程中图片显示的效果。 一,自定义预加载提示图片 $('#biuuu a').flyout({loadingSrc:'thumb-loading.gif',outEase:'easeInCirc',inEase:'...

    javascript 常用代码大全

    12,div层相关(拖拽、显示、隐藏、移动、增加) 13,tablae相关(客户端动态增加行列,模拟进度条,滚动列表等) 14,各种相关类,如播放器,flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类(xmlhttp或iframe,...

    CSS.DIV样式与布局(笔记)

    CSS概念\CSS基本语法\CSS文字效果\CSS图片效果\CSS页面背景\CSS设置表格和表单样式\页面和浏览器元素\CSS制作实用菜单\CSS滤镜\理解DIV与CSS定位\CSS排版\网页变幻\CSS与JAVASCRIPT\CSS与XML的综合应用\CSS与AJAX的...

    javascript结合CSS实现苹果开关按钮特效

    苹果开关按钮效果~~ 关闭时 开启时 html 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=”en”&gt; &lt;head&gt;  &lt;meta charset=”UTF-8″&gt;  &lt;title&gt;apple button&lt;/title&gt; &lt;/head&gt; &lt...

    JS+DIV实现的卷帘效果示例

    主要介绍了JS+DIV实现的卷帘效果,结合具体实例形式对比分析了javascript响应鼠标事件动态操作页面元素属性实现展开与折叠效果的相关操作技巧,需要的朋友可以参考下

    精通JavaScript

    查看1.2.htm中noscript显示效果的方法如下: 1.将该实例复制到C:\Inetpub\wwwroot下; 2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中...

    用javascript和css模拟select的脚本

    传统的select控件比较难看,用css美化也达不到好的效果,而javascript和css结合起来,用div等元素模拟一个select达到想要的效果就很容易了。

    JS+DIV+CSS排版布局实现美观的选项卡效果

    主要介绍了JS+DIV+CSS排版布局实现美观的选项卡效果,通过简单的div+css布局结合JavaScript切换页面样式实现美观的选项卡效果,具有一定参考借鉴价值,需要的朋友可以参考下

    精通javascript

    查看1.2.htm中noscript显示效果的方法如下: 1.将该实例复制到C:\Inetpub\wwwroot下; 2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中...

Global site tag (gtag.js) - Google Analytics