.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
<div class="boxgrid captionfull">
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href="<a class="linkification-ext" title="Linkification: http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/">http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/</a>" target="_BLANK">More Work</a></p>
</div>
</div>
DEMO 见:http://s3.amazonaws.com/buildinternet/live-tutorials/sliding-boxes/index.htm
http://buildinternet.com/project/mosaic/1.0/
http://www.luidea.com/jsplugins/jsactions/20111062.html
分享到:
相关推荐
滑动门(Sliding Doors)技术是网页设计中一种常见的CSS和JavaScript应用,主要用于创建具有动态效果的导航菜单或按钮。这种技术通过精确控制图像的显示部分,使得元素在鼠标悬停时能呈现出不同的视觉效果,给用户...
高仿淘宝首页菜单滑动效果,不分页。 重要逻辑:通过菜单的偏移量计算PageControl的偏移量 pageControl的偏移量为pageControl的总宽度减去滑块的总宽度, 同理scrollView的偏移量为scrollView的内容宽度减去...
这个效果常见于电商应用,如淘宝,用户在滑动页面时,顶部栏或底部栏会逐渐透明或改变颜色,营造出沉浸式的浏览体验。本项目就是针对这种效果的一个简单实现,尽管界面设计可能不尽如人意,但核心功能已经完成。 ...
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
"DivCss鼠标划过滑动门效果"就是利用CSS来实现的一种特定的滑动门效果,它通过改变鼠标悬停在元素上时的背景图像位置,创造出一种类似门开启或关闭的动画效果。 具体来说,滑动门效果主要基于以下CSS属性: 1. **...
仿网易的滑动门导航效果代码(DIV+CSS)
仿淘宝阴影效果的滑动门选项卡
"仿淘宝购物车滑动效果New"是一个典型的前端开发项目,其目标是实现类似淘宝购物车的动态滑动展示,为用户提供更加直观、流畅的浏览体验。这个项目主要涉及到JavaScript(js)和CSS(层叠样式表)两大技术领域,下面...
JavaScript(Js)滑动门效果是一种常见的网页交互设计,它通常用于导航菜单或者索引列表,使得用户可以方便地浏览和选择内容。在本案例中,我们关注的是一个仿淘宝购物索引的效果,这种效果常见于电商网站的商品分类...
在"仿淘宝购物车滑动效果"中,CSS主要用于以下几个方面: 1. 定位购物车元素:使用`position`属性,可以将购物车元素设置为相对于屏幕的固定位置。 2. 隐藏和显示购物车:通过`display`或`opacity`属性,可以控制...
在Android开发中,创建一个仿淘宝商品页的上下滑动控件是一项常见的需求,它能够提供用户友好的交互体验,使商品浏览更加流畅。这个控件实际上是一个自定义的ViewGroup,它包含上下两个FrameLayout,可以实现上下...
在本教程中,我们将深入探讨如何使用jQuery来创建一个仿腾讯视频图片滑动门切换效果。这个效果通常用于展示多张图片,通过平滑过渡在它们之间切换,为用户提供一个吸引人的视觉体验。以下是实现这一效果的关键知识点...
标题中的“仿网易雅虎滑动门广告效果”是指一种网页设计技术,它通常用于创建吸引用户的互动式广告或导航菜单。这种效果以其独特的动画和交互性,使得用户在浏览网页时能有更丰富的体验。滑动门效果的灵感来源于实际...
为了实现滑动门效果,我们需要设置元素的相对定位,并利用伪类`:hover`来定义鼠标悬停时的状态。例如,可以将顶部隐藏,底部显示,然后在`:hover`状态下改变这两个状态: ```css .sliding-door { position: ...
**jQuery滑动门效果**是一种常见的前端交互设计,主要用于创建导航菜单或图片轮播效果。在网页设计中,滑动门效果能为用户提供流畅、直观的界面体验,增强网站的吸引力和可操作性。这个效果通常由jQuery库来实现,...
滑动门效果是一种在网页设计中常见的交互式特效,它主要应用于导航菜单、按钮或图像展示,通过模拟门的开合动作,使用户界面更具动态感和吸引力。这种效果能够提升用户体验,使得用户更容易注意到并操作相关元素。...
在iOS开发中,实现“高仿探探首页卡片滑动效果”是一项常见的需求,它涉及到用户界面(UI)设计和交互实现。这个效果的核心在于创建一个可以左右滑动的卡片视图,用户可以通过向左或向右滑动来表示不同的操作,如...
滑动门效果 鼠标滑动菜单 页签效果 js 滑动门
滑动门效果是一种常见的网页设计技术,主要用于创建具有动态视觉效果的导航菜单或图像展示。在HTML、CSS和JavaScript的组合下,滑动门效果能够实现元素(如按钮或图片)在鼠标悬停时,其上下两部分独立响应,产生...