锐客网

  1. 首页 > 睿知 > it技术 > >

渐变弹出层

IT知识渐变弹出层

少年恃险若平地，独倚长剑凌清秋。这篇文章主要讲述渐变弹出层相关的知识，希望能为你提供帮助。


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "???
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title> 渐变弹出层< /title>
< script type="text/javascript" src="https://www.songbingjia.com/android/common/jquery-1.2.6.min.js"> < /script>
< link type="text/css" rel="stylesheet" href="https://www.songbingjia.com/android/common/common.css" />
< style>
/* 渐变弹出层 */
#racedisplay:block; width:200px; height:50px; line-height:50px; text-align:center; background:#CCC; border:#555 1px solid;
.raceShowbackground-color:#f1f1f1; border:solid 1px #ccc; position:absolute; display:none; width:300px; height:100px; padding:5px; font-size:12px;
#UpLayer spanborder:#fff 1px solid; width:80px; padding:0 5px; line-height:20px; display:block;
#UpLayer uldisplay:none; position:absolute; border:#ccc 1px solid; width:80px; padding:5px; line-height:20px; background:#f1f1f1; margin:-1px 0 0 0;
#UpLayer ul li border-bottom:#ccc 1px dashed;
< /style>
< /head>
< body>
< 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) ); //单击弹出层则自身隐藏
var objStr = "#UpLayer";
$(objStr).mouseover(function()$(objStr + " ul").show(); );
$(objStr).mouseout(function()$(objStr + " ul").hide(); );
);
< /script>


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


< div id="UpLayer">
< span> < a href=https://www.songbingjia.com/android/> 弹出层< /a> < /span>
< ul>
< li> < a href="https://www.songbingjia.com/android/#"> 手机资讯< /a> < /li>
< li> < a href="https://www.songbingjia.com/android/#"> 热门文章< /a> < /li>
< li> < a href="https://www.songbingjia.com/android/#"站长< /a> < /li>
< li> < a href="https://www.songbingjia.com/android/#"> 建议意见< /a> < /li>
< /ul>
< /div>
< /body>
< /html>


【渐变弹出层】


    推荐阅读


    上一篇：TexturePacker 命令行用例

    下一篇：CentOS 7.9 安装 Oracle 11gR2