JS完成的效仿QQ头像资料卡显示与隐藏效果,原生

2019-06-15 22:53 来源:未知

js延时提醒框效果演示:

本文实例讲述了JS完毕的效仿QQ头像资料卡展现与潜伏效果。分享给我们供我们参谋,具体如下:

应用原生JavaScript设计和贯彻Tooltip浮动提示框特效,精晓代码简化、事件绑定、事件冒泡等技巧和学识。

韦德娱乐1946网页版 1

咱俩选择QQ时常常要求查阅朋友的资料卡,当大家把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意活动,当鼠标移出头像或资料卡时,资料卡延时隐藏。

特效多少个关键点:韦德娱乐1946网页版,

完成方式

本质正是延时提醒框难点!

体现:鼠标移到ToolTip超链接上时,ToolTip提醒框能够展现出来
隐身:鼠标移开时,ToolTip提醒框自动隐藏
一直:ToolTip提示框的地点要求基于ToolTip超链接的岗位来安装
可计划:ToolTip提醒框能够依赖参数分歧,改换尺寸和展现内容

移入展现,移出隐藏

韦德娱乐1946网页版 2

注意点:

移除延时隐藏,能够完结从第二个div移入第一个div,依然能够显示

第一写好布局

1)border-radius和 box-shadow兼容写法

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1 {
 width: 50px;
 height: 50px;
 background: red;
 float: left
}
#div2 {
 margin-left: 10px;
 width: 250px;
 height: 150px;
 background: yellow;
 float: left;
 display: none
}
</style>
<script>
window.onload=function()
{
 var oDiv1=document.getElementById('div1');
 var oDiv2=document.getElementById('div2');
 var timer=null;
 oDiv1.onmouseover=oDiv2.onmouseover=function()
 {
 clearTimeout(timer);
 oDiv2.style.display='block';
 };
 oDiv1.onmouseout=oDiv2.onmouseout=function()
 {
 timer=setTimeout(function()
 {
  oDiv2.style.display='none';}
 ,500); 
 };
};
</script>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
<style>
    div { float:left; margin:5px; }
    .head { width:50px;height:50px;background-color:pink; }
    .info { width:250px;height:200px;background-color:blue;display:none; }
</style>
<div>
  <div class="head"></div>
  <div class="info"></div>
</div>

2)不论鼠标指针穿过被选元素或其子成分,都会触发 mouseover 事件。对应mouseout

GitHub源码地址

其次js部分

      唯有在鼠标指针穿过被选成分时,才会触发 mouseenter 事件。对应mouseleave

以上便是本文的全体内容,希望对我们的读书抱有协理,也愿意我们多多协理脚本之家。

思路:

3)W3C规定不允许内联成分嵌套块级成分,个中的a链接嵌套了div,或许不适合W3C标准( tip:他是移入a链接的时候在a链接中创设的div )

您恐怕感兴趣的文章:

  • javascript落成延时展现提醒框特效代码
  • JS延时器提醒框的利用实例代码分析
  • JS延时提示框实现情势详解

(1)鼠标移入头像,资料卡呈现;鼠标移出头像,资料卡延时隐藏setTimeout
(2)鼠标移入资料卡,资料卡仍显得,并化解资料卡延时隐藏的变量
(3)鼠标移出资料卡,资料卡延时隐藏,并且此时只要在移入到头像中,资料卡扔突显,并消除资料卡延时隐藏的变量

粗略的函数封装写法(便于引用,减弱代码量):

window.onload =function(){
    var oHead = document.getElementsByClassName("head")[0];
    var oInfo = document.getElementsByClassName("info")[0];
    var timer = null;
    oHead.onmouseover=function(){
      clearTimeout(timer);
      oInfo.style.display="block";
    };
    oHead.onmouseout=function(){
      timer = setTimeout(function(){
        oInfo.style.display="none";
      },500);
    };
    oInfo.onmouseover=function(){
      clearTimeout(timer);
      oInfo.style.display="block";
    };
    oInfo.onmouseout=function(){
      timer = setTimeout(function(){
        oInfo.style.display="none";
      },500);
    };
};

1)通过元素的id得到成分的DOM引用

优化代码:

var $ = function(id){
return document.getElementById(id);
 }
oInfo.onmouseover = oHead.onmouseover=function(){
  clearTimeout(timer);
  oInfo.style.display="block";
};
oInfo.onmouseout = oHead.onmouseout=function(){
  timer = setTimeout(function(){
    oInfo.style.display="none";
  },500);
};

2)绑定事件的函数

函数封装:

function addEvent(obj,event,fn){ //要绑定的元素对象,要绑定的事件,触发的回调函数
if(obj.addEventListener){ //非IE,支持冒泡和捕获
obj.addEventListenner(event,fn,false);
}else if(obj.attachEvent){ //IE,只支持冒泡
obj.attachEvent('on' event,fn);
}
}

注意:事件 .xx 等于 [“xx”]

职能如图:

首先种:函数外获取变量,调用函数,适用于一个或八个元素调用此事件

韦德娱乐1946网页版 3

window.onload =function(){
  var oHead = document.getElementsByClassName("head")[0];
  var oInfo = document.getElementsByClassName("info")[0];
  reminder(oHead,oInfo,"onmouseover","onmouseout");
  function reminder (div1,div2,event1,event2){
    var timer = null;
    div1[event1] = div2[event1]=function(){
     clearTimeout(timer);
     div2.style.display="block";
    };
    div1[event2] = div2[event2]=function(){
     timer = setTimeout(function(){
      div2.style.display="none";
     },500);
    };
  }
};
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<style type="text/css">
  body{
    font-size: 14px;
    line-height: 1.8;
    background: url("img/bg.jpg") no-repeat center top;
    font-family: "微软雅黑";
  }
  #demo{
    width: 500px;
    margin: 30px auto;
    padding: 20px 30px;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;/*这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性*/
    -webkit-border-radius: 10px;/*苹果;谷歌,等一些浏览器认,因为他们都用的是webkit内核*/
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
  }
  #demo h2{
    color: #03f;
  }
  #demo .tooltip{
    color: #03f;
    cursor: help;
  }
  .tooltip-box{
    display: block;
    background: #fff;
    line-height: 1.6;
    border: 1px solid #66CCFF;
    color: #333;
    padding: 20px;
    font-size: 12px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: auto;
  }
  #mycard img{
    float: left;
    width: 100px;
    height: 100px;
    padding: 10px;
  }
  #mycard p{
    float: left;
    width: 150px;
    padding: 0 10px;
  }
</style>
<script type="text/javascript">
  window.onload=function(){
    //绑定事件的函数
     function addEvent(obj,event,fn){  //要绑定的元素对象,要绑定的事件,触发的回调函数
      if(obj.addEventListener){      //非IE,支持冒泡和捕获
        obj.addEventListener(event,fn,false);
      }else if(obj.attachEvent){      //IE,只支持冒泡
        obj.attachEvent('on' event,fn);
      }
    }
    //通过用户代理的方式判断是否是IE的方法,不能判断出IE11
    var isIE = navigator.userAgent.indexOf("MSIE") > -1;

    var $ = function(id){
      return document.getElementById(id);
    }
    var demo = $("demo");
    //obj  - ToolTip超链接元素
    //id   - ToolTip提示框id
    //html  - ToolTip提示框HTML内容
    //width - ToolTip提示框宽度(可选)
    //height - ToolTip提示框高度(可选)
    function showTooltip(obj,id,html,width,height){
      if($(id)==null){
        //创建 <div class="tooltip-box" id="xx">xxxxxxxx</div>
        var toolTipBox;
        toolTipBox = document.createElement('div');
        toolTipBox.className = "tooltip-box";
        toolTipBox.id = id;
        toolTipBox.innerHTML = html;
        obj.appendChild(toolTipBox);
        toolTipBox.style.width = width ? width   'px':"auto";
        toolTipBox.style.height = height ? height   'px':"auto";
        if(!width && isIE){
          toolTipBox.style.width = toolTipBox.offsetWidth;//因为IE不支持auto属性
        }
        toolTipBox.style.position = 'absolute';
        toolTipBox.style.display = 'block';
        var left = obj.offsetLeft;
        var top = obj.offsetTop   20;
        //当浏览器窗口缩小时不让提示框超出浏览器
        if(left   toolTipBox.offsetWidth > document.body.clientWidth){
          var demoLeft = demo.offsetLeft;
          left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
          if(left < 0)
          left = 0;
        }
        toolTipBox.style.left = left   'px';
        toolTipBox.style.top = top   'px';
        addEvent(obj,"mouseleave" ,function(){
          setTimeout(function(){
            $(id).style.display = 'none';
          },300);
        });
      }
      else{
        //显示
        $(id).style.display = 'block';
      }
    }
    //事件冒泡
addEvent(demo,'mouseover',function(e){
  var event = e || window.event;
  var target = event.target || event.srcElement;//IE下,event对象有srcElement属性,但是没有target属性;
  //Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
  //event.srcElement:表示的当前的这个事件源。
  if(target.className == "tooltip"){
    var _html;
    var _id;
    var _width = 200;
    switch (target.id){
      case "tooltip1":
        _id = "t1";
        _html = "中华人民共和国";
        break;
      case "tooltip2":
        _id = "t2";
        _html = "美国篮球职业联赛";
        break;
      case "tooltip3":
        _id = "t3";
        _html = "<h2>春晓</h2><p>春眠不觉晓,</p><p>处处闻啼鸟。</p><p>夜来风雨声,</p><p>花落知多少。</p>";
        _width = 100;
        break;
      case "tooltip4":
        _id = "t4";
        _html = "<img src='img/1.jpg' width='500' /> ";
        _width = 520;
        break;
      case "tooltip5":
        _id = "t5";
        _html = "<div id='mycard'><img src='img/2.jpg' alt=''/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>";
        _width = 300;
        break;
      case "tooltip6":
        _id = "t6";
        _html = "<iframe src='http://www.imooc.com/' width='480' height='300'></iframe>";
        _width = 500;
        break;
    }
    showTooltip(target,_id,_html,_width);
  }
});
    /* var t1 = $("tooltip1");
    var t2 = $("tooltip2");
    var t3 = $("tooltip3");
    var t4 = $("tooltip4");
    var t5 = $("tooltip5");
    var t6 = $("tooltip6");
    t1.onmouseenter = function () {
      showTooltip(this, "t1", '中华人民共和国', 200);
    };
    t2.onmouseenter = function () {
      showTooltip(this, "t2", '美国篮球职业联赛', 200);
    };
    t3.onmouseenter = function () {
      showTooltip(this, "t3", '<h2>春晓</h2><p>春眠不觉晓,</p><p>处处闻啼鸟。</p><p>夜来风雨声,</p><p>花落知多少。</p>', 100);
    };
    t4.onmouseenter = function () {
      showTooltip(this, "t4", '<img src="img/1.jpg" width="500" /> ', 520);
    };
    t5.onmouseenter = function () {
      var _html = '<div id="mycard"><img src="img/2.jpg" alt="韦德娱乐1946网页版 4"/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>';
      showTooltip(this, "t5", _html, 300);
    };
    t6.onmouseenter = function () {
      var _html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>'
      showTooltip(this, "t6", _html, 500);
    };*/
  }
</script>
<body>
<div id="demo">
  <h2>原生JavaScript实现ToolTip效果</h2>
  <p>ToolTip效果是非常常见的网页特效,它可以在用户将指针放置在控件上时为用户显示提示信息。
    比如简称文字显示一行文字全称,例:<a class="tooltip" id="tooltip1">中国</a>, <a class="tooltip" id="tooltip2">NBA</a>。
    又比如显示一段文字,例:唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会么?如果不看tooltip提示你背不出来的话,那么你
    可要加油了。
  </p>
  <p>
    ToolTip效果还可以用来显示图片,例:<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下,例:
    <a class="tooltip" id="tooltip5">我的资料</a>。
  </p>
  <p>
    甚至你可以显示一整个网站:例:<a class="tooltip" id="tooltip6">慕课网</a>。
  </p>
  <p>
    注意好的ToolTip需要考虑样式、效果、页面的边界等信息,希望你可以做出更漂亮的ToolTip效果。
  </p>
</div>
</body>
</html>

其次种:函数外获取变量,调用函数,适用于三个因素调用此事件

上述便是本文的全体内容,希望对大家的学习抱有扶助,也期待大家多多辅助脚本之家。

window.onload =function(){
  var number=0;
  reminder("head","info","onmouseover","onmouseout",number);
  function reminder (div1,div2,event1,event2,num){
    var oHead = document.getElementsByClassName(div1)[num];
    var oInfo = document.getElementsByClassName(div2)[num];
    var timer = null;
    oHead[event1] = oInfo[event1]=function(){
     clearTimeout(timer);
     oInfo.style.display="block";
    };
    oHead[event2] = oInfo[event2]=function(){
     timer = setTimeout(function(){
      oInfo.style.display="none";
     },500);
    };
  }
};

你只怕感兴趣的稿子:

  • jQuery悬停文字提醒框插件jquery.tooltipster.js用法示例【附demo源码下载】
  • ToolTip 通过Js完成代替超链接中的title效果
  • jquery.cvtooltip.js 基于jquery的气泡提醒插件
  • 轻量级 JS ToolTip提醒效果
  • JS组件Bootstrap完结弹出框和提醒框效果代码
  • JS仿百度寻找自动提示框相称查询成效
  • JavaScript基础教程之alert弹出提醒框实例
  • Js 订制自身的AlertBox(新闻提醒框)
  • JS模仿MSN右下角弹出提醒框代码
  • javascript安徽中国广播集团大的3种新闻提示框(alert,prompt,confirm)

诸如,一共有五个头像的话,就可以用for循环遍历为各类成分绑定事件:

var number=null;
for(number=0;number<3;number  ){
   reminder("head","info","onmouseover","onmouseout",number);
}

越多关于JavaScript相关内容感兴趣的读者可查阅本站专题:《JavaScript切换特效与才能总括》、《JavaScript查找算法技能总括》、《JavaScript动画特效与技艺汇总》、《JavaScript错误与调度工夫总计》、《JavaScript数据结构与算法技巧总计》、《JavaScript遍历算法与本领计算》及《JavaScript数学生运动算用法总括》

可望本文所述对大家JavaScript程序设计有着帮衬。

你或者感兴趣的稿子:

  • 原生JS仿QQ阅读点击展开、收起效果
  • JS实现的仿QQ空间图片弹出功效代码
  • js达成仿qq新闻的弹出窗效果
  • JS达成超轻便的仿QQ折叠菜单效能
  • JS完结仿QQ面板的手风琴效果折叠菜单代码
  • js完毕带缓冲效果的仿QQ面板折叠菜单代码
  • JS完毕仿QQ聊天窗口抖动特效
  • 纯js落成仿QQ邮箱弹出确认框
  • 依照zepto.js达成仿手提式有线话机QQ空间的大图查看组件ImageView.js详解
  • javascript仿qq分界面包车型客车折叠菜单完成代码
  • js设置控件的隐形与彰显的三种艺术
  • js菜单点击展现或隐匿效果的简短实例
  • javascript 调整 html元素展现/隐藏落成代码
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:JS完成的效仿QQ头像资料卡显示与隐藏效果,原生