`

jQuery图片鼠标悬停效果-20130620

阅读更多
1、效果及功能说明
鼠标悬停图片放大滑动显示标题

2、实现原理
首先是鼠标触及图片后对图片的进行放大多少的设置 在将要花多少时间来方法设定好 后定义图片不会因为放大而改变位置始终保持居中状态的放大和div不会因为图片的放大和标题的出现而变形 后是标题的设置一个显示的动画结合上图片放大的时间还有就是在鼠标移开后设置图片回复原状的时间和标题消失的动画时间的吻合

3、效果图




4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现


5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果


7、代码[html5]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript">
$(window).load(function(){
	//设置和获取图片改变的变量
	var thumbnail = {
		imgIncrease : 100, /* 当鼠标放在图片的上面放大原来图片的100px*/
		effectDuration : 500, /* 当鼠标放到图片上开始方法后直到方法100所使用的时间500毫秒 */
		/* 
		获取的图像的宽度和高度。
		2件事:
		*/
		imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
                /*这就是放大图片的事件要是且少的话图片不会放大而是向左上方移动*/
		imgHeight : $('.thumbnailWrapper ul li').find('img').height()
                 /*是一个固定div的事件就是当鼠标触及图片以后出现标题当鼠标以后以后标题其实是隐藏到下面这个时候没有这个事件的话div就会跟着扩大*/
	};

	//列表项相同的大小作为图像
	$('.thumbnailWrapper ul li').css({ 
		'width' : thumbnail.imgWidth, 
                /*这个是控制li的样式不会在鼠标触及的时候div的右边框不会因为图片的放大而跟着放大从而挤掉右边原有的div其实就是控制鼠标触及时div的长度不会因为图片而变化*/
		'height' : thumbnail.imgHeight 
                /*这个是控制li的样式不会在鼠标触及的时候div的下边框不会因为图片的放大而跟着放大从而挤掉西边原有的div其实就是控制鼠标触及时div的高度不会因为图片而变化*/
	});

	//当鼠标移到列表项...
	$('.thumbnailWrapper ul li').hover(function(){
         /*其实这个是创建了一个伪类来触发事件的效果*/
		$(this).find('img').stop().animate({
		/* 这个是一个变焦效果,提高图像的宽度 这个是一个获得所有的img的元素当鼠标触及后开始实现效果*/
			width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
                        /*是控制在鼠标触及div图片的时候div的width增加100*/
			left: thumbnail.imgIncrease/2*(-1),
                        /*是控制在鼠标触及div图片的时候图片距左原本是0鼠标触及后是-50*/
			top: thumbnail.imgIncrease/2*(-1)
                        /*是控制在鼠标触及div图片的时候图片距高原本是0鼠标触及后是-50*/   
			/* 这个整体的解释是需要改变的左侧和顶部的位置,才能有放大效应,因此我们将它们移动到一个负占据一半的img增加 */
		},{ 
		});
		$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
/*使用slideDown事件显示的标题让鼠标触及到图片的时候从下面把标题移动上来*/
		
	}, function(){
        /*当鼠标离开*/
		$(this).find('img').animate({
                /*就会触发鼠标上本次触及到图片的图像和动画*/
			width: thumbnail.imgWidth,
                        /* 回原来的尺寸(缩小)原来的px */
			left: 0,
			top: 0
                        /* 左侧和顶部位置恢复正常 距左和距上回复正常*/

		}, thumbnail.effectDuration);
                /* 这就是所有效果、动画、图片、标题的源头从这里开始一步一步的实现*/

		$(this).find('.caption').slideUp(thumbnail.effectDuration);
                /*隐藏开始出现的标题使用使用滑块事件,把标题隐藏到下面去*/

	});

});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#FFCC00;}
.clear{clear:both;}
body{background-color:#292929;color:#ffffff;text-align:center;font-family:'georgia';font-size: 13px;}
/* thumbnailWrapper */
.thumbnailWrapper{width:600px;margin:40px auto 0 auto;}
.thumbnailWrapper ul li{float:left;position:relative;overflow:hidden;}
.thumbnailWrapper ul li a img{width:200px;position:relative;border:none;}
.caption{position:absolute;bottom:0px;left:0px;width:100%;display:none;background:#0c4b62;color:#ffffff;opacity:0.9;}
.caption .captionInside{padding:10px;margin:0px;}
</style>
</head>
<body>

	<div class='thumbnailWrapper'>
		<ul>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/1.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>CofeeNerd</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/2.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>musiKings</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/3.png' /></a>
				<div class='caption'>
					<p class='captionInside'>The Caribbean Energy Conference 2010</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/4.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Coffee</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/5.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Quantum</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/6.png' /></a>
				<div class='caption'>
					<p class='captionInside'>Infinite Love</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/7.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Fathom</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/9.PNG' /></a>
				<div class='caption'>
					<p class='captionInside'>Mixed Pome</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/10.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Golf Lessons Online</p>
				</div>
			</li>
		</ul>
		
		<div class='clear'></div><!-- clear the float -->
		
	</div>

</body>
</html>
  • 大小: 56.4 KB
  • 大小: 119.6 KB
分享到:
评论

相关推荐

    8种jQuery图片鼠标悬停效果.

    "8种jQuery图片鼠标悬停效果"是一个专注于增强图片交互体验的资源包,它利用jQuery库的强大功能,为图片添加了丰富的动态效果,使得用户在鼠标悬停时能获得更生动的视觉反馈。以下是对这些效果的详细解释和相关技术...

    8种jQuery图片鼠标悬停效果,支持多种悬停效果(遮罩,图片飞出等),兼容主流浏览器.rar

    在本文中,我们将深入探讨如何使用jQuery实现图片的鼠标悬停效果,特别是针对标题和描述中提到的"遮罩"和"图片飞出"等效果。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互,为...

    jquery鼠标悬停图片标题滑动

    "jquery鼠标悬停图片标题滑动"是一个常见的jQuery应用场景,主要用于提升用户体验,当用户将鼠标悬停在图片上时,图片的标题会以平滑的方式展示出来。这种效果可以增加网站的视觉吸引力,同时也能有效地呈现图片信息...

    jQuery鼠标悬停图片震动特效.zip

    "jQuery鼠标悬停图片震动特效"就是这样一种巧妙的技术应用,它结合了CSS3的圆角样式和jQuery库,实现了当鼠标悬停在图片上时,图片产生震动的视觉效果。这一特效不仅增加了交互性,还为网页增添了一丝趣味性。 首先...

    jquery实现鼠标悬停在图片上的放大效果

    "jQuery鼠标悬停焦点图放大效果"是一种常见的增强用户视觉体验的技术,它使得用户在将鼠标光标移动到图片上时,图片会自动放大,突出显示细节,移开鼠标后则恢复原状。这种效果广泛应用于产品展示、图像画廊等场景,...

    8种jQuery图片鼠标悬停效果.zip

    8种jQuery图片鼠标悬停效果,支持多种悬停效果(遮罩,图片飞出等),兼容主流浏览器。 使用方法: 1、head区域引用文件 jquery.min.js,lrtk.css, mosaic.css 2、在文件中加入&lt;!-- 代码 开始 --&gt;&lt;!-- ...

    jquery鼠标悬停放大图片

    "jQuery鼠标悬停放大图片"是一个常见的功能,它可以使用户在鼠标指针悬停在图片上时看到放大的图像细节,从而增强视觉效果和用户对图片内容的理解。这个例子中,我们将深入探讨如何使用jQuery库实现这一功能,并涉及...

    jquery鼠标悬停图片移动效果

    "jQuery鼠标悬停图片移动效果"是一个常见的交互式设计技术,它利用JavaScript库jQuery实现了一个独特的功能:当用户将鼠标指针悬停在图片上时,图片会在边界内自动左右滚动,同时在底部显示半透明的文字说明。...

    jQuery的鼠标悬停图片边框动画特效.zip

    js代码 [removed] $(function(){ // 边框效果--移入 function biankuang(){ ... $('.biankuang_1').stop(true).... jQuery鼠标悬停图片边框动画特效是一款鼠标移动商品图片的时候动画显示红色边框的动画代码。

    jQuery鼠标悬停图片位置切换效果

    任意鼠标悬停在四周的一个图片上,当前图片立即与中间的图片交换位置 注意:图片交换过程中,即动画执行过程中,鼠标再次悬停在别的图片位置上的时候,动画不会被执行 使用方法: 1、将css样式引入到你...

    jQuery图片鼠标悬停到图片上放大显示和展开图片标题

    本文将详细介绍如何使用jQuery来实现图片鼠标悬停时的放大效果以及如何展开图片的标题。 首先,我们需要在HTML中设置好图片元素,通常我们会为每张图片添加一个`&lt;img&gt;`标签,并为每个图片提供一个唯一的ID,以便于...

    jQuery鼠标悬停在图片上效果,鼠标悬停后出现遮罩效果,并淡入出现文字,兼容主流浏览器

    在本文中,我们将深入探讨如何使用jQuery实现一个鼠标悬停图片时出现遮罩效果,并淡入显示文字的功能,同时确保该功能在主流浏览器中具有良好的兼容性。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件...

    jquery鼠标悬停 图片预览功能的效果下载

    在本文中,我们将深入探讨如何使用jQuery库来实现一个鼠标悬停时的图片预览功能。这个功能在网站设计中非常常见,它为用户提供了一种便捷的方式来预览图像,而无需点击进入新页面或者加载全尺寸图片。我们将讨论实现...

    jquery鼠标悬停动画效果

    本教程将深入讲解如何使用jQuery来创建一个鼠标悬停时的动画效果,具体表现为当鼠标移到图片上方时,小图片会缓缓向上移动并最终静止。 首先,我们需要在HTML文件中引入jQuery库。这可以通过在头部添加CDN链接或者...

    jquery鼠标悬停图片水平垂直翻转图片效果代码

    "jQuery鼠标悬停图片水平垂直翻转图片效果代码"是一种常见的交互式设计,它允许用户在将鼠标指针悬停在图片上时,图片会进行水平或垂直翻转,增加视觉吸引力。这种效果在产品展示、按钮激活或者其他需要突出互动元素...

    jQuery图片鼠标悬停大图展示效果

    本文将详细讲解如何利用jQuery实现图片鼠标悬停时展示大图的效果,这种效果常用于图片预览或者产品展示,能提供更好的用户体验。 首先,我们需要在HTML页面中设置基本的结构。通常,我们会有两个图片元素:一个较小...

    jquery鼠标悬停图片放大

    "jQuery鼠标悬停图片放大"是一个常见的功能,它可以使用户在浏览网页时,当鼠标指针悬停在图片上时,图片会自动放大,而当鼠标移开时,图片又会恢复原大小。这种效果能够使用户更清晰地查看细节,尤其在产品展示或者...

    jquery 图片特效 鼠标悬停图片显示文字与标题内容特效

    本教程将详细讲解如何利用jQuery实现一个图片特效,即当鼠标悬停在图片上时,图片下方会显示相关的文字与标题内容。 首先,要使用jQuery,你需要在HTML文件中引入jQuery库。这通常通过在`&lt;head&gt;`标签内添加以下代码...

Global site tag (gtag.js) - Google Analytics