master

分支 (1)

管理

管理

master

jqueryPuzzle
/
index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title> jquery拼图 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="puzzle.js"></script>
<style type="text/css">
    *{padding:0;margin:0;}
    li{list-style: none;}
    .text-center{text-align: center;}
    .start_area{
        position: absolute;
        height: 120px;
        top: 150px;
        left: 0;
        right: 0;
        max-width: 100%;
        background: rgba(54,46,43,0.5);
        z-index: 9999;
    }
    #imgArea{width:630px;height:840px;position:relative;max-width: 100%;}
    #imgArea img{max-width: 100%;}
    #imgArea div.imgCell{float:left;width:73px;height:73px;border:1px solid #fff;border-radius:4px;position:absolute;z-index:10;box-shadow:0px 0px 8px #fff;transition-property:background-position;transition-duration:300ms;transition-timing-function:ease-in-out;}
    #imgArea div.hover{filter: alpha(opacity=80);opacity:.8;box-shadow: 0px 0px 8px #000;z-index:20;*border:1px solid #09F;}
</style>
</head>
<body>
    <div id="wrap">
        <div class="start_area">
            <p class="text-center" style="margin-top:20px;">
                <a href="topic:1952">
                    <img style="max-width:20%;" src="http://ijifu-site.qiniudn.com/yuandan_detail.png">
                </a>
            </p>
            <p class="text-center">
                <span id="start">
                    <img style="max-width:40%;" src="http://ijifu-site.qiniudn.com/yuandan_start.png">
                </span>
            </p>
        </div>
        <div id="right">
            <div id="imgArea"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
/* 加入图片，运行代码 */
// $(function(){
    var pg = new puzzleGame({'img':'http://ijifu-site.qiniudn.com/active_yuandan15.jpg', 'imgInfo' : {'width':630, 'height':840}, 'statbtn' : '#start', 'imgArea' : '#imgArea', 'btnLevel' : '#wrap #left ul #level span'})
// });
</script>
</html>