`

jQuery图片冒泡插件鼠标悬停图片冒泡动画展示-20130624

mouseoverremoveappendTostopanimate 
阅读更多
1、效果及功能说明
图片冒泡插件鼠标悬停图片冒泡动画展示

2、实现原理
首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行

3、效果图




4、运行环境

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


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

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

7、代码[html5] 

<!DOCTYPE html">
<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" src="js/jquery.bubbleup.js"></script>
<script type="text/javascript">
$(function(){
    $("ul#menu li img").bubbleup({tooltip: true, scale:96});
    /*让html5里面的 ul和li来获得jquery里面的效果*/
});
</script>
</head>
<body>
	
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{margin:50px auto 0 auto;width:400px;}

ul#menu li{float:left;position:relative;width:48px;height:48px;padding:0 5px;}
ul#menu li img{position:absolute;width:48px;top:0px;left:0px;overflow:hidden;}
</style>


<div class="demo">
	<ul id="menu">
		<li><a href="http://www.17sucai.com/"><img src="images/feed.png" alt="Full RSS Feed"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/email.png" alt="E-Mail Delivery"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/twitter.png" alt="Follow us on Twitter"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/facebook.png" alt="I'm on FaceBook"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/delicious.png" alt="Save it!"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/technorati.png" alt="Favorite this blog"/></a></li>
	</ul>
</div>

<div style="clear: both;"></div>


</body>
</html>


8、在装有html5和图片的文件夹里在新建一个文件夹将名字改成js后将代码拷贝到js文件夹里会的可以直接拷贝
不会的下面有js文件夹可以直接把压缩包解压到装有html5和图片的文件夹内就可以实现效果 
(function($){
	$.fn.bubbleup = function(options) {
		var opt = $.extend({}, $.fn.bubbleup.defaults, options),tip = null;
		/*调用jquery里面的扩张方法*/
		return this.each(function() {
			/*是返回的这个方法跳出循环*/
			var w=$(this).width();
			/*将这个长度给进来 可以方便的控制div的长度*/
			$(this).mouseover(function(){
			/*当鼠标指针位于元素上方时时*/
				if(opt.tooltip) {
				/*显示出当鼠标触碰到的div*/
					tip = $('<div>' + $(this).attr('alt') + '</div>').css({
					/*当鼠标触碰到图片上面是发生变化*/
						fontWeight: opt.fontWeight, 
						/*当鼠标触碰到图片上文字显示出来后加成粗体*/
						position: 'absolute', 
						/*定位方式为绝对定位*/
						zIndex: 100000
						/*定义层级的关系*/
					}).remove().css({top:0,left: 0,visibility:'hidden',display:'block'}).appendTo(document.body);
					/*设定文字的样式长和高为0在鼠标触及以后反生变化显示出来在显示的过程中用用添加方法来实现在整个页面的身体里*/
					var position = $.extend({},$(this).offset(),{width:this.offsetWidth,height:this.offsetHeight}),tipWidth = tip[0].offsetWidth, tipHeight = tip[0].offsetHeight;
					/*将文字定位方法用扩张方法来实现文字的高和长*/
					tip.stop().css({
					/*图片的动画停止后的样式*/
						top: position.top - tipHeight,
						/*当图片在实现动画效果变大是距上的距离始终保持在当前距上高度不会把后来显示出来的文字给挤上去*/ 
						left: position.left + position.width / 2 - tipWidth / 2,
						/*当图片在实现动画效果变大是保证文字不会因为图片的变大而对距左的距离产生偏差 就是在图片不断变化的情况下 保持图片的原来的距左距离*/
						visibility: 'visible'
						/*选定所有的图片图片实现上面的效果*/
					}).animate({top:'-='+(opt.scale/2-w/2)},opt.inSpeed);
					/*改变div元素的div的高度来适应图片*/ 
				}
				
				$(this).closest('li').css({'z-index':100000});
				/*设置每个li的层级都是100000*/
				
				$(this).stop().css({'z-index':100000,'top':0,'left':0,'width':w}).animate({
					left:-opt.scale/2+w/2,
					top:-opt.scale/2+w/2,
					width:opt.scale
				},opt.inSpeed);
			/*控制动画定了以后的文字的变化用改变问题的距高和距左来保证文字的正确的位置后改变文字的长度*/
			}).mouseout(function(){
			/*改变背景*/	
				$(this).closest('li').css({'z-index':100});
				/*将li里面的层级定位100*/
				if(opt.tooltip){tip.remove()}
				/*控制上面的方法实现*/
				$(this).stop().animate({left:0,top:0,width:w},opt.outSpeed,function(){
					/*将结束动画后的文字从新设定距高和距左*/
					$(this).css({'z-index':0});
					/*和它的层级关系*/
				});
			})
		})
	}
	$.fn.bubbleup.defaults = {
		tooltip: false,
		scale:96,
		fontFamily:'Helvetica, Arial, sans-serif',
		color:'#333333',
		fontSize:12,
		fontWeight:'bold',
		inSpeed:'fast',
		outSpeed:'fast'
		/*设定整个文字的出现后的文字字体，颜色，字号，加粗*/
	}
})(jQuery);
  • 大小: 10.2 KB
  • 大小: 119.6 KB
  • js.rar (26.9 KB)
  • 下载次数: 11
分享到：
| jQuery操作文档-20130624
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery图片冒泡插件鼠标悬停图片冒泡动画展示

    本教程将详细讲解如何利用jQuery实现一个图片冒泡插件，以便在鼠标悬停时展示图片冒泡动画效果。 首先，我们需要理解jQuery的基本用法。jQuery通过选择器选取DOM元素，然后对这些元素执行各种操作。例如，`$('img')...

    jquery图片冒泡提示效果

    总结来说，jQuery图片冒泡提示效果是通过jQuery库实现的一种增强用户体验的交互设计，通过监听鼠标事件、动态创建和定位提示框、应用动画效果，为用户提供直观的信息展示，提升了网页的视觉吸引力和可用性。...

    jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片

    当鼠标悬停在图片上时，可以改变图片的透明度、大小或旋转角度，从而创造出“冒泡”效果。例如： ```javascript $(".image").hover(function() { $(this).stop().animate({ opacity: 0.8, scale: 1.2 }, 200); }, ...

    jquery图片冒泡提示效果.rar

    这个描述简单明了，暗示了压缩包内的内容是一个使用jQuery编写的代码示例，它能创建一个图片上的提示框（也称为气泡提示或tooltip）效果，当用户将鼠标光标悬停在图片上时，提示框会像气泡一样从图片下方或旁边弹出...

    jquery_tips，JQ实现的冒泡提示

    二、JQuery冒泡提示的原理 冒泡提示，通常是指当鼠标悬停在某个元素上时，该元素周围会弹出一个包含提示信息的小窗口，就像水中的气泡一样。在jQuery中，我们主要通过CSS来定义提示框的样式，而JavaScript则负责...

    jQuery鼠标经过动画出现冒泡对话框特效

    在这个特效中，当用户将鼠标悬停在某个元素上时，一个具有动画效果的冒泡对话框会自动弹出，展示相关信息，增强了用户体验。 首先，我们需要了解jQuery。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、...

    关于Jquery的鼠标悬停事件

    在实际应用中，鼠标悬停事件常用于实现诸如显示隐藏内容、改变元素样式、播放/暂停动画等效果。例如，当鼠标悬停在一个按钮上时，可以动态改变按钮的背景色或显示隐藏的提示信息： ```javascript $("#myButton")....

    jquery hover冒泡事件制作心型图片墙鼠标悬浮变大.zip

    在本项目中，“jquery hover冒泡事件制作心型图片墙鼠标悬浮变大.zip”涉及到的关键技术是jQuery的`hover`事件处理。 `hover`是一个组合事件，由两个基本事件组成：`mouseenter`和`mouseleave`。当鼠标指针进入元素...

    jQuery鼠标经过冒泡对话框特效.zip

    本项目“jQuery鼠标经过冒泡对话框特效”是利用jQuery结合特定插件来创建的一种互动效果，当鼠标悬停在某个元素上时，会弹出一个对话框，就像水泡一样浮现在页面上，为用户提供额外的信息或功能。 这个特效主要基于...

    html5结合jquery hover实现的图片悬停放大特效.rar

    html5结合jquery hover实现的图片悬停放大特效，根据冒泡事件实现的悬停放大，在排列成“心”形的照片墙上，鼠标悬停于任意一张头像图片后，该图片即可放大显示，此类效果在HTML5的页面中，利用相关属性来实现，是挺...

    jQuery实现鼠标滑过时冒泡提示

    总结来说，jQuery qTip插件是实现鼠标滑过时冒泡提示的强大工具，它能够提供丰富的提示框样式和交互方式，适用于各种网页应用场景。通过灵活地配置和使用qTip，开发者可以为用户提供更加友好、高效的交互体验。

    jQuery实现的鼠标经过悬停相册封面显示动态遮罩信息效果源码.zip

    这个效果通常用于网站的图库或作品展示部分，当用户将鼠标移到图片上时，会动态显示出一个遮罩层，里面包含有关图片的详细信息，如描述、作者、日期等。这种交互设计能够提升用户体验，使用户在不离开当前页面的情况...

    jQuery实现鼠标悬停滑动展开菜单特效源码.zip

    本资源"jQuery实现鼠标悬停滑动展开菜单特效源码.zip"提供了一种使用jQuery创建动态菜单的方法，特别适用于网站导航栏设计。下面将详细介绍这个特效的实现原理和相关知识点。 首先，jQuery的核心在于其简洁的语法和...

    jquery制作侧栏与工具提示信息鼠标滑过图片或文

    本教程将深入探讨如何使用jQuery来创建一个功能，即当鼠标悬停在图片或文字上时，会在侧栏显示一个工具提示信息，实现冒泡式的提示效果。 首先，我们需要在HTML文件中设置基础结构。这通常包括一个主容器，用于放置...

    jquery API -jQueryAPI-100214.chm

    例如，使用 $(selector).click(function() {...}) 可以绑定点击事件，$(selector).on('mouseover', function() {...}) 绑定鼠标悬停事件。同时，$.event.preventDefault() 可阻止默认行为，$.stopPropagation() 可...

    jquery实现的冒泡放大器

    在这里，我们借用这一概念，让元素在鼠标悬停时像气泡一样从小变大，从而产生视觉上的“冒泡”效果。 jQuery库提供了丰富的DOM操作和动画功能，使得实现这样的效果变得简单易行。以下是实现冒泡放大器的基本步骤： ...

    精美的jQuery图片墙示例代码

    本教程将详细讲解基于jQuery实现的"精美的jQuery图片墙示例代码"，该示例代码能为网页增添动态、交互性的图片展示效果。 首先，我们需要了解jQuery的基本用法。jQuery通过"$"符号作为其主要的入口点，用于选择DOM...

Magicbox
Global site tag (gtag.js) - Google Analytics