jQuery图像标签提示Taggd js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图像标签提示Taggd js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery图像标签提示Taggd</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/taggd.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.taggd.js"></script>

    <script type="text/javascript">
    var data = [];
    var settings = [];

    $(window).load(function() {
        $('.taggd').each(function(i, e) {
            var $e = $(e);

            $e.taggd(settings[i]);
            $e.taggd('items', data[i])
        });
    });
    </script>
</head>

<body>

<div id="container">
    <div id="example">
        <img class="taggd" src="img/example.jpg" alt="photo" />

        <script type="text/javascript">
            data.push([
                { x: 0.512, y: 0.33, text: 'Huey' },
                { x: 0.548, y: 0.33, text: 'Dewey' },
                { x: 0.567, y: 0.36, text: 'Louie' }
            ]);

            settings.push({
                align: { 'y': 'bottom' },
                offset: { 'top': -15 },

                'handlers': {
                    'mouseenter': 'show',
                    'mouseleave': 'hide'
                }
            });
        </script>
    </div>

    <div class="content-wrapper">
	<img src="img/taggd.png" class="logo" alt="taggd" />

    <p>
        <strong>“A picture is worth a thousand words”</strong>, but sometimes 
		even a thousand words are just not enough.<br />
        <strong>Taggd</strong> is a jQuery plugin that help you create tags on images with, or without a 
		popup!
    </p>

    <ol>
        <li>
            <a href="#begin">Getting started</a>

            <ol>
                <li><a href="#download">Download</a></li>
                <li><a href="#basic-usage">Basic usage</a></li>
                <li><a href="#custom">Customization</a></li>
            </ol>
        </li>
        <li>
            Documentation

            <ol>
                <li>
                    <a href="#configuration">Configuration</a>

                    <ol>
                        <li><a href="#align">Align Object</a></li>
                        <li><a href="#handler">Handler Object</a></li>
                        <li><a href="#offset">Offset Object</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#items">Items</a>
                    <ol>
                        <li><a href="#item">Item Object</a></li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            Demo&#39;s

            <ol>
                <li><a href="#demo-0">Hover top popup</a></li>
                <li><a href="#demo-1">Click bottom popup</a></li>
                <li><a href="#demo-2">Click-mouseout left popup</a></li>
                <li><a href="#demo-3">Click custom</a></li>
            </ol>
        </li>
    </ol>
</div>

    <div id="begin">
        <div class="content-wrapper">
    <h2>Getting started</h2>


    <p>But, without data, there are no tags! We have to write just one more 
	line:</p>
    <pre>$( image ).taggd( &#39;items&#39;, data );</pre>
    <p>Read <a href="#items">Items</a> to learn how to set up the data.</p>

    <h3 id="custom">Customization</h3>

    <p>Of course, sometimes you want to do more than just a popup. By discarding 
	the <code>text</code> property of the <a href="#items">items</a>, and using 
	a function as <a href="#handler">Handler</a>, you can do whatever you want, 
	just like <a href="#demo-3">this demo</a>. If you need item-specific data in 
	the Handler, you can just add more properties to the <a href="#item">Item 
	Object</a>.</p>

    <p>CSS styles are easily customizable. Just edit or replace the CSS rules in 
	the file <code>css/taggd.css</code>.</p>
</div>
    </div>

    <div class="content-wrapper">
    <h2 id="configuration">Configuration</h2>

    <table>
        <thead>
        <tr>
            <td>Property</td>
            <td>Value</td>
            <td>Description</td>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>align</td>
            <td><a href="#align">Align Object</a></td>
            <td>Popup aligning settings</td>
        </tr>
        <tr>
            <td>handlers</td>
            <td><a href="#handler">Handler Object</a></td>
            <td>Event handlers</td>
        </tr>
        <tr>
            <td>offset</td>
            <td><a href="#offset">Offset Object</a></td>
            <td>Offset of the hover element in pixels</td>
        </tr>
        </tbody>
    </table>
</div>

<div class="content-wrapper">
    <h3 id="align">Align Object</h3>

    <p>Aligning is two-dimensional; the X-axis and the Y-axis. When you align an 
	object <strong>left</strong>, the <strong>left side</strong> is snapped 
	against the button.</p>

    <table>
        <thead>
        <tr>
            <td>Property</td>
            <td>Value</td>
            <td>Default</td>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>x</td>
            <td><code>String</code> left, right or center</td>
            <td>center</td>
        </tr>
        <tr>
            <td>y</td>
            <td><code>String</code> top, bottom or center</td>
            <td>center</td>
        </tr>
        </tbody>
    </table>

    <h4>Example</h4>

    <pre>{
    x: 13,
    y: 37
}</pre>
</div>

<div class="content-wrapper">
    <h3 id="handler">Handler Object</h3>

    <p>Handlers are used to add actions to the buttons. These are JavaScript 
	events like <code>click</code>, <code>mouseenter</code>, etc.<br />The 
	handler can be a function, or a string for popup interaction.</p>

    <table>
        <thead>
        <tr>
            <td>String</td>
            <td>Description</td>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>show</td>
            <td>Shows the popup</td>
        </tr>
        <tr>
            <td>hide</td>
            <td>Hides the popup</td>
        </tr>
        <tr>
            <td>toggle</td>
            <td>Toggles the popup visability</td>
        </tr>
        </tbody>
    </table>

    <h4>Example</h4>

    <pre>{
    click: function() {
        alert(&#39;You clicked the tag!&#39;);
    },

    mouseenter: &#39;show&#39;,
    mouseleave: &#39;hide&#39;
}</pre>
</div>

<div class="content-wrapper">
    <h3 id="offset">Offset Object</h3>

    <p>The offset is the offset of the popup in pixels.</p>

    <table>
        <thead>
        <tr>
            <td>Property</td>
            <td>Value</td>
            <td>Default</td>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>left</td>
            <td><code>Number</code></td>
            <td>0</td>
        </tr>
        <tr>
            <td>top</td>
            <td><code>Number</code></td>
            <td>0</td>
        </tr>
        </tbody>
    </table>

    <h4>Example</h4>

    <pre>{
    left: 13,
    top: 37
}</pre>
</div>

<div class="content-wrapper">
    <h2 id="items">Items</h2>

    <p>Items are what drives taggd. Without items, there&#39;s no way it would know 
	where to put the tags and popups. That&#39;s why, we need items.</p>
    <p>Items can be set with the following line, where <code>data</code> is an 
	array of <a href="#item">Item Objects</a>.</p>
    <pre>$( image ).taggd( &#39;items&#39;, data );</pre>
</div>

<div class="content-wrapper">
    <h3 id="item">Item Object</h3>

    <table>
        <thead>
        <tr>
            <td>Property</td>
            <td>Description</td>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td><code>Float</code> x</td>
            <td>X position of the tag (and popup)</td>
        </tr>

        <tr>
            <td><code>Float</code> y</td>
            <td>Y position of the tag (and popup)</td>
        </tr>

        <tr>
            <td><code>String</code> text</td>
            <td>Optional. Set&#39;s the text of the popup. If omitted, there will be 
			no popup.</td>
        </tr>
        </tbody>
    </table>

    <p>The <code>x</code> and <code>y</code> property can be in a scale from 0 
	to 1, or a number in pixels based on the image&#39;s dimensions. Both are 
	scalable.</p>
    <p>This object also accepts custom properties, that can be read using a <a href="#handler">
	Handler</a>.</p>

    <h4>Example</h4>

    <pre>{
    x: 0.5,
    y: 0.5,
    text: &#39;Popup text&#39;
}</pre>
</div>
    <div id="demo-0">
    <img class="taggd" src="img/demo-0.jpg" alt="photo" />

    <div class="content-wrapper">
        <h3>Settings</h3>

                <pre>{
    align: {
        y: &#39;bottom&#39;
    },

    offset: {
        top: -15
    },

    handlers: {
        mouseenter: &#39;show&#39;,
        mouseleave: &#39;hide&#39;
    }
}</pre>

        <h3>Items</h3>

                <pre>[
    { x: 1099,  y: 220,  text: &#39;Dave&#39;   }, // pixel-based
    { x: 0.431, y: 0.33, text: &#39;Phil&#39;   }, // scale (0 - 1)
    { x: 0.468, y: 0.28, text: &#39;Steven&#39; }
]</pre>
    </div>

    <script type="text/javascript">
        data.push([
            { x: 0.572, y: 0.343, text: 'Dave' },
            { x: 0.431, y: 0.33, text: 'Phil' },
            { x: 0.468, y: 0.28, text: 'Steven' }
        ]);

        settings.push({
            align: { 'y': 'bottom' },
            offset: { 'top': -15 },

            'handlers': {
                'mouseenter': 'show',
                'mouseleave': 'hide'
            }
        });
    </script>
</div>

<div id="demo-1">
    <img class="taggd" src="img/demo-1.jpg" alt="photo" />

    <div class="content-wrapper">
        <h3>Settings</h3>

            <pre>{
    align: {
        y: &#39;top&#39;
    },

    offset: {
        top: 15
    },

    handlers: {
        click: &#39;toggle&#39;
    }
}</pre>

        <h3>Items</h3>

            <pre>[
    { x: 0.62, y: 0.7, text: &#39;Rope&#39;             },
    { x: 0.51, y: 0.5, text: &#39;Bird&#39;             },
    { x: 0.40, y: 0.3, text: &#39;Water, obviously&#39; }
]</pre>
    </div>

    <script type="text/javascript">
        data.push([
            { x: 0.62, y: 0.7, text: 'Rope' },
            { x: 0.51, y: 0.5, text: 'Bird' },
            { x: 0.40, y: 0.3, text: 'Water, obviously' }
        ]);

        settings.push({
            align: { 'y': 'top' },
            offset: { 'top': 15 },

            'handlers': {
                'click': 'toggle'
            }
        });
    </script>
</div>

<div id="demo-2">
    <img class="taggd" src="img/demo-2.jpg" alt="photo" />

    <div class="content-wrapper">
        <h3>Settings</h3>

            <pre>{
    align: {
        x: &#39;right&#39;
    },

    offset: {
        left: -15
    },

    handlers: {
        click: &#39;show&#39;,
        mouseleave: &#39;hide&#39;
    }
}</pre>

        <h3>Items</h3>

            <pre>[
    { x: 0.415, y: 0.343, text: &#39;Leaf&#39;                   },
    { x: 0.25,  y: 0.33,  text: &#39;More water&#39;             },
    { x: 0.8,   y: 0.1,   text: &#39;This used to be a tree&#39; }
]</pre>
    </div>

    <script type="text/javascript">
        data.push([
            { x: 0.415, y: 0.343, text: 'Leaf' },
            { x: 0.25, y: 0.33, text: 'More water' },
            { x: 0.8, y: 0.1, text: 'This used to be a tree' }
        ]);

        settings.push({
            align: { 'x': 'right' },
            offset: { 'left': -15 },

            'handlers': {
                'click': 'show',
                'mouseleave': 'hide'
            }
        });
    </script>
</div>

<div id="demo-3">
    <img class="taggd" src="img/demo-3.jpg" alt="photo" />

    <div class="content-wrapper">
        <h3>Settings</h3>

            <pre>{
    align: {
        y: &#39;bottom&#39;
    },

    offset: {
        top: -12
    },

    handlers: {
        click: function( e ) {
            var wiki = &#39;http://en.wikipedia.org/wiki/&#39; + e.data.uri;
            window.open( wiki, &#39;_blank&#39; );
        },

        mouseenter: &#39;show&#39;,
        mouseleave: &#39;hide&#39;
    }
}</pre>

        <h3>Items</h3>

            <pre>[
    { x: 0.1,  y: 0.54, text: &#39;Auto Rickshaw&#39;,      uri: &#39;Auto_rickshaw&#39;              },
    { x: 0.49, y: 0.57, text: &#39;Registration Plate&#39;, uri: &#39;Vehicle_registration_plate&#39; },
    { x: 0.38, y: 0.9,  text: &#39;Lighting&#39;,           uri: &#39;Automotive_lighting&#39;        }
]</pre>
    </div>

    <script type="text/javascript">
        data.push([
            { x: 0.1, y: 0.54, text: 'Auto Rickshaw', uri: 'Auto_rickshaw' },
            { x: 0.49, y: 0.57, text: 'Registration Plate', uri: 'Vehicle_registration_plate' },
            { x: 0.38, y: 0.9, text: 'Lighting', uri: 'Automotive_lighting' }
        ]);

        settings.push({
            'align': { 'y': 'bottom' },
            'offset': { 'top': -12 },

            'handlers': {
                'click': function(e) {
                    var wiki = 'http://en.wikipedia.org/wiki/' + e.data.uri;
                    window.open(wiki, '_blank');
                },
                mouseenter: 'show',
                mouseleave: 'hide'
            }
        });
    </script>
</div>
</div>
</body>
</html>

JS代码(jquery.taggd.js):

(function($){
	var settings ={
	'align':{
	'x':'center','y':'center'}
,'handlers':{
}
,'offset':{
	'left':0,'top':0}
}
;
	var methods ={
	'init':function(opt){
	var wrapper = $('<div class="taggd-wrapper" />');
	var $this = this;
	$this.wrap(wrapper);
	$this.settings ={
}
;
	$.extend(true,$this.settings,settings);
	$.extend(true,$this.settings,opt);
	$(window).resize(function(){
	methods.draw.call($this);
}
);
}
,'items':function(items){
	var $this = this;
	var $wrapper = $this.parent('.taggd-wrapper');
	$this.css({
	'height':'auto','width':'auto'}
);
	var height = this.height;
	var width = this.width;
	$.each(items,function(i,v){
	var item = $('<span class="taggd-item" style="position:absolute;
	" />');
	if(v.x > 1 && v.x % 1 === 0 && v.y > 1 && v.y % 1 === 0){
	v.x = v.x / width;
	v.y = v.y / height;
}
item.attr('data-x',v.x);
	item.attr('data-y',v.y);
	$wrapper.append(item);
	if(typeof v.text === 'string' && v.text.length > 0){
	var hover = $('<span class="taggd-item-hover" />').html(v.text);
	hover.attr('data-x',v.x);
	hover.attr('data-y',v.y);
	$wrapper.append(hover);
}
if(typeof $this.settings.handlers === 'object'){
	for(var h in $this.settings.handlers){
	var f = $this.settings.handlers[h];
	if(typeof f === 'string'){
	switch(f){
	case 'show':item.on(h,methods.show);
	break;
	case 'hide':item.on(h,methods.hide);
	break;
	case 'toggle':item.on(h,methods.toggle);
	break;
}
}
else if(typeof f === 'function'){
	item.on(h,v,$this.settings.handlers[h]);
}
}
}
}
);
	$this.removeAttr('style');
	methods.draw.call($this);
}
,'show':function(){
	var $this = $(this);
	$this.addClass('active');
	$this.next().addClass('show');
}
,'hide':function(){
	var $this = $(this);
	$this.removeClass('active');
	$this.next().removeClass('show');
}
,'toggle':function(){
	var hover = $(this).next();
	if(hover.hasClass('show')) methods.hide.call(this);
	else methods.show.call(this);
}
,'draw':function(){
	var $this = this;
	var $parent = $this.parent('.taggd-wrapper');
	var poffset = $parent.offset();
	$parent.removeAttr('style').css({
	'height':$this.height(),'width':$this.width()}
);
	$parent.find('span').each(function(i,e){
	var $el = $(e);
	var left = $el.attr('data-x') * $this.width() + poffset.left;
	var top = $el.attr('data-y') * $this.height() + poffset.top;
	if($el.hasClass('taggd-item')){
	$el.css({
	'left':left - $el.outerWidth(true) / 2,'top':top - $el.outerHeight(true) / 2}
);
}
else if($el.hasClass('taggd-item-hover')){
	if($this.settings.align.x === 'center'){
	left -= $el.outerWidth(true) / 2;
}
else if($this.settings.align.x === 'right'){
	left -= $el.outerWidth(true)}
if($this.settings.align.y === 'center'){
	top -= $el.outerHeight(true) / 2;
}
else if($this.settings.align.y === 'bottom'){
	top -= $el.outerHeight(true)}
$el.css({
	'left':left + $this.settings.offset.left,'top':top + $this.settings.offset.top}
);
}
}
);
}
}
;
	$.fn.taggd = function(opt){
	if(methods[opt]){
	return methods[opt].apply(this,Array.prototype.slice.call(arguments,1));
}
else if (typeof opt === 'object' || !opt){
	return methods.init.apply(this,arguments);
}
return this;
}
;
}
)(jQuery);

CSS代码(style.css):

body{background-color:#fafafa;font-family:Arial,sans-serif;}
.content-wrapper{border-bottom:1px solid #e1e1e8;margin:0 auto 50px auto;padding-bottom:40px;width:960px;}
.content-wrapper.nocrap{border:0;}
#demos{background-color:#eee;}
#footer{color:#222;padding:10px;}
#footer a{color:#d14;}
#footer .content-wrapper{margin-bottom:0;}
h1.title{font-weight:normal;}
table{font-size:14px;width:100%;}
table thead{background-color:#eee;}
table tbody{color:#444;}
table td{border:1px solid #e1e1e8;padding:10px}
img.taggd{display:block;width:100%;}
img.logo{margin-top:10px;}
li,p{font-size:14px;}
pre,code{background-color:#f7f7f9;border:1px solid #e1e1e8;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#d14;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:12px;}
code{padding:0 5px;}
pre{padding:5px;}
ul,ol{margin:0 0 0 22px;padding:0;}
li ul,li ol{margin-bottom:10px;}
a{color:#d14;text-decoration:none;}
@media all and (max-width:1000px){.content-wrapper{margin:0 20px 40px 20px;width:auto;}
}

CSS代码(taggd.css):

.taggd-wrapper{overflow:hidden;}
.taggd-wrapper .taggd-item,.taggd-wrapper .taggd-item-hover{padding:10px;}
.taggd-wrapper .taggd-item{background-color:rgba(221,17,68,0.5);-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;-moz-transition:background-color 0.2s;-webkit-transition:background-color 0.2s;transition:background-color 0.2s;z-index:1000;}
.taggd-wrapper .taggd-item.active,.taggd-wrapper .taggd-item:hover{background-color:rgba(221,17,68,0.75);}
.taggd-wrapper .taggd-item-hover{background-color:rgba(221,17,68,0.75);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:white;font-weight:lighter;opacity:0;position:absolute;-moz-transition:opacity 0.2s;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;z-index:999;}
.taggd-wrapper .taggd-item-hover.show{opacity:1;}

附件:下载该文件资源,减少时间成本(增值服务)