「javascript/test」の編集履歴（バックアップ）一覧に戻る

javascript/test - (2017/12/06 (水) 05:36:13) のソース

#js(){{{
<style>
/* アイテムアイコン */
span.item {
  display: inline-block;
  width:  54px;
  height: 59px;
  color: white;
  font-size: 12px;
  text-shadow: 1px 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black;
  text-align: right;
  vertical-align: bottom;
  padding: 33px 7px 10px 0px;
  background-size: cover;
  box-sizing: border-box;
}
[data-itemicon] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}
[data-itemicon]:before,
[data-itemicon]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}
[data-itemicon]:before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -87px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-itemicon);
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}
[data-itemicon]:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}
[data-itemicon]:hover:before,
[data-itemicon]:hover:after,
.show_itemicon {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
</style>
<script type="text/javascript">
$(function(){
  var imageapi = 'https://www9.atwiki.jp/f_go?cmd=upload&act=open&pageid=1857&file=';
  //アイテムアイコンの上にテキストを貼る
  $('span.item').each(function(){
    var prm = $.map($(this).text().split(','), $.trim);
    if (!prm[0]) {
      $(this).css('color', 'red').text('アイテム名がありません!!');
      return true;
    }
    $(this).css('background-image',"url('"+imageapi+prm[0]+".png')")
      .attr('data-itemicon', prm[0] || '')
      .text(prm[1] || '')
      .bind('touchstart', function() { $(this).addClass("show_itemicon"); return false; })
      .bind('touchmove', function() { return false; })
      .bind('touchend', function() { $(this).removeClass("show_itemicon"); return false; });
  });
});
</script>
}}}