应用jquery达成鼠标滑过弹出越多相关音讯层附源码下载,jQuery实现鼠标点击弹出渐变层的议程

永利402com官方网站

弹出层在其实使用中大家平时会越过海南大学学量的弹出层效果,下边小编来做多个遵照jquery的轻便的弹出层效果实例,各位朋友有意思味可参看。

当要在个别的上空显得越多的消息时,大家日常会动用鼠标滑过弹出更加多相关新闻层,提升互动性。特别能够行使在公司Instagram、招聘网站求职者音讯彰显等等现象。

效用代码如下

本文结合实例和我们大快朵颐下选用jQuery实现滑过图片展现音信功用。当鼠标滑向照片时,会弹出相应的相片的详尽介绍消息,请看演示效果:

图片 1

图片 2

在弹出层中上面是大旨代码

效果体现    
源码下载.rar)

<script type="text/javascript">
// 渐变弹出层
$(document).ready(function(){
 var speed = 600;//动画速度
 $("#race a").click(function(event){//绑定事件处理
 event.stopPropagation();
 var offset = $(event.target).offset();//取消事件冒泡
 $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//设置弹出层位置
 $("#racePop").show(speed);//动画显示
 });
 $(document).click(function(event) { $("#racePop").hide(speed) });//单击空白区域隐藏
 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自身隐藏

});
</script>

HTML

一体化实例

首先咱们计划页面素材,页面上由多组图片<li>密集组成,同期有图片对应的相关表达新闻,用于体现详细消息效果。

<!-- 渐变弹出层 -->
<div id="race"><a href="#">点击</a></div>
<div id="racePop" class="raceShow">这里是弹出层效果</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// 渐变弹出层
$(document).ready(function(){
 var speed = 600;//动画速度
 $("#race a").click(function(event){//绑定事件处理
 event.stopPropagation();
 var offset = $(event.target).offset();//取消事件冒泡
 $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//设置弹出层位置
 $("#racePop").show(speed);//动画显示
 });
 $(document).click(function(event) { $("#racePop").hide(speed) });//单击空白区域隐藏
 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自身隐藏

});
</script>

<style>
body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff}
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}

/* 渐变弹出层 */
#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;margin:10px auto}
.raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}

</style>
<div class="demo"> 
    <ul id="Album"> 
    <li><a href="#" ><em></em><img src="images/2012/05/18/tiezhu18274938.jpg" /></a> 
       <div class="Album_info"><strong>孟祥义</strong>企业主<i>建筑 
</i><i>北京市</i></div> 
    </li> 
    ... 
   </ul> 
</div> 

你大概感兴趣的篇章:

  • jquery鼠标放上去突显悬浮层即弹出稳固的div层
  • Jquery利用mouseenter和mouseleave落成鼠标经过弹出层且能够点击
  • Jquery中夏族民共和国地图热门效应-鼠标经过弹出提示层新闻的回顾实例
  • 动用jquery完结鼠标滑过弹出越来越多相关消息层附源码下载
  • jQuery Dialog
    弹出层对话框插件
  • 听别人说jquery的模态div层弹出成效
  • jquery完成居中弹出层代码
  • jQuery弹出层始终垂直居中相对于显示屏或当前窗口
  • jQuery拖动div、移动div、弹出层完成原理及示范
  • JQuery弹出层示例可自定义
  • jQuery达成鼠标移到有些对象时弹出展现层功用

CSS

作者们必要利用CSS将图纸紧凑排列在一道,并且私下认可图片对应的音讯为隐匿状态。

.demo{width: 714px; margin:50px auto;} 
#Album li,#Album { list-style: none;} 
#Album{ position: relative; background: url(images/loader.gif) no-repeat center; height: 203px;} 
#Album li { float: left; margin:1px 1px 0px 0px; display: inline;} 
#Album li img { width: 50px; height: 50px;} 
#Album .album_big {float: right;} 
#Album .album_big span { width: 43px; height: 31px; background: url(images/you_s.png); position: 
absolute; right: 0px;bottom: 0px; margin: 0px; padding: 0px; text-indent: -999px; overflow: hidden;} 
.album_big img { width: 101px!important; height: 101px!important;} 
#Album .album_big a { width: 101px!important;height: 101px!important;} 
#Album li strong { display: block; color: #fff; font-size: 12px; line-height: 16px; 
padding: 0px 10px;margin-top: 8px;white-space: nowrap;} 
#Album li span { display: block; color: #fff; font-size: 12px; line-height: 16px; 
padding: 0px 10px; margin-top: 5px; white-space: nowrap;} 
#Album li a { position: absolute; z-index: 100; visibility: hidden;} 
#Album li a em{ width: 100%;position: absolute; top: 0px; left: 0px; display: none; opacity: 0.5; 
filter: alpha(opacity=50); background: #000000;} 
#Album img { border: 0px; border: none;} 
#Album .Album_info { display: none; position: absolute; background: #4bae41; z-index:101; 
-moz-box-shadow: 0 0 10px #000000;-webkit-box-shadow: 0 0 10px #000000;box-shadow: 0 0 10px #000000;} 
#Album .Album_info i{ font-size: 12px; margin-right: 5px; font-style: normal; font-weight: normal;} 

jQuery

呈现效果所用的js代码已经封装在album.js,在调用前先加载jquery.js和album.js三个文本,然后径直调用效果,请看代码:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/album.js"></script> 
<script>
Album.set('#Album');
</script> 

在album.js中,通过jquery调控作而成分的一定,,以及鼠标滑过时,各个相对上下左右的任务显得效果,有野趣的朋友能够翻看下album.js中的相关代码。

以上内容是我给大家介绍的运用jquery完成鼠标滑过弹出越来越多相关音信层附源码下载的全体内容,希望我们喜爱。

您或者感兴趣的文章:

  • jquery鼠标放上去展现悬浮层即弹出一定的div层
  • Jquery利用mouseenter和mouseleave达成鼠标经过弹出层且能够点击
  • Jquery中夏族民共和国地图热门效应-鼠标经过弹出提醒层消息的简易实例
  • jQuery实现鼠标点击弹出渐变层的方法
  • jQuery Dialog
    弹出层对话框插件
  • 依靠jquery的模态div层弹出功用
  • jquery完毕居中弹出层代码
  • jQuery弹出层始终垂直居中相对于显示屏或当前窗口
  • jQuery拖动div、移动div、弹出层达成原理及示范
  • JQuery弹出层示例可自定义
  • jQuery达成鼠标移到某些对象时弹出展现层功效

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图