imleç altyazılarının dokunmatik ekranlarda dokunma şekli nasıl yapılır

-1

Sadece CSS kullanarak bir küçük resim açıldığında, başlığın görünüme kaydığını gösteren bir galeri oluşturdum. Dokunmatik ekranlarda, tuşa dokunulduğunda ve tutulduğunda, başlığın göründüğü bir tür çalışma vardır. Bir dokunuşun başlığı getirmesini ve galeriye ikinci bir musluk girmesini sağlamak istiyorum. Her türlü jQuery kodunu denedim, ancak ikinci dokunmayı etkinleştirecek bir şey yok. Ayrıca galeriye girmeden önce başlığı okumak için ikinci veya iki gecikmeli bir dokunuş olsaydı da aldırmazdım. Javascript ve bu site için yeniyim, bu yüzden eğer bunu doğru bir şekilde sormazsam özür dilerim. Yardım ettiğin için teşekkür ederim! , Hover aktiveimleç altyazılarının dokunmatik ekranlarda dokunma şekli nasıl yapılır

<head> 
    <script src="js/jquery-1.12.0.min.js"></script> 
    <script type="text/javascript"> 
    $("target").click(function(){ $(this).toggleClass("titleBox"); }); 
    </script> 
</head> 

<body ontouchstart="" class="no-touch"> 
<div class="wrap"> 

<!-- Define all of the tiles: --> 

<div class="box"> 
<div class="boxInner"> 
    <a href="buildings/colorclock.html"> 
    <img src="images/buildings/thumbs/06.jpg" alt="Color Clock House"> 
    <div class="titleBox">Color Clock House</div> 
    </a> 
    </div> 
</div> 
<div class="box"> 
    <div class="boxInner"> 
    <a href="buildings/treetriangle.html"> 
    <img src="images/buildings/thumbs/07.jpg" alt="Tree Triangle House"> 
    <div class="titleBox">Tree Triangle House</div> 
    </a> 
    </div> 
</div> 
</div> 
</body> 

<style type="text/css"> 
    body { 
    margin: 0; 
    padding: 0; 
    } 

.wrap { 
    overflow: hidden; 
    margin: auto; 
    padding: 0 10%; 
    margin-top: 40px; 
} 

.box { 
    float: left; 
    position: relative; 
    width: 20%; 
    padding-bottom: 20%; 
} 

.boxInner { 
    position: absolute; 
    left: 20px; 
    right: 20px; 
    top: 20px; 
    bottom: 20px; 
    overflow: hidden; 
} 

.boxInner img { 
    width: 100%; 
} 

.boxInner .titleBox { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin-bottom: -50px; 
    font-size: .9em; 
    background: #fff; 
    background-size: 105%; 
    color: #A59E97; 
    padding: 5px; 
    text-align: center; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 


body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { 
    margin-bottom: 0; 
} 

.boxInner:focus { 
    cursor: pointer; 
    }

kaynak

2016-04-07 RebT

** Bir şekilde ** bir şekilde ** soruna benzer. http://stackoverflow.com/questions/36439255/jquery-triggering-fadein-and-fadeout-on-menu/36439437#36439437 adresini kontrol edin –

keresinde tıklayın çözmek için nihayet başardı dokunmatik ekranlarda bağlantıyı açmak için iki kez tıklayın:

İşte benim kod. Buradaki kodla ilgilenen biri varsa.

jQuery(function($) { 
     $('.boxInner').on("touchstart", function (e) { 
      'use strict'; //satisfy code inspectors 
      var link = $(this); //preselect the link 
      if (link.hasClass('hover')) { 
       return true; 
      } else { 
       link.addClass('hover'); 
       $('a.taphover').not(this).removeClass('hover'); 
       e.preventDefault(); 
       return false; 
      } 
     });

kaynak

2016-04-09 21:40:28 RebT

imleç altyazılarının dokunmatik ekranlarda dokunma şekli nasıl yapılır

cevap

İlgili konular