jquery实现可回退连线答题效果代码-html代码-BFW代码库

jquery实现可回退连线答题效果代码

代码语言：html

所属分类：拖放

代码描述：jquery实现可回退连线答题效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 14px;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            overflow: hidden;
        }

        .clearfix {
            zoom: 1;
        }

        .show {
            position: relative;
            width: 540px;
            margin: 40px 100px;
            cursor: pointer;
        }

        .canvas {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
        }

        .backcanvas {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -2;
        }

        .showleft {
            float: left;
            width: 152px;
        }

        .showright {
            float: right;
            width: 152px;
        }

        .show .showitem {
            width: 152px;
            height: 130px;
            display: block;
            margin: 10px 0;
            border-radius: 15px;
            padding: 10px;
        }

        .tools {
            position: absolute;
            height: 30px;
            width: 500px;
            position: absolute;
            top: 550px;
            left: -178px;
        }

            .tools div {
                float: right;
                height: 30px;
                padding: 0 5px;
                margin: 0 5px;
                color: #060707;
                cursor: pointer;
                line-height: 30px;
            }

                .tools div:hover {
                    color: #C30;
                }

            .tools .goBackBtn {
                color: #aaa39f;
            }

            .tools .resetCanvasBtn {
                color: #aaa39f;
            }

        .showleft .showitem {
            color: #aaa39f;
            font-size: 18px;
        }

            .showleft .showitem img {
                padding-right: 0px;
            }

        .showright .showitem {
            color: #aaa39f;
            font-size: 18px;
        }

            .showright .showitem img {
                padding-right: 0px;
            }

            .showright .showitem p {
                position: relative;
                top: -76px;
                left: 107px;
                ;
            }

        .demo1 {
            width: 760px;
            height: 706px;
            margin: 0 auto;
        }

        .btn {
            background: url(//repo.bfw.wiki/bfwrepo/images/lianxina/tijiao.png) no-repeat;
            width: 117px;
            height: 64px;
            border: 0;
            text-indent: -99999px;
            cursor: pointer;
            margin-left: 320px;
            margin-top: -26px;
        }
    </style>

</head>

<body>
    <form name="form" method="post" action="#">
        <div class="demo1">
            <div class="show clearfix">
                <div class="showleft" first="0">
                    <!--左侧-->
                    <span class="showitem" group="gpl" left="172" top="75" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_03.png" alt="">红色草莓味糖果</span>
                    <span class="showitem" group="gpl" left="172" top="235" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_11.png" alt="">绿色苹果味糖果</span>
                    <span class="showitem" group="gpl" left="172" top="395" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_18.png" alt="">黄色柠檬味糖果</span>
                </div>
                <div class="showright" first="0">
                    <!--右侧-->
                    <span class="showitem" group="gpr" left="388.0000305175781" top="75" sel="0" check="0"><img src="//repo.bfw.wiki/bfwrepo/images/lianxina/lianxian_06.png" alt=""><p>妈妈</p></span>
                    <span class="showitem" group="gpr" left.........完整代码请登录后点击上方下载按钮下载查看