创新易联欢迎您!16年高端网站建设品牌

网页技术:css3代替js优化动画

日期:2014-08-26 | 来源:易联网站建设公司 | 阅读:

       深圳网站制作www.innont.com )作为市场资深品牌,8年来,立足广东,面向全国,已服务过3000多家具有顶级发展潜力的企业,并一直保持良好的合作伙伴关系,成为中国第一高端精品网站设计策划机构,网站建设第一品牌!

 

       css3->一个非常强大的叠样式表, 他可以让你的网页栩栩如生, 但就目前现况看, 他的兼容不是很好, 一般为ie9(包括)以上才兼容, 流行的标准浏览器就不用说了, 肯定是兼容, 如chrome, firefox等; ss3可以完成如: 圆角, 渐变, 阴影, 变形, 动画等; 当前部分在ie9上还不能够得到支持, 如:变形, 动画; 但在现在硬件淘汰这么快的时代已经可以完全使用css3做一些事情了. 下面是css3一段例子. .floorClassUl a.img { color: #666; display: block; top: 0; right: -

145px; width: 185px; height: 88px; position: absolute; background-

color: #fff; -webkit-transition: right .5s ease .2s; transition: right

.5s ease .2s; }
.floorClassUl a.img:hover { text-decoration: none; right: 0; }var css3

= function () {//判断浏览器
 return !! -[1,] ? (navigator.userAgent.indexOf("MSIE")>0 &&

navigator.userAgent.indexOf("MSIE 9.0")>0 ? false : true) : false;
}();

if(!css3) {
 $("ul.floorClassUl a.img").css({ "right": "-145px" }).mouseover

(function () {
     $(this).stop(true).animate({ "right": 0 },400);
    }).mouseleave(function () {
        $(this).stop(true).animate({ "right": "-145px" },400);
    });
}

       上面css样式使用了transition属性, 更多请点 transition的使用 查看; 动画以前一直用的js亦或者jQuery制作, 其实可以标准浏览器使用css3,不支持的才使用js控制,taobao就是这么来的,这样岂不是更好些? 

—— 微信公众号 ——

热门标签