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

<!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>
<style type="text/css">
html,body{
100%;
height:100%;
}
.td_title{
word-break: keep-all;
white-space: nowrap;
}

.box{position:fixed;right:10px;top:1%;z-index:100;font-size:60px;}
.adx{text-align:center;}
.adx .a{ font-size:60px; }
.code{
margin-left:350px;
}

bady2 {
height: 100%;
100%;
margin: 0;
padding: 0;
background: #fff;
}

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

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

.card {
position: relative;
right: -180px;
top:240px;
padding: 20px 70px;
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;
100px;
height:50px;
line-height:50px;
font-size:40px;
}

.card:hover {
right: 0px;
box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.5), 0 8px 8px -8px
rgba(0, 0, 0, 0.5);
}

.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 {
800px;
height: 800px;
position: absolute;
top: 30%;
left: 7%;
margin-top: -25px; /* 高度的一半 */
margin-left: 25px; /* 宽度的一半 */
}
.showImg{
display:none;
100%;
height:100%;
background:rgba(0,0,0,.7);
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.showImgClose{
60px;
height:60px;
font-size:30px;
text-align:center;
line-height:60px;
color:#fff;
position:absolute;
right:0;
top:0;
border:2px solid #fff;
border-radius:50%;
}
.adx a{ font-size:60px}

</style>
</head>
<body id="main" >
<div lass='ac'>
<div lass='bady2'>
<div class='card-holder'>
<div class='card-wrapper'>
<div class='card bg-01'>
<span class='card-content'>

<p class="c"><a onclick="getDpPhoto()" >纪律图</a></p>
</span>
<span class='card-content'>

<p class="c"><a onclick="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 class="item">

<p class="adx"><a onclick="getStPhoto()" >查看座位图</a></p>
</div>
<div class="code">
<img src="http://wcmuat.yundasys.com:10117/meeting/ui/img/photo/2.png" alt="haha" />
</div>
</div>
</body>
<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 ;
var registrant_designat_seat;

$(function(){
getImagePath();
loadEditData();
if(name=="姓名"){
if(registrant_name!="undefined"||!registrant_name==""){
if(registrant_phone=="undefined"||registrant_phone==""){
if(registrant_user_id=="undefined"||registrant_user_id==""){
//姓名+id查
closeImg();//关闭坐席图
showImg();//显示坐席图--getStPhoto
showImgB();//显示会议图 --getAdPhoto
showImgC();//显示纪律图 --getDpPhoto
}else{
//姓名+工号
closeImg();//关闭坐席图
showImg();//显示坐席图--getStPhoto
showImgB();//显示会议图 --getAdPhoto
showImgC();//显示纪律图 --getDpPhoto
}
}else{
//姓名+电话
closeImg();//关闭坐席图
showImg();//显示坐席图--getStPhoto
showImgB();//显示会议图 --getAdPhoto
showImgC();//显示纪律图 --getDpPhoto
}
}
}else{
//工号 +电话
if(registrant_phone!="undefined"||!registrant_phone==""){
if(registrant_user_id!="undefined"||!registrant_user_id.equals("")){
closeImg();//关闭坐席图
showImg();//显示坐席图--getStPhoto
showImgB();//显示会议图 --getAdPhoto
showImgC();//显示纪律图 --getDpPhoto
}
}
}
});
function showImg(){
$('.adx .a').on('click',function(){
$('.showImg').show();
//显示座位图
window.open="http://10.20.24.43:8080/meeting/meeting_register_zwPage.html?activity_id="+activity_id;
$$.closeJcdfDialog();
//getStPhoto();
})
}
function showImgB(){
$('.b').on('click',function(){
$('.showImg').show();
//显示会议图
window.open="http://10.20.24.43:8080/meeting/meeting_register_huiyiPage.html?activity_id="+activity_id;
$$.closeJcdfDialog();
//getAdPhoto();
})
}
function showImgC(){
$('.c').on('click',function(){
$('.showImg').show();
//显示纪律图
//window.open="http://10.20.24.43:8080/meeting/meeting_register_jilvPage.html?activity_id="+activity_id;
//$$.closeJcdfDialog();
//getDpPhoto();
})
}
function closeImg(){
$('.showImgClose').on('click',function(){
$('.showImg').hide();
})
}

//背景图
function getImagePath(){
var jsonData = {
"activity_id":activity_id
};
$.ajax({
type: "get",
async:true,
dataType:"text",
url: '/meeting/register_personal/bjPhoto.do?actionId=meeting_register_personal_bjPhoto&activity_id='+activity_id,
data: JSON.stringify(jsonData),
success: function(oData){
//var data = jQuery.parseJSON(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 loadEditData() {
var obj = {};
obj.registrant_name = getQueryString("registrant_name");
registrant_name = obj.registrant_name;
obj.registrant_phone = getQueryString("registrant_phone");
obj.registrant_designat_seat = getQueryString("registrant_designat_seat");
registrant_designat_seat = obj.registrant_designat_seat;
obj.registrant_user_id = getQueryString("registrant_user_id");
obj.name = getQueryString("name");
registrant_name = decodeURI(obj.registrant_name);
name = decodeURI(obj.name);
registrant_designat_seat = obj.registrant_designat_seat;
registrant_phone = obj.registrant_phone ;
registrant_user_id = obj.registrant_user_id ;
obj.activity_id = activity_id
activity_id = obj.activity_id;
$(formTemplate).form('load', obj);
$('.name').html('欢迎您'+registrant_name+'您的位置是'+registrant_designat_seat);
$(".name").css("font-size","60px");
}

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 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;
}
//座位图
function getStPhoto(){
location.href = "http://10.20.24.43:8080/meeting/meeting_register_zwPage.html?activity_id="+activity_id+'&registrant_designat_seat='+registrant_designat_seat+'&registrant_name='+registrant_name ;
}

</script>
</html>