• 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;
    }

    .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;
    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;
    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 {
    800px;
    height: 800px;
    position: absolute;
    top: 30%;
    left: 10%;
    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%)
    }

    .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'>
    <!-- <span class="c" class="easyui-linkbutton">纪律图</span> -->
    <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>

  • 相关阅读:
    JS制作图表
    把图片存入数据库
    .NET各种小问题
    JS各种小问题
    JS操作cookie
    JS处理Json数据
    git与svn的区别
    关于java中的一些循环
    java基础面试(上)
    Spring事务
  • 原文地址:https://www.cnblogs.com/Darkqueen/p/10449316.html
Copyright © 2020-2023  润新知