`

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
分享到:
评论

相关推荐

    javascript操作DIV总结(弹出窗口篇)

    在JavaScript中,DOM(Document Object Model)操作是创建动态网页的关键技术之一,而DIV作为HTML中的一个块级元素,常被用作布局容器,通过JavaScript可以实现丰富的交互效果。本篇将聚焦于JavaScript如何操作DIV,...

    javascript浮动div,可拖拽div,遮罩层(div和iframe实现)

    通过 CSS 和 JavaScript 的结合使用,可以使 Div 元素在页面上自由移动,这种效果常用于弹出窗口、浮动广告等场景。 #### 实现方法 1. **CSS 定位**:使用 `position: absolute` 或 `position: fixed` 来定义 Div ...

    JavaScript 制作div圆角

    JavaScript制作div圆角是网页开发中的常见需求,它可以通过CSS3的border-radius属性来实现,但在某些不支持此属性...在实践中,应当结合CSS3的border-radius和JavaScript,确保在各种浏览器中都能得到良好的视觉效果。

    css + div 滑动弹出div效果

    结合JavaScript(尤其是jQuery库...总之,通过CSS和JavaScript(jQuery),我们可以轻松实现各种滑动弹出的div效果,增强网页的互动性和用户体验。设计时应考虑性能和可用性,确保过渡效果平滑且不影响页面的其他功能。

    div+javascript的弹出框

    在网页设计中,"div+javascript的弹出框"是一个常见的交互元素,它结合了HTML的div元素和JavaScript技术来创建动态的、可自定义的弹出窗口。这个标题所指的知识点主要涵盖两个部分:一是div元素及其布局,二是...

    WEB_DIV.rar_DIV_javascript div

    标签"div javascript_div"进一步确认了内容的重点是`&lt;div&gt;`元素和JavaScript的结合使用。JavaScript可以用来操纵DOM(文档对象模型)中的`&lt;div&gt;`元素,例如改变其显示状态、位置、内容或者应用动态效果。 在压缩包...

    javascript拖动div或table等网页元素

    JavaScript 提供了实现这一功能的强大支持,特别是对于div、table等网页元素的拖动操作。在这个主题中,我们将深入探讨如何使用JavaScript来实现这些元素的拖放功能,并兼容不同的浏览器,包括IE、Firefox、Opera和...

    JavaScript弹出窗口DIV层效果代码

    本文将深入解析如何使用纯JavaScript结合HTML与CSS实现一个基本的弹出窗口效果,特别聚焦于通过操作DIV元素来实现这一功能。 #### 核心知识点概述 1. **HTML结构设置**:定义用于弹出的DIV容器。 2. **CSS样式控制...

    DIV+CSS+JAVASCRIPT实现图片滚动效果

    在网页设计中,"DIV+CSS+JAVASCRIPT实现图片滚动效果"是一个常见的动态展示技术,用于在有限的空间内展示多张图片。这个技术结合了HTML布局的强大工具——Div,CSS样式表来控制视觉样式,以及JavaScript进行交互功能...

    js弹出div效果

    "js弹出div效果"是指利用JavaScript控制HTML中的&lt;div&gt;元素动态显示和隐藏,以实现弹窗功能。这种效果可以用于消息提示、用户确认、登录窗口等多种场景,使页面更具交互性和用户体验。 首先,我们需要了解&lt;div&gt;元素...

    DIV+CSS与javascript的结合运用.docx

    【标题】: "深入理解JavaScript与DIV+CSS的结合运用" 【描述】: 本文将探讨如何有效地结合使用DIV+CSS和JavaScript技术,以提升网页的布局美感与交互体验。这两种技术的融合使得网页设计更加灵活,同时也为实现3D...

    JavaScript+DIVCSS资料

    JavaScript 和 DIV CSS 是 web 开发中的两个核心技术,它们在构建动态、交互性和美观的网页界面中发挥着关键作用。这份“JavaScript+DIVCSS资料”压缩包文件很可能是包含了一系列的学习资源,如教程文档、示例代码、...

    javascript div小结

    此外,`div`元素常常与CSS动画和过渡效果结合,利用`style`对象设置动画属性,如`transition`和`animation`: ```javascript myDiv.style.transition = 'width 2s'; myDiv.style.width = '300px'; ``` 在...

    javascript窗体类似div窗体iframe+div窗体

    在标题中提到的"iframe+div窗体",是指使用IFrame(内联框架)和div元素结合的方式,来实现类似独立窗体的效果。 IFrame是一种HTML标签,它可以在一个HTML文档中嵌入另一个HTML文档。这使得开发者能够在一个页面中...

    JavaScript +div 弹出窗案例

    JavaScript 和 div 结合实现弹出窗是网页交互中常见的功能,这种技术被广泛应用于提示信息、用户确认操作、表单提交等多种场景。本案例主要探讨如何利用 JavaScript 和 HTML 的 div 元素创建一个自定义的弹出窗口。 ...

    javascript+div实现多菜单切换

    JavaScript与HTML的div结合,提供了极大的灵活性和可扩展性,使得我们可以创建出各种各样的动态菜单系统,满足不同项目的需求。在实际开发中,可以结合现代前端框架,如React或Vue.js,进一步提高代码的组织性和可...

    div +css+javascript设计实例

    《div +css+javascript设计实例》 在网页设计与开发领域,`div`、`CSS`和`JavaScript`是构建动态、响应式和交互性网页的三大基石。本设计实例集合将深入探讨如何巧妙地结合这三种技术,以创建出高效、美观且用户...

    jquery+js 控制div的scroll样式效果

    在网页开发中,jQuery 和 JavaScript 是两种常用的编程语言,它们能帮助我们实现各种动态效果,包括控制`div`元素的滚动条(scroll)样式。在本项目中,"jquery+js 控制div的scroll样式效果"是核心目标,通过这个...

    DIV移动组件JavaScript

    `DIV` 移动组件是利用 JavaScript 实现的一种交互效果,允许用户通过编程方式控制 `DIV` 层的位置,为网页增添动态性和交互性。这种组件在网页设计、游戏开发或者复杂用户界面中都有广泛应用。 JavaScript 是一种轻...

Global site tag (gtag.js) - Google Analytics