素材网 素材网

CSS3 DIV 卡通马铃薯土豆表情代码

下载资源()次

阅读次数()次

发布时间:2017-08-24

CSS3  DIV 卡通马铃薯土豆表情代码
分享到:

用法简介:

来源:xw素材网


CSS3  DIV 卡通马铃薯土豆表情代码。
文件引用:

<script>

var stuff = {

    'accessories': {

      0: {

        element: 'headphones',

        template: "<div class='menu-wrapper headphones'></div>"

      },

      1: {

        element: 'cat-stuff',

        template: "<div class='menu-wrapper cat-stuff'><div class='cat-ear left'></div><div class='cat-ear right'></div><div class='cat-whiskas left'></div><div class='cat-whiskas right'></div></div>"

      },

      2: {

        element: 'sunglasses',

        template: "<div class='menu-wrapper sunglasses'><div class='lens left'></div><div class='lens right'></div></div>"

      },

      3: {

        element: 'tie',

        template: "<div class='menu-wrapper tie'><div class='details'></div></div>"

      },

      4: {

        element: 'none-accessories',

        template: "<div class='menu-wrapper none'></div></div>"

      }

    },

    'eyes': {

      0: {

        element: 'eye-cute-wrapper',

        template: "<div class='menu-wrapper eye-cute-wrapper'><div class='eye-cute left'></div><div class='eye-cute right'></div></div>"

      },

      1: {

        element: 'eye-happy-wrapper',

        template: "<div class='menu-wrapper eye-happy-wrapper'><div class='eye-happy left'></div><div class='eye-happy right'></div></div>"

      },

      2: {

        element: 'eye-simple-wrapper',

        template: "<div class='menu-wrapper eye-simple-wrapper'><div class='eye-simple left'></div><div class='eye-simple right'></div></div>"

      },

      3: {

        element: 'eye-crazy-wrapper',

        template: "<div class='menu-wrapper eye-crazy-wrapper'><div class='eye-crazy left'></div><div class='eye-crazy right'></div></div>"

      },

      4: {

        element: 'eye-afraid-wrapper',

        template: "<div class='menu-wrapper eye-afraid-wrapper'><div class='eye-afraid left'></div><div class='eye-afraid right'></div></div>"

      },

    },

    'mouth': {

      0: {

        element: 'happy-mouth',

        template: "<div class='happy-mouth'><div class='extra'></div></div>"

      },

      1: {

        element: 'ok-mouth',

        template: "<div class='ok-mouth'></div>"

      },

      2: {

        element: 'sad-mouth',

        template: "<div class='sad-mouth'></div>"

      },

      3: {

        element: 'smiling-mouth',

        template: "<div class='smiling-mouth'></div>"

      },

    },

    'clothes': {

      0: {

        element: 'dress-white',

        template: "<div class='dress-white menu-wrapper'><div class='botao topo'></div><div class='botao meio'></div><div class='botao bottom'></div></div>"

      },

      1: {

        element: 'dress-goth',

        template: "<div class='dress-goth menu-wrapper'><div class='botao topo'></div><div class='botao meio'></div><div class='botao bottom'></div></div>"

      },

      2: {

        element: 'dress-fancy',

        template: "<div class='dress-fancy menu-wrapper'><div class='collar'></div></div>"

      },

      3: {

        element: 'none-dress',

        template: "<div class='menu-wrapper none'></div></div>"

      }

    },

    'skin': {

      0: {

        element: 'lighter',

        template: "<div class='skin-tone lighter'></div>"

      },

      1: {

        element: 'regular',

        template: "<div class='skin-tone regular'></div>"

      },

      2: {

        element: 'darker',

        template: "<div class='skin-tone darker'></div>"

      },

      3: {

        element: 'crazy',

        template: "<div class='skin-tone crazy'></div>"

      },

    }

  },

  current = 'accessories';


var createSecondaryMenu = function createSecondaryStuff(id) {

  var i = 0;


  $('.secondary-menu ul').removeClass(current).addClass(id);

  current = id;


  $('.secondary-menu ul').empty();


  for (i = 0; i < Object.keys(stuff[id]).length; i++) {

    $('.secondary-menu ul').append('<li>' + stuff[id][i].template + '</li>');

  }


};


var putOnPotato = function putOnPotato(num) {

  var type;


  type = $('.secondary-menu ul')[0].className;

  if (type === 'skin') {

    $('.potato').removeClass('crazy lighter darker regular').addClass(stuff[type][num].element);

    if (stuff[type][num].element === 'crazy')

      $('.potato-skin').addClass('crazy');

    else

      $('.potato-skin').removeClass('crazy');

  } else {

    $('.' + type + '-item').addClass('hidden');

    $('.' + stuff[type][num].element).removeClass('hidden');

  }

};


var changeMainMenu = function changeMainMenu(num) {

  var type = $('.main-menu li.active').attr('id');

  $('.main-menu li.active .current-type').empty().append(stuff[type][num].template);

};


$(function() {

  $('.main-menu li').on('click', function() {

    $('.main-menu li').removeClass('active');

    $(this).addClass('active');

    createSecondaryMenu($(this).attr('id'));

  });


  $('.secondary-menu ul').on('click', 'li', function() {

    $('.secondary-menu li').removeClass('active');

    $(this).addClass('active');

    putOnPotato($('li').index(this) - 5);

    changeMainMenu($('li').index(this) - 5);

  });

});

</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。