Line 15: | Line 15: | ||
#top_title{display:none;} | #top_title{display:none;} | ||
.igem_2018_team_menu{display:none !important;} | .igem_2018_team_menu{display:none !important;} | ||
+ | .vi{ | ||
+ | visibility: visible !important; | ||
+ | display: block !important; | ||
+ | width:20px; | ||
+ | height:20px; | ||
+ | top:0px; | ||
+ | position:absolute; | ||
+ | right:0px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size:100% 100%; | ||
+ | -moz-background-size:100% 100%; | ||
+ | -webkit-background-size:100% 100%; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2018/3/31/T--Tianjin--close.jpg); | ||
+ | } | ||
</style> | </style> | ||
<script src="https://use.fontawesome.com/597ba5ca72.js"></script> | <script src="https://use.fontawesome.com/597ba5ca72.js"></script> | ||
Line 272: | Line 286: | ||
− | <script type="text/javascript" | + | <script type="text/javascript"> |
+ | $(document).ready(function(){ | ||
+ | maskMouseOver(); | ||
+ | }); | ||
+ | function maskMouseOver(){ | ||
+ | $('.texta').each(function(){ | ||
+ | $(this).on('click',function(event){ | ||
+ | if($(event.target).is('.closeMask')){ | ||
+ | event.preventDefault(); | ||
+ | $(this).css({'visibility':'hidden','display':'none'}); | ||
+ | $('div.textChange').removeClass('textAnimation'); | ||
+ | $(document).unbind('mousewheel'); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | var QAQ="I don't want to write like this, but if I use 'for', there is always something wrong.Excuse me." | ||
+ | var mask1 =$('a.mask1'); | ||
+ | var text1 = $('div.text1'); | ||
+ | mask1.on('click',function(event){ | ||
+ | event.preventDefault(); | ||
+ | text1.css({'visibility':'visible','display':''}); | ||
+ | $('div.textChange').addClass('textAnimation'); | ||
+ | $(document).bind('mousewheel', function(event, delta) { return false; }); | ||
+ | }); | ||
+ | var mask2 =$('a.mask2'); | ||
+ | var text2 = $('div.text2'); | ||
+ | mask2.on('click',function(event){ | ||
+ | event.preventDefault(); | ||
+ | text2.css({'visibility':'visible','display':''}); | ||
+ | $('div.textChange').addClass('textAnimation'); | ||
+ | $(document).bind('mousewheel', function(event, delta) { return false; }); | ||
+ | }); | ||
+ | var mask3 =$('a.mask3'); | ||
+ | var text3 = $('div.text3'); | ||
+ | mask3.on('click',function(event){ | ||
+ | event.preventDefault(); | ||
+ | text3.css({'visibility':'visible','display':''}); | ||
+ | $('div.textChange').addClass('textAnimation'); | ||
+ | $(document).bind('mousewheel', function(event, delta) { return false; }); | ||
+ | }); | ||
+ | var mask4 =$('a.mask4'); | ||
+ | var text4 = $('div.text4'); | ||
+ | mask4.on('click',function(event){ | ||
+ | event.preventDefault(); | ||
+ | text4.css({'visibility':'visible','display':''}); | ||
+ | $('div.textChange').addClass('textAnimation'); | ||
+ | $(document).bind('mousewheel', function(event, delta) { return false; }); | ||
+ | }); | ||
+ | var mask5 =$('a.mask5'); | ||
+ | var text5 = $('div.text5'); | ||
+ | mask5.on('click',function(event){ | ||
+ | event.preventDefault(); | ||
+ | text5.css({'visibility':'visible','display':''}); | ||
+ | $('div.textChange').addClass('textAnimation'); | ||
+ | $(document).bind('mousewheel', function(event, delta) { return false; }); | ||
+ | }); | ||
+ | var mask6 =$('a.mask6'); | ||
+ | var text6 = $('div.text6'); | ||
+ | mask6.on('click',function(event){ | ||
+ | event.preventDefault(); | ||
+ | text6.css({'visibility':'visible','display':''}); | ||
+ | $('div.textChange').addClass('textAnimation'); | ||
+ | $(document).bind('mousewheel', function(event, delta) { return false; }); | ||
+ | }); | ||
+ | </script> | ||
+ | <script> | ||
+ | var $close ='<div class="texta closeMask vi"></div>'; | ||
+ | $('.textChange').append($close); | ||
+ | </script> | ||
<div></div> | <div></div> | ||
Revision as of 05:23, 5 August 2018