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-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/json2.js"></script>
<style type="text/css">
html,body{
width: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 .a{ font-size:60px; }
.code{
margin-left:350px;
}
bady2 {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #fff;
}
.card-holder {
position: fixed;
right:0px;
width: 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;
width: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 {
width: 800px;
height: 800px;
position: absolute;
top: 30%;
left: 7%;
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%)
}
.showImgClose{
width: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‘>
<!-- <span class="c" class="easyui-linkbutton">紀律圖</span> -->
<p class="c"><a onclick="getDpPhoto()" >紀律圖</a></p>
</span>
<span class=‘card-content‘>
<!-- <span class="b" class="easyui-linkbutton">會議圖</span> -->
<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"><span font-size:16px class="a" >查看座位圖</span></p> -->
<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+‘®istrant_designat_seat=‘+registrant_designat_seat+‘®istrant_name=‘+registrant_name ;
}
</script>
</html>
html頁面懸浮框--右邊動畫（隱藏凸出）---css設置