盖章

盖章

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>章子</title>
    <style>
        body,div,img,h1,p,h3{padding:0;margin:0;}
        body{position: relative;}
        .a{border: 3px solid red;}
        .con{border: 1px solid green;width:424px;height: 234px;background: url("bac1.png") no-repeat;}
        .b{position: absolute;}
        .c{border: 1px dashed red;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function () {
            var imgW=0;
            var imgH=0;
            var imgNew;
            $("img").click(function(){
                 imgW=$(this).width()/2;
                 imgH=$(this).height()/2;
                $(this).addClass('a').siblings().removeClass('a');
                imgNew=$(this).clone().removeClass('a').addClass('b');
                $("img").remove('.b');
            });
            $(".con").click(function (e) {
                $('img').remove('.b');
                $(this).append(imgNew);
                $(".b").css({top: e.pageY-imgH,left: e.pageX-imgW});
            })
        })
    </script>
</head>
<body>
<h3>（使用说明：先选择章子，再把鼠标移到单据中需要盖章的位置，单击，显示章子。）</h3>
<img src="pic1.png" alt="pic1"/>
<img src="pic2.png" alt="pic2"/>
<img src="pic3.png" alt="pic3"/>
<img src="pic4.png" alt="pic4"/>
<img src="pic5.png" alt="pic5"/>
<div class="con">123</div>
</body>
</html>

 划线

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,input,tr,td,table,div,h1{
            padding: 0;
            margin: 0;}
        tr,input{line-height: 30px;height: 30px;}
        input{border:0;}
        .a{border: 1px solid red;width:0px;display: none; position: absolute;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function () {
            var pos=0;
            var index=0;
            $("tr").click(function () {
                 index=$(this).index()+1;
               pos=index*$(this).height();
            })
            $("button").click(function () {
                if(index<=1)return;
                $(".a").css('width','0px');
                $(".a").show().css({top: pos+'px',left:'0px'}).stop().animate({width:'800px'},1000);
            })
        })
    </script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1" width="800">
    <tr>
        <td>月份</td><td>edit</td><td>view</td>
    </tr>
    <tr>
        <td><input type="text" value="11"/></td><td>edit1</td><td>view2</td>
    </tr>
    <tr>
        <td><input type="text" value="12"/></td><td>edit2</td><td>view2</td>
    </tr>
    <tr>
        <td><input type="text" value="本月累计"/></td><td></td><td></td>
    </tr>
    <tr>
        <td><input type="text" value="1"/></td><td>edit3</td><td>view3</td>
    </tr>
    <tr>
        <td><input type="text" value="2"/></td><td>edit4</td><td>view4</td>
    </tr>
<div class="a"></div>
</table>
<button>btn</button>
</body>
</html>

 

posted @ 2016-07-08 10:23  gyz418  阅读(117)  评论(0)    收藏  举报