鹏顺教育
您的当前位置:首页Html5+Css3BannerAnimation多方位移动特效_html/css

Html5+Css3BannerAnimation多方位移动特效_html/css

来源:鹏顺教育


背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到。一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下!

效果:如图 素材

HTML:
















STYLE:

JAVASCRIPT:



$(function(){
var bannerwrap = function(o){
$(".btnwrap b").removeClass("cur");
$(".btnwrap b:eq("+o+")").addClass("cur");
$(".banner .fea").hide();
$(".banner .fea:eq("+o+")").fadeIn(800);
}

var i=0;
$(".btnwrap b").click(function(){
i=$(this).index();
bannerwrap(i);
});

var sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
$(".banner").hover(function(){
clearInterval(sid);
},function(){
sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
});
});

总结:Html5、Css3在近几年使用已经非常广泛了,特别在移动端,应用场景层出不穷,抓紧学习一下,不要凹凸曼啦!

显示全文