3

私は自分のサイトで次のように設定しています。ただし、モバイル ブラウザーを使用している場合、タッチ/ホバー時に説明をフェード インできません。以下のコードを変更して、モバイル ブラウザーでも同じ動作をさせる方法はありますか?

JSFiddle はこちら: http://jsfiddle.net/CJNgb/

HTML

<article class="project">
  <div class="thumbnail view">
    <img src="http://lorempixel.com/output/people-q-c-292-292-9.jpg" />
    <section class="description">
      <hgroup>
        <h2>Title</h2>
        <h3>Identity, Illustration, Web</h3>
      </hgroup>
      <p>Description of project.</p>
      <a class="screenshot single-image" href="http://lorempixel.com/output/nightlife-q-c-700-700-4.jpg"></a>
        <span><a href="http://test.com" target="_blank">Visit website</a>   <a href="http://test.com/read-more">View more</a></span>
    </section>
  </div>
</article>

CSS

body {
color: #666;
font: 11px/1.5 helvetica,arial,sans-serif;
}
a { font-weight:bold;text-decoration:none }
.project {
background: #fff;
border: 1px solid #e5e5e5;
float: left;
height: 292px;
margin: 0 20px 20px 0;
overflow: hidden;
padding: 3px;
position: relative;
top: auto;
width: 292px;
}
.project .thumbnail {
   float: left;
   overflow: hidden;
   cursor: default;
   background: #f4f3f1;
    width:292px;
    height:292px;
}
.project .description {
   width: 252px;
   height:252px;
   position: absolute;
   top: 3px;
   left: 3px;
   padding:20px;
}
.project .description span a {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 150ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 150ms;
background: #fff;
border: 1px solid #dedede;
color: #222 !important;
display: block;
float: left;
margin: 10px 10px 0 0;
padding: 10px 15px;
}
.screenshot {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 150ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 150ms;
background: url("http://i.imgur.com/fEoN3s9.png") no-repeat scroll 0 0 transparent;
background-size: 37px 46px;
display: block;
height: 46px;
position: absolute;
right: 20px;
top: 20px;
width: 37px;
}
.thumbnail img {
   display: block;
   position: relative;
}
.thumbnail h2 {
   margin-bottom:5px;
   padding-bottom:0;
}
.project .description h3 {
   border-bottom:1px solid #dedede;
   color: #666;
   font-size:1em;
   margin-bottom: 15px;
   padding-bottom: 15px;
}
.project .description a {
   color: #ea641c;
}
.view img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: #f4f3f1;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view hgroup {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view:hover .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view:hover hgroup,
.view:hover p,
.view:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

編集：この行を追加すると、モバイルでこれが機能しました！document.addEventListener("touchstart", function() {},false);

4

1 に答える 1

1

この JavaScript ソリューションに頼ることができます。

ゼプト

JsFiddleを
見る ライブデモを見る

まず、ダウンロード Zepto.jsします。これは、モバイル ブラウザーに重点を置いた非常に軽量なライブラリです。タッチ イベントには、Zeptoフォルダーtouch.jsに含まれている Zepto モジュールも必要です。src

したがって、必要なのは次の 2 つの ファイル
だけzepto.jsです。
touch.js

Zepto は、次のタッチ イベントをサポートしています。

  • tap— 要素がタップされると発生します。
  • singleTapおよびdoubleTap— このイベントのペアは、同じ要素のシングル タップとダブル タップの両方を検出するために使用できます (ダブル タップ検出が必要ない場合は、代わりにタップを使用してください)。
  • longTap— 要素がタップされ、指が 750 ミリ秒以上押されたときに発生します。
  • swipe, swipeLeft, swipeRight, swipeUp, swipeDown— 要素がスワイプされたときに発生します (オプションで指定された方向に)


新しいコード:

HTML/JS

<body>
<article class="project">
  <div class="thumbnail view">
    <img src="http://lorempixel.com/output/people-q-c-292-292-9.jpg" />
    <section class="description">
      <hgroup>
        <h2>Title</h2>
        <h3>Identity, Illustration, Web</h3>
      </hgroup>
      <p>Description of project.</p>
      <a class="screenshot single-image" href="http://lorempixel.com/output/nightlife-q-c-700-700-4.jpg"></a>
        <span><a href="http://test.com" target="_blank">Visit website</a>   <a href="http://test.com/read-more">View more</a></span>
    </section>
  </div>
</article>

<script src="zepto.js"></script>
<script src="touch.js"></script>
<script>
$('.view').tap(function(){
    if( $(this).hasClass('view-tap') ) {
        $(this).removeClass('view-tap')
    } else {
        $(this).addClass('view-tap')
    }
})

// Prevent any link click, when tap on image
$('.view a').on('click', function(e) {
    if( !$('.view').hasClass('view-tap') ) {
        e.preventDefault()
    }
})
</script>
</body>

CSS (差し替え部分のみ:.view-tapそれぞれの横に追記.view:hover)

.view:hover img, .view-tap img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view:hover .description, .view-tap .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view:hover hgroup, .view-tap hgroup,
.view:hover p, .view-tap p,
.view:hover a.info, .view-tap a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view:hover p, .view-tap p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view:hover a.info, .view-tap a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

このアプローチの利点は、ブラウザー間の互換性を心配する必要がないことです。将来、さらに多くのモバイル機能が必要になった場合でも、簡単に実装できます。

于 2013-04-15T04:36:22.653 に答える