首页>案例集

JavaScript案例4:鼠标经过显示隐藏的内容

这个案例有两个版本:

一个是把所有隐藏的内容都嵌入到了html结构中,这种方法很冗余,不利于数据的更新。

第二个方法是利用数组对象的方式,把数据放入数组的对象中,动态加载到一个div中,再通过改变div的定位实现在不同的地方显示不同的内容。

鼠标经过显示隐藏内容.gif

具体效果点击查看

第一个版本简单版本:

一、html代码

<div id="app">
<ul class="clearfix" id="list">
<li> <img src="images/1.png">
<div class="title">
<h3 class="appname">墨迹天气</h3>
<p class="info">全球约5亿人在使用的天气APP,支持196个国家20多万个城市及地区的天气查询,准确定位及时推送,分钟级、公里级天气预报,实时监测阴晴雨雪。</p>
<span class="count">下载5.6亿次</span> <a href="#" class="btn">安装到手机</a> </div>
</li>
<li> <img src="images/2.png">
<div class="title">
<h3 class="appname">最美天气</h3>
<p class="info">始于颜值,陷于精准,忠于陪伴,醉于懂你。最美天气不忘初心砥砺前行,不仅保持最初的精美与颜值,通过不断的升级我们成为了更加懂你的天气预报。</p>
<span class="count">下载5.8亿次</span> <a href="#" class="btn">安装到手机</a> </div>
</li>
<li> <img src="images/3.png">
<div class="title">
<h3 class="appname">365日历万年历农</h3>
<p class="info">从2008年到现在9年时间,我们专注于时间管理,励志成为您最好的生活助手,超2.5亿用户的一致选择。</p>
<span class="count">下载2.6亿次</span> <a href="#" class="btn">安装到手机</a> </div>
</li>
<li> <img src="images/4.png">
<div class="title">
<h3 class="appname">滴滴出行</h3>
<p class="info">【近3亿用户的选择】2012年诞生的滴滴现已成为广受用户欢迎的城市出行应用!覆盖全国超过400个城市,乘客叫车成功率94%以上!</p>
<span class="count">下载10.6亿次</span> <a href="#" class="btn">安装到手机</a> </div>
</li>
<li> <img src="images/5.png">
<div class="title">
<h3 class="appname">大众点评</h3>
<p class="info">-【大众点评黑珍珠餐厅指南】精选中国味蕾,探寻美味餐厅,盛大发布。<br>
-【贺岁片放肆看】春节遇上情人节,我想陪你看电影~猜影片领礼券,最高可得35元!</p>
<span class="count">下载8.6亿次</span> <a href="#" class="btn">安装到手机</a> </div>
</li>
<li> <img src="images/6.png">
<div class="title">
<h3 class="appname">58同城 -租房招</h3>
<p class="info">人人信赖的生活服务平台,海量生活信息免费查询、发布。 <br>
真实、高效、免费,让您生活更简单!</p>
<span class="count">下载9.3亿次</span> <a href="#" class="btn">安装到手机</a> </div>
</li>
<li> <img src="images/7.png">
<div class="title">
<h3 class="appname">百度糯米</h3>
<p class="info">√精选排行:快速发现优质吃喝玩乐商家<br>
√搜索升级:新鲜商圈信息,精选玩乐内容,随时随地搜索get<br>
√抽奖:iphone大奖抽不停 </p>
<span class="count">下载8.2亿次</span> <a href="#" class="btn">安装到手机</a> </div>
</li>
<li> <img src="images/8.png">
<div class="title">
<h3 class="appname">天气通</h3>
<p class="info">专业贴心的天气APP,3.8亿用户的选择,采用权威多数据源授权信息,智能纠错,国内3000多个城市与700多个景区全覆盖的天气预报和实时天气预警信息。各种天气状况从容应对,帮你做好生活决策,为你出行保驾护航。</p>
<span class="count">下载2.1亿次</span> <a href="#" class="btn">安装到手机</a> </div>
</li>
<li> <img src="images/9.png">
<div class="title">
<h3 class="appname">饿了么</h3>
<p class="info">饿了么,专业的本地生活服务平台!<br>
【好的都要 随叫随到】品质美食、水果生鲜、鲜花蛋糕、超市百货,30分钟送达!<br>
【新人福利】外卖订餐,新用户领50元礼包,更多红包等你拿!</p>
<span class="count">下载12.6亿次</span> <a href="#" class="btn">安装到手机</a> </div>
</li>
</ul>
</div>

二、css代码

body, ul, h3, p {
  margin: 0;
  padding: 0;
}
body {
  font:1em "microsoft Yahei";
  background: #eee;
  color: #333;
}
li {
  list-style: none;
}
a {
  color: #333;
  text-decoration: none;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
#app {
  width: 600px;
  margin: 100px auto 0;
  z-index: 1;
}
#app li {
  float: left;
  position: relative;
  margin: 0 50px 50px 0;
}
#app img {
  vertical-align: middle;
  cursor: pointer;
}
#app img:hover {
  opacity: 0.8;
}
.title {
  display: none;
  position: absolute;
  width: 250px;
  left: 20px;
  top: 100%;
  border-radius: 5px;
  background: #fff;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.3));
  padding: 20px;
  z-index: 2;
}
.title::before {
  content: "";
  position: absolute;
  border-bottom: 10px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  left: 30px;
  top: -10px;
}
.appname {
  margin-bottom: 0.5em;
}
.count {
  color: #999;
  font-size: 0.75rem;
  margin-bottom: 0.5em;
}
.info {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
.btn {
  display: block;
  border-radius: 3px;
  background: #eee;
  border: 1px solid #bbb;
  color: #666;
  font-size: 0.875rem;
  padding: 4px 8px;
  margin-top: 0.5em;
  text-align: center;
}
.btn:hover {
  background: #71BD2B;
  border-color: #4DBF2B;
  color: #fff;
}

三、js代码

window.onload=function(){
  var oUl=document.getElementById("list");
  var aLi=oUl.getElementsByTagName("li");
  
  for(var i=0;i<aLi.length;i++){
    aLi[i].onmouseover=function(){ //找到某个li,然后用this指定这个li下面的对象。
      this.getElementsByClassName("title")[0].style.display="block";
      }
    aLi[i].onmouseout=function(){
      this.getElementsByClassName("title")[0].style.display="none";
      }
      
    }
  
  }

第二个高级 版本:

一、html代码

<div id="app">
    <ul class="clearfix" id="list">
        <li><img src="images/1.png"></li>
        <li><img src="images/2.png"></li>
        <li><img src="images/3.png"></li>
        <li><img src="images/4.png"></li>
        <li><img src="images/5.png"></li>
        <li><img src="images/6.png"></li>
        <li><img src="images/7.png"></li>
        <li><img src="images/8.png"></li>
        <li><img src="images/9.png"></li>
    </ul>
    <div class="title">
        <h3 class="appname"></h3>
        <p class="info"></p>
        <span class="count"></span>
        <a href="#" class="btn">安装到手机</a>
    </div>
</div>

二、css代码

body, ul, h3, p {
    margin: 0;
    padding: 0;
}
body {
    font:1em "microsoft Yahei";
    background: #eee;
    color: #333;
}
li {
    list-style: none;
}
a {
    color: #333;
    text-decoration: none;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
#app {
    width: 600px;
    margin: 100px auto 0;
    z-index: 1;
}
#app li {
    width:96px;
    height:106px;
    float: left;
    position: relative;
    margin: 0 50px 40px 0;
}
#app img {
    vertical-align: middle;
    cursor: pointer;
}
#app img:hover {
    opacity: 0.8;
}
.title {
    display: none;
    position: absolute;
    width: 250px;
    left: 20px;
    border-radius: 5px;
    background: #fff;
    filter: drop-shadow(0 0 4px rgba(0,0,0,.3));
    padding: 20px;
    z-index: 2;
}
.title::before {
    content: "";
    position: absolute;
    border-bottom: 10px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    left: 30px;
    top: -10px;
}
.appname {
    margin-bottom: 0.5em;
}
.count {
    color: #999;
    font-size: 0.75rem;
    margin-bottom: 0.5em;
}
.info {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 0.5em;
}
.btn {
    display: block;
    border-radius: 3px;
    background: #eee;
    border: 1px solid #bbb;
    color: #666;
    font-size: 0.875rem;
    padding: 4px 8px;
    margin-top: 0.5em;
    text-align: center;
}
.btn:hover {
    background: #71BD2B;
    border-color: #4DBF2B;
    color: #fff;
}

三、js代码

window.onload=function(){
    var oUl=document.getElementById("list");
    var aLi=oUl.getElementsByTagName("li");
    var oTitle=document.getElementsByClassName('title')[0];
    var oH3=oTitle.getElementsByTagName('h3')[0];
    var oP=oTitle.getElementsByTagName('p')[0];
    var oSpan=oTitle.getElementsByTagName('span')[0];
    var data=[
        {
            title:'墨迹天气',
            content:'全球约5亿人在使用的天气APP,支持196个国家20多万个城市及地区的天气查询,准确定位及时推送,分钟级、公里级天气预报,实时监测阴晴雨雪。',
            count:'下载5.6亿次'
        },
        {
            title:'最美天气',
            content:'始于颜值,陷于精准,忠于陪伴,醉于懂你。最美天气不忘初心砥砺前行,不仅保持最初的精美与颜值,通过不断的升级我们成为了更加懂你的天气预报。',
            count:'下载5.8亿次'
        },
        {
            title:'365日历万年历农',
            content:'从2008年到现在9年时间,我们专注于时间管理,励志成为您最好的生活助手,超2.5亿用户的一致选择。',
            count:'下载2.6亿次'
        },
        {
            title:'滴滴出行',
            content:'【近3亿用户的选择】2012年诞生的滴滴现已成为广受用户欢迎的城市出行应用!覆盖全国超过400个城市,乘客叫车成功率94%以上!',
            count:'下载10.6亿次'
        },
        {
            title:'大众点评',
            content:'-【大众点评黑珍珠餐厅指南】精选中国味蕾,探寻美味餐厅,盛大发布。<br>-【贺岁片放肆看】春节遇上情人节,我想陪你看电影~猜影片领礼券,最高可得35元!',
            count:'下载8.6亿次'
        },
        {
            title:'58同城 -租房招',
            content:'人人信赖的生活服务平台,海量生活信息免费查询、发布。 <br>真实、高效、免费,让您生活更简单!',
            count:'下载9.3亿次'
        },
        {
            title:'百度糯米',
            content:'√精选排行:快速发现优质吃喝玩乐商家<br>√搜索升级:新鲜商圈信息,精选玩乐内容,随时随地搜索get<br>√抽奖:iphone大奖抽不停 ',
            count:'下载8.2亿次'
        },
        {
            title:'天气通',
            content:'专业贴心的天气APP,3.8亿用户的选择,采用权威多数据源授权信息,智能纠错,国内3000多个城市与700多个景区全覆盖的天气预报和实时天气预警信息。各种天气状况从容应对,帮你做好生活决策,为你出行保驾护航。',
            count:'下载2.1亿次'
        },
        {
            title:'饿了么',
            content:'饿了么,专业的本地生活服务平台!<br>【好的都要 随叫随到】品质美食、水果生鲜、鲜花蛋糕、超市百货,30分钟送达!<br>【新人福利】外卖订餐,新用户领50元礼包,更多红包等你拿!',
            count:'下载12.6亿次'
        }
    ];
    for(var i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onmouseover=function(){
            oTitle.style.display='block';
            oTitle.style.left=this.offsetLeft+20+'px';
            oTitle.style.top=this.offsetTop+106+'px';
            oH3.innerHTML=data[this.index].title;
            oP.innerHTML=data[this.index].content;
            oSpan.innerHTML=data[this.index].count;
        };
        aLi[i].onmouseout=function(){
            oTitle.style.display='none';
        };
    }
    oTitle.onmouseover=function(){
        oTitle.style.display='block';
    };
    oTitle.onmouseout=function(){
        oTitle.style.display='none';
    };
};

案例下载地址:

链接: https://pan.baidu.com/s/1qGBsOtYrDcWkp0WI3SPCGQ 提取码: 7453 

点赞


3
保存到:

相关文章

Top