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>

.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 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>
</body>
</html>

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

猜你喜欢