js實(shí)現(xiàn)自定義表情生成

標(biāo)簽：

Html/CSS JQuery

发一波福利，自动生产一个表情，点击运行代码查看

<!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" />
<title>举牌表情生成器</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
    *{
        margin: 0;
        padding:0;
        box-sizing: border-box; 
    }
    .nain_container{
        width:403px;
        height: 400px;
        margin: 100px auto 0;
    }
    .item{
        display: inline-block;
        position: relative;
    }
    .font{
        background-color: #f9dd22;
        width: 1em;
        position: absolute;
        top: 5px;
        left: 15px;
        font-size: 26px;
        transform: rotate(28deg);
        line-height: 1;
    }
    .c{
        width: 100%;
        margin: 30px auto;
        text-align: center;
    }
    #shiyan{
        line-height: 40px;
    }
    #btn{
        height: 40px;
    }
</style>
</head>

<body>
    <div class="c">
        <input type="text" name="" id="shiyan" placeholder="输入一句话">
        <button onclick="creatbiaoqing()" id="btn">生成表情</button>
    </div>
   <div class="nain_container">
   </div>
</body>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
    function creatbiaoqing(){
        var imgsrc = ['http://ojo1st7jb.bkt.clouddn.com/1.png','http://ojo1st7jb.bkt.clouddn.com/2.png','http://ojo1st7jb.bkt.clouddn.com/3.png','http://ojo1st7jb.bkt.clouddn.com/4.png','http://ojo1st7jb.bkt.clouddn.com/5.png','http://ojo1st7jb.bkt.clouddn.com/6.png'];
        var msg = $('#shiyan').val();
        var msgA = msg.split('');
        var str = '';
        for (var i = 0; i < msg.length; i++) {
            var _str = '<div class="item"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'+imgsrc[Math.floor(Math.random()*6)]+'"><div class="font">'+msgA[i]+'</div></div>';
            str+=_str;
        }
        $('.nain_container').html(str);
        var items = $('.item');
        items.each(function(index){
            var _top = 20*(index%6);
            $(this).css({top:_top});
        });
    }
</script>
</html>

點(diǎn)擊查看更多內(nèi)容