jQuery图片冒泡插件鼠标悬停图片冒泡动画展示-20130624
程序员文章站
2022-03-07 08:05:16
...
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]
8、在装有html5和图片的文件夹里在新建一个文件夹将名字改成js后将代码拷贝到js文件夹里会的可以直接拷贝
不会的下面有js文件夹可以直接把压缩包解压到装有html5和图片的文件夹内就可以实现效果
图片冒泡插件鼠标悬停图片冒泡动画展示
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);
