js实现简单漂亮弹出提示层网页特效

>首页 -> 社会专题 -> 代码效果 2016-01-16 来源:百度作者:佚名【大中小】浏览:591次评论:0条

js实现简单漂亮弹出提示层网页特效，用户点击文字后弹出显示，当再次点击后图层隐藏，结合自己的网站需求来修改即可，需要的朋友可以做个参考。

<!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" />
<meta name="keywords" content="dove" />
<meta name="description" content="dove" />
<title>网页特效 简单漂亮弹出提示层特效</title>
<style>
.list{
 position:relative;;
 background:#eee;
 border:1px #ccc solid;
 margin:10px;
 height:30px;
 width:100px;
 cursor :pointer ;
}
.listShow{
 position:relative;
 background:#eff;
 border:1px #ddd solid;
 margin:10px;
 height:30px;
 width:100px;
 cursor :pointer ;
}
.comment{
 position:absolute;
 left:0;
 display:none;
 position:absolute;
 border:1px #ccc solid;
 background:#fee;
 width:200px;
 height:200px;
 overflow:hidden;
 z-index:100;
}
</style>
</head>
<body>

<div class="" id="show">
0
</div>
<div class="list" id="list1">1 点击此处
 <div class="comment" id="comment1">dove——china 欢迎您的到来！ 1<br/>
 dove——china 欢迎您的到来！  2<br/>
 dove——china 欢迎您的到来！  3<br/>
 dove——china 欢迎您的到来！   4<br/>
 dove——china 欢迎您的到来！   5</div>
</div>
<div class="list" id="list2">2 点击此处
 <div class="comment" id="comment2">dove——china 欢迎您的到来！</div>
</div>
<div class="list" id="list3">3 点击此处
 <div class="comment" id="comment3">dove——china 欢迎您的到来！</div>
</div>
<div class="list" id="list4">4 点击此处
 <div class="comment" id="comment4">dove——china 欢迎您的到来！</div>
</div>
<div class="list" id="list5">5 点击此处
 <div class="comment" id="comment5">dove——china 欢迎您的到来！</div>
</div>
<div class="list" id="list6">6 点击此处
 <div class="comment" id="comment6">dove——china 欢迎您的到来！</div>
</div>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor({  minFrameHeight:400 });
	editor_a.render( 'content1' );
</script></body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh-oh'},{'server':'p3plzcpnl489434'},{'id':'8823225'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
<script>
    var zindex=0;
 function $id(id){
  return document.getElementById(id);
 }
 
var Bind = function(object,fun){
  var args = Array.prototype.slice.call(arguments).slice(2);
  return function(){
   return fun.apply(object,args);
  }
 }
 
function addEventHandler(oTarget, sEventType, fnHandler){
   if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);}
   else if(oTarget.attachEvent){oTarget.attachEvent('on' + sEventType, fnHandler);}
   else{oTarget['on' + sEventType] = fnHandler;}
 }

window.onload=function(){
                               //建立各个菜单对象
  var shower1=new Shower();
  shower1.init($id("list1"),$id("comment1"));
  var shower2=new Shower();
  shower2.init($id("list2"),$id("comment2"));
  var shower3=new Shower();
  shower3.init($id("list3"),$id("comment3"));
  var shower4=new Shower();
  shower4.init($id("list4"),$id("comment4"));
  var shower5=new Shower();
  shower5.init($id("list5"),$id("comment5"));
  var shower6=new Shower();
  shower6.init($id("list6"),$id("comment6"));
 }

</script>

提示：您也可以先修改部分代码再运行！

您看到此篇文章时的感受是：

Tags：用

责任编辑：佚名

【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

手机扫描

空间赞助

快速互动

有事联系

统计联系

版权与建议