【jQuery】AngularとjQueryを使用したホバーキャプションNg Caption Hover

Ng Caption HoverはAngularとjQueryを使用してホバー効果とキャプションを追加。

Script

<link rel="stylesheet" type="text/css" href="dist/ng-caption-hover.min.css" media="screen">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="dist/ng-caption-hover.min.js"></script>

アプリにモジュールを追加

 angular.module('yourApp', ['ng-caption-hover']);

HTML

Image

<div ng-caption-hover-root>
<div ng-caption-hover-content>
<img src="demo/sample.jpg">
</div>
<div ng-caption-hover-caption>
When you hover on this, you see me
</div>
</div>

list

<div class="row">
<div class="col-md-3 text-center" ng-repeat="item in [1,2,3,4] track by $index">
<div ng-caption-hover-root>
<div ng-caption-hover-content>
<img src="demo/sample.jpg">
</div>
<div ng-caption-hover-caption>
When you hover on this, you see me. I'm {{$index+1}}
</div>
</div>
</div>
</div>

MITライセンス

 
Ng Caption Hover

【jQuery】AngularとjQueryを使用したホバーキャプションNg Caption Hover

  • LATEST
  • RELATED
  • POPULAR