简单的,流行的,可交换的图片字幕,基于CSS and MooTools

By Rainbow on // jQuery // 1995 Views+ // (0) Comments

我在《如何自动给图片或照片加说明文字，使用 MooTools »》这篇文章中，介绍了如何给图片自动加说明文字的做法，然而，有的时候我们更喜欢比较时尚和可交换的图片说明文字。

虽然他们都说一张照片胜过千言万语，但是不是每一个形象都是不言自明的。有的时候，一句简短的说明文字或在背景上说几句话可以使图像得以区别。这就是为什么图片说明文字（图片字幕）往往是一个好的用户体验。

像图片的下方配有简单的文字说明的应用场景有点死板，虽然起到了图片说明的作用，但是有点用户觉的没有那个必要，因为他很自信，相信自己的理解能力，给图片配有相应的说明文字是多此一举。相反有些用户是希望有图片文字说明的。

既然，我们已经明白了用户的需求，接下来，就需要我们进一步去落实了。

我一直喜欢给予图片说明，但我很少这样做。为什么不呢？原因来自以下：

  1. 需要添加大量过剩的HTML标签。
  2. 老网站，难以重新设计。
  3. 图片和说明文字之间保持着某种固定的关系。
  4. 以上原因都有。

今天，我提出一个新的解决方案，解决了以前遗留下来的问题。

Swappable-Image-Captions

 

那就先看下一演示吧，

 

View Demo »

 

以前网页上遗留下的图片代码是类似这样写的

1

<img src="my_image.jpg" alt="替换文字" class="captioned" />

或者

1

<img src="my_image.jpg" alt="替换文字" class="captioned" title="图片说明" />

如果我们的图片标签既有一个 title 属性和 alt 属性, 我们将采取的title 属性的值，不用 alt 属性.

如果我们的<img>标签没有设置title或alt属性，我们要提醒用户，我们需要其中的一个属性。

自动给图片加说明文字

The MooTools JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$$('img.captioned').each(function(el) {						
    var captionText = ( el.getProperty('title')!=null ) ? el.getProperty('title') : el.getProperty('alt');
    if ( captionText!=null ) {
      var figure = new Element('div', {
        'class' : 'figure',
          'styles' : {
            'width' : el.get('width').toInt()
          }
      });
      var caption = new Element('p', {
        'class' : 'caption',
        'html' : captionText
      });
      figure.wraps(el);
      caption.inject(el,'after');
    } else {
      alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.');
    }
 });

所有的图片会包含在类似这样的结构中：

1
2
3
4

<div class="figure">
    <img src="my_image.jpg" alt="" class="captioned" />
	<p class="caption">This is going to be my caption!</p>
</div>

以上实现的功能已经在：

如何自动给图片或照片加说明文字，使用 MooTools »文章中具体的介绍过，我这儿就不做具体的讲解了。

可交换的图片说明文字（图片字幕）

当鼠标移动到图片上时，显示相应的图片说明文字，离开图片时就隐藏说明文字，默认的情况下，图片是隐藏相应的说明文字的。

The MooTools JavaScript

1
2
3
4
5
6
7
8

$$('.figure').addEvents({
	mouseenter: function() {
   	  this.getElement('.caption').setStyle('display','block').fade('in');
	},
    mouseleave: function() {
	  this.getElement('.caption').setStyle('display','none').fade('out'); 
	}
});

完整的代码，来实现图片自动加说明文字和可交换的图片说明文字效果

The MooTools JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

window.addEvent('domready', function() {
  $$('img.captioned').each(function(el) {						
    var captionText = ( el.getProperty('title')!=null ) ? el.getProperty('title') : el.getProperty('alt');
    if ( captionText!=null ) {
      var figure = new Element('div', {
        'class' : 'figure',
          'styles' : {
            'width' : el.get('width').toInt()
          }
      });
      var caption = new Element('p', {
        'class' : 'caption',
        'html' : captionText
      });
      figure.wraps(el);
      caption.inject(el,'after');
    } else {
      alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.');
    }
  });
  $$('.figure').addEvents({
 
		 mouseenter: function() {
		  this.getElement('.caption').setStyle('display','block').fade('in');
		 },
		 mouseleave: function() {
		  this.getElement('.caption').setStyle('display','none').fade('out'); 
		}
   });
});

The CSS Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.figure {
  position: relative; 
}
.figure p.caption {
  display: none;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 94%;
  margin: 0;
  padding: 5px 3%;
  background-color: #000;
  color: #fff;
  font-weight: bold; 
}

 

View Demo »

 

jQuery 版的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
	$("img.hascaption").each(function() {
		$(this).wrap('<div class="figure"></div>')
		.after('<p class="caption">'+$(this).attr("title")+'</p>')
		.removeAttr('title');
	});
	$(".figure").width($(this).find('img').width());
 
	$(".figure").mouseenter(function(){
		$(this).find('.caption').slideToggle();
	}).mouseleave(function(){
		$(this).find('.caption').slideToggle();
	});
});

jQuery版的效果，我认为有两点不完善的地方，图片说明文字的来源应该是 img 标签的title属性或者是alt属性，再上一些逻辑判断就是一个很好的例子，应用时最好像MooTools版那样的逻辑就好了，就会少很多的BUG。

jQuery版的作者：Rob Glazebrook

jQuery 版的原文来自：How To Create Simple, Stylish and Swappable Image Captions

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计