jQuery

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

September 9, 2016
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ライセンス