|
|
| Line 1: |
Line 1: |
| <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
| |
| <style>
| |
| #chars a img.thumbborder {
| |
| border: none;
| |
| }
| |
| #chars a:hover img.thumbborder {
| |
| -webkit-filter: grayscale(50%) brightness(50%);
| |
| filter: grayscale(70%) brightness(50%) blur(2px);
| |
| -webkit-transition : -webkit-filter 250ms linear;
| |
| transition: filter 250ms linear;
| |
|
| |
| }
| |
| #chars a:hover .tcont{
| |
| opacity: 1;
| |
| transition: opacity 250ms linear;
| |
|
| |
| }
| |
| #chars a:hover
| |
| {
| |
| text-decoration: none;
| |
| }
| |
| div#chars .tcont{
| |
| position: relative;
| |
| opacity: 0;
| |
| color:white;
| |
| font-family: Cinzel Decorative;
| |
| font-weight: bold;
| |
| font-size: 14px;
| |
| display: inline-block;
| |
| width: 144px;
| |
| top: -90px;
| |
| left: 6px;
| |
| text-align: center;
| |
|
| |
| }
| |
| #chars a {
| |
| display: inline-grid;
| |
| max-width: 150px;
| |
| max-height: 150px;
| |
| margin-right: 20px;
| |
| margin-left:30px;
| |
| margin-bottom: 30px;
| |
|
| |
| }
| |
| div#filter{
| |
| border: 3px solid #dddddd;
| |
| border-radius: 200px;
| |
| overflow: hidden;
| |
| display: block;
| |
| }
| |
|
| |
| div#chars {
| |
| text-align: center;
| |
| }
| |
| div#chars #breaker {
| |
| text-align: left;
| |
| text-size: 18px;
| |
| text-weight: bold;
| |
| }
| |
| #breaker {
| |
| display: block;
| |
| text-align:left;
| |
| font-size: 20px;
| |
| font-weight: bold;
| |
| padding: 5px;
| |
| }
| |
| #charSelect {
| |
| border: 1px solid #000;
| |
| font-size: 14px;
| |
| color: #fff;
| |
| background: #444;
| |
| padding: 2px;
| |
| position: relative;
| |
| width: 220px;
| |
| }
| |
| #charTitle{
| |
| display: inline-block;
| |
| text-align:center;
| |
| font-size: 24px;
| |
| font-weight: bold;
| |
| width: 58%;
| |
| }
| |
| </style>
| |
|
| |
|
| |
| <script> | | <script> |
| window.addEventListener('load',
| | charList(); |
| function() {
| |
| | |
| if(!$("#filter").length){
| |
| $("#chars img.thumbborder").wrap("<div id='filter'></div>");
| |
| }
| |
| $("div#filter").each(function(){
| |
| $(this).after("<span class='tcont'>" + $(this).parent().attr("title") +"</span>")});
| |
| | |
| $("#chars img").each(function() {
| |
| var text = $(this).attr("class");
| |
| text = text.substring(0, text.indexOf(" "));
| |
| $(this).parent().parent("a").attr("class", text);
| |
| });
| |
| | |
| $("span.tcont").each(function() {
| |
| if($(this).height() > 44 && $(this).height() < 67){
| |
| $(this).parent().css("position", "relative");
| |
| $(this).css("top", "-100px");
| |
| }
| |
| if($(this).height() > 67){
| |
| $(this).parent().css("position", "relative");
| |
| $(this).css("top", "-110px");
| |
| }
| |
| });
| |
| | |
| var classList = [];
| |
| $("div#chars a").each(function() {
| |
| var text = $(this).attr("class");
| |
| text = text.substring(0, text.indexOf("-"));
| |
| if(classList.indexOf(text) < 0){
| |
| classList.push(text);
| |
| }
| |
| });
| |
| | |
| var charList = [];
| |
| $("span.tcont").each(function() {
| |
| if(charList.indexOf($(this).text()) < 0){
| |
| charList.push($(this).text());
| |
| }
| |
| });
| |
| | |
| var s1List = [];
| |
| $("div#chars a").each(function() {
| |
| if($(this).attr("class").startsWith("s1")){
| |
| if(s1List.indexOf($(this).find("span.tcont").text()) < 0){
| |
| s1List.push($(this).find("span.tcont").text());
| |
| }
| |
| }
| |
| });
| |
| | |
| var s2List = [];
| |
| $("div#chars a").each(function() {
| |
| if($(this).attr("class").startsWith("s2")){
| |
| if(s2List.indexOf($(this).find("span.tcont").text()) < 0){
| |
| s2List.push($(this).find("span.tcont").text());
| |
| }
| |
| }
| |
| });
| |
| | |
| | |
| }, false);
| |
| </script> | | </script> |
<script>
charList();
</script>
