附源码
//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'));
});
相关推荐
在网页设计中，为了增强用户体验，常常会使用各种交互效果，其中之一就是图片的鼠标划过放大效果。这个效果通常在电商网站的产品展示、画廊应用等场景中常见，能让用户在不离开当前页面的情况下预览图片的细节。本文...
在CSS3中，鼠标划过样式（Hover效果）是一种常用的技术，用于改变用户将鼠标光标悬停在元素上时的视觉表现。这种效果能够增强用户界面的交互性和吸引力，常用于按钮、链接、菜单等元素。在"css3-hoverButton"这个...
在网页设计中，为了提升用户体验，常常会使用一种叫做“鼠标划过小图片显示大图片”的特效。这种特效使得用户在鼠标悬停在小图片上时，能够预览到相应的大图片，无需点击就能了解图片的详细内容。下面将详细解释如何...
5. **过渡效果**：CSS的`transition`属性可以添加平滑的过渡动画，使得滑动门在开启和关闭时更加自然。这可以通过设置`transition-duration`（持续时间）、`transition-timing-function`（速度曲线）和`transition-...
为了实现更平滑的过渡效果，我们可以添加`transition`属性： ```css #flip-image { transition: transform 0.5s; /* 添加0.5秒的过渡时间 */ } ``` 以上就是一个基本的jQuery图片3D翻转效果的实现过程。通过调整...
本项目以"新建tab页-网页左右滑动效果-划过图片其他图片变暗"为主题，旨在模仿360极速浏览器的新建页面标签功能，通过实现一种动态、美观的切换效果来吸引用户。这个效果的核心在于利用HTML、CSS和JavaScript技术来...
`transition`属性则控制了元素在不同状态间转换时的动画效果，如改变颜色、大小或位置时的平滑过渡。 结合这两种技术，开发者可以实现丰富的交互式标题效果。例如： 1. **3D翻转**: 当鼠标悬停在图片上时，标题...
在网页设计中，为了增强用户体验和视觉效果，经常会利用JavaScript（简称JS）来实现各种交互功能，例如“鼠标划过文字接连出现图片”。这个技术在网址大全类网站中尤其常见，因为它可以有效地展示链接信息，使得用户...
/* 添加过渡效果，0.5秒内平滑变化 */ } img:hover { background-color: #目标颜色; /* 鼠标悬停时的颜色 */ } ``` 在上述代码中，`transition`属性是关键，它定义了何时以及如何进行状态转换。`0.5s`表示过渡...
"简单好看的菜单导航划过特效"是一种提升用户交互体验的设计手法，通过动态效果增强用户的视觉感受，使用户在鼠标划过菜单项时感受到更加生动、直观的反馈。这种特效能够使网站显得更加现代化和专业，同时也能提高...
为了使动画效果更加平滑，开发者可能还使用了CSS3的transition属性，这样在宽度变化时会有过渡效果。同时，可能还有对不同浏览器的兼容性处理，因为不是所有浏览器都支持所有CSS3特性。 此外，压缩包中的文件可能...
/* 添加过渡效果，平滑地改变图片的透明度 */ } .content { position: absolute; /* 新内容绝对定位在图片上方 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* ...
3. **过渡效果**：`transition`属性使得状态之间的变化可以平滑进行，而不是瞬间完成。结合`:hover`伪类，我们可以定义图片在鼠标进入和离开时的过渡效果，如渐变变化、透明度变化等。 4. **遮罩层和背景图片**：...
1. **边框动画**：可以使用CSS的`transition`属性来添加平滑过渡效果，如边框颜色的渐变变化。 2. **边框宽度变化**：鼠标滑过时改变边框宽度，例如从无边框变为有边框。 3. **边框形状**：使用`border-radius`属性...
在网页设计中，"鼠标图片时滑过显示大图效果"是一种常见的交互设计技术，它提高了用户的浏览体验，使得用户可以快速预览图片的详细内容。这种效果通常应用于产品展示、相册展示或者任何需要对图片进行预览的场景。在...
/* 添加过渡效果 */ } ``` 综上所述，隔行换色、鼠标划过换色和鼠标点击换色是网页设计中提升用户体验的重要手段，通过CSS和JavaScript的灵活运用，可以实现各种动态效果，使网页更加生动和互动。在实际项目中，...
在JavaScript（JS）编程中，实现“鼠标划过图片显示列表信息”的效果是一种常见的交互设计，它可以提升用户体验，使网站更加生动有趣。这种效果在腾讯手机网上被广泛应用，当用户鼠标悬停在图片上时，相关信息会以...
2. 图片切换动画：通过`animate`方法实现图片的平滑过渡。在`mouseenter`事件中，大图以动画形式展开，并显示对应的高分辨率图片；在`mouseleave`事件中，大图则按照设定的速度恢复原状。 3. DOM操作：利用jQuery...