您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > CSS > CSS3效果 > 正文

jQuery+CSS3模拟WIN8卡片式UI效果

2015-10-01 02:10:20 作者:天外飞仙 人气:144 Views

jQuery+CSS3模拟WIN8卡片式UI效果
20150927101208
部分js代码

$(document).ready(function() { //slidedown Effect $('.slidedown').hover(function() { $('.search').show(); $(this).children().animate({ top: '30' }, { queue: false, duration: 500 }); }, function() { $(this).children().animate({ top: '0' }, { queue: false, duration: 500 }); $('.search').hide(); }); //slideleft Effect $('.slideleft').hover(function() { $(this).children().animate({ left: '-150' }, { queue: false, duration: 160 }); $('.news').show(); }, function() { $(this).children().animate({ left: '0' }, { queue: false, duration: 160 }); $('.news').hide(); }); //slideright Effect $('.slideright').hover(function() { $(this).children().animate({ left: '140' }, { queue: false, duration: 160 }); $('.news2').show(); }, function() { $(this).children().animate({ left: '0' }, { queue: false, duration: 160 }); $('.news2').hide(); }); //startMenu Effect $('#start').toggle(function() { $(this).addClass('click'); $('#startMenu').slideDown(110); $('.container').addClass('small'); }, function() { $(this).removeClass('click'); $('#startMenu').slideUp(110); $('.container').removeClass('small'); });});$(document).ready(function() { //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 }); });});

下载地址
预览地址

链接:http://www.jqueryba.com/5776.html(转载时请注明本文出处及文章链接)
分类:CSS3效果
标签:

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!