附源码
//first preload all images $hs_images = $hs_container.find('img'); var total_images = $hs_images.length; var cnt = 0; $hs_images.each(function(){ var $this = $(this); $('<img>').load(function(){ ++cnt; if(cnt == total_images){ $hs_areas.each(function(){ var $area = $(this); //when the mouse enters the area we animate the current //image (random animation from array animations), //so that the next one gets visible. //"over" is a flag indicating if we can animate //an area or not (we don't want 2 animations //at the same time for each area) $area.data('over',true).bind('mouseenter',function(){ if($area.data('over')){ $area.data('over',false); //how many images in this area? var total = $area.children().length; //visible image var $current = $area.find('img:visible'); //index of visible image var idx_current = $current.index(); //the next image that's going to be displayed. //either the next one, or the first one if the current is the last var $next = (idx_current == total-1) ? $area.children(':first') : $current.next(); //show next one (not yet visible) $next.show(); //get a random animation var anim = animations[Math.floor(Math.random()*total_anim)]; switch(anim){ //current slides out from the right case 'right': $current.animate({ 'left':$current.width()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; //current slides out from the left case 'left': $current.animate({ 'left':-$current.width()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; //current slides out from the top case 'top': $current.animate({ 'top':-$current.height()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'top' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; //current slides out from the bottom case 'bottom': $current.animate({ 'top':$current.height()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'top' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; //current slides out from the right and fades out case 'rightFade': $current.animate({ 'left':$current.width()+'px', 'opacity':'0' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px', 'opacity' : '1' }); $next.css('z-index','9999'); $area.data('over',true); }); break; //current slides out from the left and fades out case 'leftFade': $current.animate({ 'left':-$current.width()+'px','opacity':'0' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px', 'opacity' : '1' }); $next.css('z-index','9999'); $area.data('over',true); }); break; //current slides out from the top and fades out case 'topFade': $current.animate({ 'top':-$current.height()+'px', 'opacity':'0' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'top' : '0px', 'opacity' : '1' }); $next.css('z-index','9999'); $area.data('over',true); }); break; //current slides out from the bottom and fades out case 'bottomFade': $current.animate({ 'top':$current.height()+'px', 'opacity':'0' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'top' : '0px', 'opacity' : '1' }); $next.css('z-index','9999'); $area.data('over',true); }); break; default: $current.animate({ 'left':-$current.width()+'px' }, animSpeed, easeType, function(){ $current.hide().css({ 'z-index' : '1', 'left' : '0px' }); $next.css('z-index','9999'); $area.data('over',true); }); break; } } }); }); //when clicking the hs_container all areas get slided //(just for fun...you would probably want to enter the site //or something similar) $hs_container.bind('click',function(){ $hs_areas.trigger('mouseenter'); }); } }).attr('src',$this.attr('src')); });
相关推荐
鼠标划上图片hover变换效果源码免费下载
jquery hover图标导航鼠标划过图标背景滑动切换效果
千锋Web前端教程_33_hover鼠标划入效果
这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时,将背景图片平滑放大。鼠标离开时,背景图片恢复为原来的大小。
CSS3图片HOVER炫酷动画效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果。这组图片hover效果共16种特效。同时该特效也支持非Bootstrap版本。
.st-container input:checked + a,.st-container input:checked:hover + a{ background-color: #821134; } .st-container input:checked + a:after{ content: ''; width: 0; height: 0; overflow: hidden; ...
实现效果: 带动画效果的图片hover遮罩JS效果代码,带动画旋转效果切换到另外的图片上去,还是很不错的 图片遮罩效果,也是常有的JS效果代码,一般会用于图片的说明文字显示。
演示效果请查看阿里云首页,大图轮播下面的<安全、稳定的云计算基础服务>,四个模块的左右切换效果.(弹性计算,数据库,存储与cdn及云盾) 或去本人的网站上面,(http://snail.blue) 的成功案例中查看客户的演示地址.
15种CSS3图片Hover悬停效果代码,3图片Hover,经过图片效果,图片效果,CSS3链接效果
15种CSS3图片Hover悬停效果代码,超级实用
jquery图片hover放大效果.rar
jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示
参考已有素材并修改的15种CSS3图片Hover悬停效果代码,非常漂亮,想美化页面的朋友可以看一下,
这是一款CSS3鼠标hover按钮过渡动画效果。该CSS3鼠标hover按钮过渡动画效果共有两组效果,一组是按钮背景过渡动画效果,一组是按钮边框过渡动画效果。
jquery hover图片插件制作鼠标滑过标题单个展开图片效果
一些基本的hover效果........................................................................................................
一段简洁代码即可实现的js图片hover效果 当鼠标移动到图片上后,动态显示另外一张(高版本浏览器下效果较好) 使用方法: 1、在网页head中引入两个css样式 2、将代码部分复制到你需要的地方 3、...