YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » YHover – 小图片划过显示大图片特效

YHover – 小图片划过显示大图片特效

程序简介:

YHover – 小图片划过显示大图片特效是我写的一个简单的图片展示的特效,功能很简单,就是在鼠标划过的时候可以展示大图的预览效果。后台上传的图片管理列表页面处理图片预览比较合适。

// 程序调用代码
YHover.photos('photo-list','img');

下载地址:yhover.zip

程序特点:

  1. 根据小图片的位置和大图的大小,自动调整overlayer位置,让大图片可以完全显示
  2. 浏览器兼容性好

程序 JavaScript 源代码:

/**
 * JavaScript代码
 * @author Yaohaixiao
 */
var YHover = function(){
	var D = document, 
	    ua = navigator.userAgent.toLowerCase(), 
		isOpera = (ua.indexOf('opera') > -1), 
		isIE = (!isOpera && ua.indexOf('msie') > -1);
	
	return {
		photos: function(container, samples){
			var Container = D.getElementById(container), 
			    Samples = Container.getElementsByTagName(samples), 
				i = 0, 
				len = Samples.length, 
				Overlayer = null, 
				oSelf = this;
			
			for (; i < len; i+=1) {
				// 鼠标划过小图片,显示大图片
				Samples[i].onmouseover = function(index){
					var imgPath = this.parentNode.href, 
						imgAlt = this.alt, 
						hoverWidth = this.offsetWidth,
						hoverHeight = this.offsetHeight,
						bigImg = new Image(), 
						pageX = oSelf.getPageX(this), 
						pageY = oSelf.getPageY(this), 
						viewportWidth = oSelf.getViewportWidth(), 
						viewportHeight = oSelf.getViewportHeight(), 
						layerWidth = 0, 
						layerHeight = 0, 
						xScroll = oSelf.getXScroll(), 
						yScroll = oSelf.getYScroll();
					
					// 如果没有创建 overlayer 预览层,则创建这个层
					if (!Overlayer) {
						Overlayer = D.createElement('div');
						Overlayer.id = 'overlayer';
						D.body.appendChild(Overlayer);
					}
					
					// 设置大图片的路径和说明文字
					bigImg.src = imgPath;
					bigImg.alt = imgAlt;
					
					// 图片是一个占位元素,图片大小只有在图片加载完成后才可以获得
					bigImg.onload = function(){
						// 获得 overlayer 层的尺寸
						layerWidth = this.width + 20;
						layerHeight = this.height + 20;
						
						// 如果小图片的右边框过10像素的位置 + 将要生成的 overlayer 层的宽度大于可视区域的大小
						// 大图片就在小图片的左边显示(使得可以看到完整的图片)
						if ((pageX + hoverWidth + 10 + layerWidth) > (viewportWidth + xScroll)) {
							pageX -= 10 + layerWidth;
						}
						else {
							// 默认大图片在右边显示
							pageX += hoverWidth + 10;
						}
						
						// 如果从小图片底部的位置算起 + 大图片展示层 overlayer 的高度大于可视区域的高度
						// 则大图片显示在小图片顶部的位置(使得可以看到完整的图片)
						if ((pageY + layerHeight) > (viewportHeight + yScroll)) {
							pageY -= 10 + layerHeight;
						}
						
						// 清空内容
					    Overlayer.innerHTML = '';
						// 将图片添加到 overlayer
						Overlayer.appendChild(bigImg);
						
						// 定位图片
						Overlayer.style.left = pageX + 'px';
						Overlayer.style.top = pageY + 'px';
						
						// 显示图片展示层(默认overlayer是隐藏的,为了提高DOM操作的性能)						
						Overlayer.style.display = 'block';
					};
				};
				
				// 鼠标离开小图片,隐藏大图片层,并且清除里面的图片
				Samples[i].onmouseout = function(){
					Overlayer.style.display = 'none';
				};
			}
		},
		getXScroll: function(){
			var j = self.pageXOffset || D.documentElement.scrollLeft || D.body.scrollLeft;
			return j;
		},
		getYScroll: function(){
			var j = self.pageYOffset || D.documentElement.scrollTop || D.body.scrollTop;
			return j;
		},
		getViewportWidth: function(){
			var j = self.innerWidth;
			var k = D.compatMode;
			if (k || isIE) {
				j = (k == "CSS1Compat") ? D.documentElement.clientWidth : D.body.clientWidth;
			}
			return j;
		},
		getViewportHeight: function(){
			var j = self.innerHeight,
			    k = D.compatMode;
			
			if ((k || isIE) && !isOpera) {
				j = (k == "CSS1Compat") ? D.documentElement.clientHeight : D.body.clientHeight;
			}
			return j;
		},
		getPageX: function(el){
			var box = null, 
			    parentNode = null, 
				left = 0;
				
			if (el.getBoundingClientRect) {
				box = el.getBoundingClientRect();
				left = box.left + Math.max(D.documentElement.scrollLeft, D.body.scrollLeft);
			}
			else {
				left = el.offsetLeft;
				parentNode = el.offsetParent;
				if (parentNode != el) {
					while (parentNode) {
						left += parentNode.offsetLeft;
						parentNode = parentNode.offsetParent;
					}
				}
			}
			return left;
		},
		getPageY: function(el){
			var box = null, 
			    parentNode = null, 
				top = 0;
				
			if (el.getBoundingClientRect) {
				box = el.getBoundingClientRect();
				top = box.top + Math.max(D.documentElement.scrollTop, D.body.scrollTop);
			}
			else {
				top = el.offsetTop;
				parentNode = el.offsetParent;
				if (parentNode != el) {
					while (parentNode) {
						top += parentNode.offsetTop;
						parentNode = parentNode.offsetParent;
					}
				}
			}
			return top;
		}
	};
}();
/* jQuery 版本的代码 */

(function($){
	$.fn.extend({
		yhover: function(){
			var root = $(this), photos = root.find('img'), hoverLayer = $('#overlayer'), hoverShardow = $('#hovershardow'), hoverImg = $('#hoverimg'), DEFAULT_SIZE = {
				'width': '100px',
				'height': '100px'
			};
			
			// 没有图片
			if (photos.length < 1) {
				return false;
			}
			
			photos.each(function(i, photo){
				var viewportWidth = 0, viewportHeight = 0;
				
				$(photo).mouseover(function(evt){
					var tmpImg = new Image(), curPhoto = $(this), imgPath = $(curPhoto).parent().attr('href'), pageX = curPhoto.offset().left, pageY = curPhoto.offset().top, viewportWidth = $(window).width(), viewportHeight = $(window).height(), layerTop = pageY + 'px', layerLeft = (pageX + curPhoto[0].offsetWidth) + 'px', resize = function(img){
						var size = {
							'width': img.width + 'px',
							'height': img.height + 'px'
						};
						
						fixPos(img.width + 20, img.height + 20);
						hoverImg.animate(size);
						hoverLayer.animate(size);
						
						hoverShardow.addClass('hide');
					}, fixPos = function(layerWidth, layerHeight){
						var scrollY = $(window).scrollTop(), scrollX = $(window).scrollLeft();
						
						if (layerWidth + parseInt(layerLeft, 10) > viewportWidth + scrollX) {
							layerLeft = (pageX - layerWidth) + 'px';
						}
						
						if (layerHeight + pageY > viewportHeight + scrollY) {
							layerTop = (pageY - (layerHeight - curPhoto[0].offsetHeight)) + 'px'
						}
						
						hoverLayer.css({
							'top': layerTop,
							'left': layerLeft
						});
					};
					
					// 第一次预览大图
					if (!hoverLayer[0]) {
						// 创建  loading 层 
						hoverShardow = $('<div></div>').attr('id', 'hovershardow').html('<img src="img/loading.gif" alt="loading..." width="100" height="100" />').addClass('hide');
						// 显示大图片
						hoverImg = $('<img />').attr('id', 'hoverimg');
						// 创建大图片层,并将大图片填充其中,同时显示加载的时 loading 层
						hoverLayer = $('<div></div>').attr('id', 'overlayer').addClass('hide').append(hoverImg).append(hoverShardow);
						// 将大图显示层添加到文档中
						$(document.body).append(hoverLayer);
					}
					
					// 显示 loading 提示
					hoverShardow.removeClass('hide');
					hoverImg.attr('src', imgPath);
					
					hoverLayer.css({
						'top': layerTop,
						'left': layerLeft
					}).removeClass('hide');
					
					// 大图加载完毕,测隐藏 loading 提示
					// 并且显示图片尺寸变化的过度动画
					tmpImg.src = imgPath;
					if (tmpImg.complete) {
						resize(tmpImg);
					}
					else {
						$(tmpImg).load(function(evt){
							resize(tmpImg);
						});
					}
				});
				
				$(photo).mouseout(function(evt){
					hoverLayer.addClass('hide').css(DEFAULT_SIZE);
					hoverImg.css(DEFAULT_SIZE);
				});
			});
		}
	});
})(jQuery);

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:YHover – 小图片划过显示大图片特效

« »

3 条评论

  • demo 在chrome上不好用啊

    • 是鹏鹏吗?

    • 不是chrome上不好用,是我的空间有点点问题,你ctrl+F5刷几下,我在BlueIdea发的时候也有朋友反映这个问题,都是由于我香港空间反映慢的问题。

hp进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)