html页面悬浮框--左边动画（隐藏凸出）---css设置

╰+攻爆jí腚メ 2021-09-29 07:36 271阅读 0赞

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<link rel="stylesheet" type="text/css" href="./ui/js/jquery-easyui/themes/orange/easyui.css"/>  
<link rel="stylesheet" type="text/css" href="./ui/js/jquery-easyui/themes/icon.css"/>  
<link rel="stylesheet" type="text/css" href="./ui/css/common.css"/>  
<script type="text/javascript" src="./ui/js/jquery.min.js"></script>  
<script type="text/javascript" src="./ui/js/jquery-easyui/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="./ui/js/jquery-easyui/locale/easyui-lang-zh\_CN.js"></script>  
<script type="text/javascript" src="./ui/js/validate.js"></script>  
<script type="text/javascript" src="./ui/js/jcdf-1.0.js"></script>  
<script type="text/javascript" src="./ui/js/json2.js"></script>

.card-holder \{  
position: fixed;  
width: 0px;  
overflow: visible;  
\}

.card-wrapper \{  
display: inline-block;  
float: right;  
clear: both;  
\}

.card \{  
position: relative;  
left: 60px;  
top:240px;  
padding: 20px 90px 20px 40px;  
margin: -8px;  
x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);  
box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);  
background: \#fff;  
transition: all 0.3s ease-in-out 0.1s;  
\}  
.card a\{  
display:block;  
width:100px;  
height:50px;  
line-height:50px;  
font-size:40px;  
\}

.card:hover \{  
position: relative;  
left: 100%;  
margin-left: -32px;  
box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.5), 0 8px 8px -8px  
rgba(0, 0, 0, 0.5);  
transition: all 0.3s ease-in-out;  
\}

.card-content \{  
display: inline-block;  
color: \#fff;  
font-family: 'Droid Sans', sans-serif;  
font-size: 16px;  
font-weight: bold;  
white-space: nowrap;  
\}

.bg-01 \{  
background: gray;  
border-radius:20%;  
\}

.bg-02 \{  
background: \#4B7D74;  
\}

.bg-03 \{  
background: \#8DC2BC;  
\}

.bg-04 \{  
background: \#EDD6B4;  
\}

.bg-05 \{  
background: \#BE7467;  
\}

.bg-06 \{  
background: \#E2AE63;  
\}  
img \{  
width: 800px;  
height: 800px;  
position: absolute;  
top: 30%;  
left: 10%;  
margin-top: -25px; /\* 高度的一半 \*/  
margin-left: 25px; /\* 宽度的一半 \*/  
\}  
.showImg\{  
display:none;  
width:100%;  
height:100%;  
background:rgba(0,0,0,.7);  
position:absolute;  
top:50%;  
left:50%;  
transform:translate(-50%,-50%)  
\}  
  
.adx a\{ font-size:60px\}  
.adx b\{ font-size:30px; \}  
</style>  
<script type="text/javascript">  
var registrant\_name = "" ;  
var registrant\_designat\_seat = "";  
var registrant\_phone ="";  
var objectName = '座位图';  
var formTemplate = '\#wcm\_base\_project\_form';  
var updateUrl = '/meeting/actions/register\_personal/updatePerData.do?actionId=meeting\_register\_personal\_updatePerData';  
var getDataUrl = '/meeting/actions/register/echo.do?actionId=meeting\_register\_details\_echo';  
var pageId = 'wcm\_base\_project\_form';  
var appId = '/meeting/';  
var activity\_name\_value;  
var bp\_value;  
var activity\_id=getQueryString("activity\_id");  
var registrant\_name=getQueryString("registrant\_name");  
var registrant\_designat\_seat=getQueryString("registrant\_designat\_seat");  
  
$(function()\{  
loadEditData();  
getStPhoto();  
  
\});  
function loadEditData() \{  
var obj = \{\};  
obj.activity\_id = activity\_id  
activity\_id = obj.activity\_id;  
obj.registrant\_name = registrant\_name  
registrant\_name = obj.registrant\_name;  
obj.registrant\_designat\_seat = registrant\_designat\_seat  
registrant\_designat\_seat = obj.registrant\_designat\_seat;  
$(formTemplate).form('load', obj);  
$('.name').html('欢迎您'+registrant\_name+',您的位置是【'+registrant\_designat\_seat+'】');  
$(".name").css("font-size","50px");  
\}  
  
function getQueryString(name) \{  
var reg = new RegExp('(^|&)' + name + '=(\[^&\]\*)(&|$)', 'i');  
var r = decodeURI(window.location.search.substr(1)).match(reg);  
if (r != null) \{  
return unescape(r\[2\]);  
  
\}  
return null;  
\}  
  
//座位图  
function getStPhoto()\{  
var jsonData = \{  
"activity\_id":activity\_id  
\};  
$.ajax(\{  
type: "get",  
async:true,  
dataType:"text",  
url: '/meeting/register\_personal/stPhoto.do?actionId=meeting\_register\_personal\_stPhoto&activity\_id='+activity\_id,  
data: JSON.stringify(jsonData),  
success: function(oData)\{  
// $('.imgInfo').prop('src',oData)  
console.log(oData)  
$("\#main").css(\{  
"background-image":"url("+oData+")",  
"background-size":"100% 100%",  
"background-repeat":"no-repeat"  
\});  
\},  
error :function(e)\{  
console.log(e)  
\}  
\});  
\}

//纪律图  
function getDpPhoto()\{  
location.href = "http://10.20.24.43:8080/meeting/meeting\_register\_jilvPage.html?activity\_id="+activity\_id;  
\}  
//会议图  
function getAdPhoto()\{  
location.href = "http://10.20.24.43:8080/meeting/meeting\_register\_huiyiPage.html?activity\_id="+activity\_id;  
\}

</script>  
</head>  
<body id="main">  
<div lass='bady2'>  
<div class='card-holder'>  
<div class='card-wrapper'>  
<div class='card bg-01'>  
<span class='card-content'>  
  
<p class="c"><a οnclick="getDpPhoto()">纪律图</a></p>  
</span>  
<span class='card-content'>  
<p class="c"><a οnclick="getAdPhoto()">会议图</a></p>  
</span>  
</div>  
</div>  
</div>  
</div>  
<div style=" padding-top:200px;" class="form-data">  
<div class="item">  
<p align="center" style="color:black;font-size:40px;" class="name"></p>  
</div>  
<div class="item">  
<p align="center" style="color:black;font-size:40px;" calss="seat1" ></p>  
</div>  
</div>  
</body>  
</html>

转载于:https://www.cnblogs.com/Darkqueen/p/10449316.html