#demo {
            float: left;
            width: 300px;
        }

        #wraper {
            position: relative;
            width: 300px;
            height: 300px;
            background: #fff url(/Skin/yanmoji/cn/images/loading.gif) no-repeat center center;
            border: 5px solid #fff;
        }

        #small {
            border: 1px solid #AAA;
            width: 300px;
            height: 300px;
            overflow: hidden;
        }

        #mask {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            height: 100px;
            overflow: hidden;
            width: 100px;
            border: 1px dashed #999;
            cursor: move;
        }

            #mask div {
                background: #fff;
                opacity: .4;
                filter: alpha(opacity:40);
                height: 100px;
            }

        #big {
            height: 400px;
            width: 400px;
            border: 1px solid #ccc;
            position: absolute;
            top: -5px;
            left: 310px;
            z-index: 999;
            background: #fff url(/Skin/yanmoji/cn/images/loading.gif) no-repeat center center;
            overflow: hidden;
        }

        #bg {
            background: black;
            position: absolute;
            left: 0;
            top: 0;
            height: 300px;
            width: 300px;
            z-index: 1;
            opacity: 0;
            filter: alpha(opacity:0 );
        }

        #big img {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
        }