`

仿淘宝 首页的 "滑动门" 鼠标悬浮滑动box效果

阅读更多
    .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

 

 

2
2
分享到:
评论

相关推荐

    仿淘宝超漂亮的滑动门HTML

    滑动门(Sliding Doors)技术是网页设计中一种常见的CSS和JavaScript应用,主要用于创建具有动态效果的导航菜单或按钮。这种技术通过精确控制图像的显示部分,使得元素在鼠标悬停时能呈现出不同的视觉效果,给用户...

    高仿淘宝首页菜单滑动效果

    高仿淘宝首页菜单滑动效果,不分页。 重要逻辑:通过菜单的偏移量计算PageControl的偏移量 pageControl的偏移量为pageControl的总宽度减去滑块的总宽度, 同理scrollView的偏移量为scrollView的内容宽度减去...

    android仿淘宝,滑动渐变效果实现

    这个效果常见于电商应用,如淘宝,用户在滑动页面时,顶部栏或底部栏会逐渐透明或改变颜色,营造出沉浸式的浏览体验。本项目就是针对这种效果的一个简单实现,尽管界面设计可能不尽如人意,但核心功能已经完成。 ...

    js滑动门代码制作js滑动门导航鼠标滑过滑动门效果

    js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果

    DivCss鼠标划过滑动门效果

    "DivCss鼠标划过滑动门效果"就是利用CSS来实现的一种特定的滑动门效果,它通过改变鼠标悬停在元素上时的背景图像位置,创造出一种类似门开启或关闭的动画效果。 具体来说,滑动门效果主要基于以下CSS属性: 1. **...

    仿网易的滑动门导航效果代码(DIV+CSS)

    仿网易的滑动门导航效果代码(DIV+CSS)

    仿淘宝阴影效果的滑动门选项卡

    仿淘宝阴影效果的滑动门选项卡

    仿淘宝购物车滑动效果New

    "仿淘宝购物车滑动效果New"是一个典型的前端开发项目,其目标是实现类似淘宝购物车的动态滑动展示,为用户提供更加直观、流畅的浏览体验。这个项目主要涉及到JavaScript(js)和CSS(层叠样式表)两大技术领域,下面...

    Js 滑动门 英文字母切换 仿淘宝购物索引效果

    JavaScript(Js)滑动门效果是一种常见的网页交互设计,它通常用于导航菜单或者索引列表,使得用户可以方便地浏览和选择内容。在本案例中,我们关注的是一个仿淘宝购物索引的效果,这种效果常见于电商网站的商品分类...

    仿淘宝购物车滑动效果

    在"仿淘宝购物车滑动效果"中,CSS主要用于以下几个方面: 1. 定位购物车元素:使用`position`属性,可以将购物车元素设置为相对于屏幕的固定位置。 2. 隐藏和显示购物车:通过`display`或`opacity`属性,可以控制...

    仿淘宝商品页上下滑动控件

    在Android开发中,创建一个仿淘宝商品页的上下滑动控件是一项常见的需求,它能够提供用户友好的交互体验,使商品浏览更加流畅。这个控件实际上是一个自定义的ViewGroup,它包含上下两个FrameLayout,可以实现上下...

    jQuery仿腾讯视频图片滑动门切换效果

    在本教程中,我们将深入探讨如何使用jQuery来创建一个仿腾讯视频图片滑动门切换效果。这个效果通常用于展示多张图片,通过平滑过渡在它们之间切换,为用户提供一个吸引人的视觉体验。以下是实现这一效果的关键知识点...

    仿网易雅虎滑动门广告效果

    标题中的“仿网易雅虎滑动门广告效果”是指一种网页设计技术,它通常用于创建吸引用户的互动式广告或导航菜单。这种效果以其独特的动画和交互性,使得用户在浏览网页时能有更丰富的体验。滑动门效果的灵感来源于实际...

    滑动门技术效果

    为了实现滑动门效果,我们需要设置元素的相对定位,并利用伪类`:hover`来定义鼠标悬停时的状态。例如,可以将顶部隐藏,底部显示,然后在`:hover`状态下改变这两个状态: ```css .sliding-door { position: ...

    jquery 滑动门效果

    **jQuery滑动门效果**是一种常见的前端交互设计,主要用于创建导航菜单或图片轮播效果。在网页设计中,滑动门效果能为用户提供流畅、直观的界面体验,增强网站的吸引力和可操作性。这个效果通常由jQuery库来实现,...

    几个经典的滑动门效果

    滑动门效果是一种在网页设计中常见的交互式特效,它主要应用于导航菜单、按钮或图像展示,通过模拟门的开合动作,使用户界面更具动态感和吸引力。这种效果能够提升用户体验,使得用户更容易注意到并操作相关元素。...

    高仿探探首页卡片滑动效果

    在iOS开发中,实现“高仿探探首页卡片滑动效果”是一项常见的需求,它涉及到用户界面(UI)设计和交互实现。这个效果的核心在于创建一个可以左右滑动的卡片视图,用户可以通过向左或向右滑动来表示不同的操作,如...

    滑动门效果

    滑动门效果 鼠标滑动菜单 页签效果 js 滑动门

    滑动门效果、html、css

    滑动门效果是一种常见的网页设计技术,主要用于创建具有动态视觉效果的导航菜单或图像展示。在HTML、CSS和JavaScript的组合下,滑动门效果能够实现元素(如按钮或图片)在鼠标悬停时,其上下两部分独立响应,产生...

Global site tag (gtag.js) - Google Analytics