河南网站搭建,wordpress更改上传下载目录,安阳网吧,网站开发 软件开发在前面#xff0c;我们已经讲解了transform这个属性以及案例#xff0c;那么本文会进一步结合transform和transition两个属性#xff0c;并制作一个简单的案例进行说明。一、transition属性说明接下来简单分析一下transition这个属性的定义以及子属性。1)ansition-property …在前面我们已经讲解了transform这个属性以及案例那么本文会进一步结合transform和transition两个属性并制作一个简单的案例进行说明。一、transition属性说明接下来简单分析一下transition这个属性的定义以及子属性。1)ansition-property 要运动的样式 (all || [attr] || none)2)transition-duration 运动时间3)transition-delay 延迟时间4)transition-timing-function 运动形式ease(逐渐变慢)默认值linear(匀速)ease-in(加速)ease-out(减速)ease-in-out(先加速后减速)cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 ) http://matthewlein.com/ceaser/[注意]IE9-不支持该属性safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀而其余高版本浏览器支持标准写法。看一个简单的例子当鼠标经过div时实现该div的颜色改变以及高度和宽度都改变的效果。实现代码transition.box{width:100px;height:100px;background-color: blue;transition-duration: 2s;/* 以下三值为默认值稍后会详细介绍 */transition-property: all;transition-timing-function: ease;transition-delay: 0s;}.box:hover{width:200px;height:200px;background-color: red;}过渡transition的这四个子属性只有是必需值且不能为0。其中和都是时间。当两个时间同时出现时第一个是第二个是当只有一个时间时它是而为默认值0。transition: || || || transition的这四个子属性之间不能用逗号隔开只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值多值部分稍后介绍)而空格隔开的代表不同属性的四个关于过渡的子属性。二、案例扇形导航实现代码扇形导航html{height:100%;overflow:hidden;}body{background:#f9f9f9;}#menu{width:50px;height:50px;position:fixed;right:20px;bottom:20px;}#menu_list{height:42px;width:42px;position:relative;margin:4px;}#menu_list img{border-radius:21px;position:absolute;left:0;top:0;}#home{width:50px;height:50px;background:url(images/home.png) no-repeat;border-radius:25px;position:absolute;left:0;top:0;transition: 0.3s;} window.οnlοad function () {var oHome document.getElementById(home);var aImg document.getElementById(menu_list).getElementsByTagName(img);var iRadius-150;var onOff true;for(var i 0; i aImg.length;i){aImg[i].οnclick function () {this.style.transition0.3s;this.style.WebkitTransformscale(2) rotate(-720deg);this.style.opacity0.1;addEnd(this,end);};};function end(){this.style.transition0.1s;this.style.WebkitTransformscale(1) rotate(-720deg);this.style.opacity1;removeEnd(this,end);};oHome.οnclickfunction(){if (onOff){this.style.webkitTransformrotate(-360deg);for(var i 0; i aImg.length; i ){var oLt getTL(iRadius,90/4*i);aImg[i].style.transition0.5si*100ms;aImg[i].style.left oLt.oLeftpx;aImg[i].style.top oLt.oToppx;aImg[i].style.webkitTransformscale(1) rotate(-720deg);}}else{this.style.webkitTransformrotate(360deg);for(var i 0; i aImg.length; i ){aImg[i].style.transition0.5s(aImg.length-i1)*100ms;aImg[i].style.left 0px;aImg[i].style.top 0px;aImg[i].style.webkitTransformscale(1) rotate(0deg);}}onOff!onOff;};function getTL(iRadius,iDeg){var oLeft Math.round(Math.sin(iDeg/180*Math.PI)*iRadius);var oTop Math.round(Math.cos(iDeg/180*Math.PI)*iRadius);return {oLeft:oLeft,oTop:oTop};};function addEnd(obj,fn){obj.addEventListener(WebkitTransitionEnd,fn,false);obj.addEventListener(transitionend,fn,false);};function removeEnd(obj,fn){obj.removeEventListener(WebkitTransitionEnd,fn,false);obj.removeEventListener(transitionend,fn,false);};};案例说明1、案例中涉及两个点击事件一个是点击主菜单时会进行旋转并出现扇形导航另外一个是点击扇形导航时会使导航图片变大。(1)首先是点击主菜单我们在点击主菜单的时候图片会旋转在这个中我们使用了webkitTransformrotate(-360deg);这个属性就可以实现在这个过程中要记得当鼠标反复点击后者点击结束后的事件效果。所以我在其中设置了一个变量onOff进行判断初始值为true首先进行判断如果为true就可旋转相反的为了达到更好的效果这里设置了旋转360度最后记得加上onOff!onOff;否则这个操作还是错误的达不到我们想要的效果。oHome.οnclickfunction(){if (onOff){this.style.webkitTransformrotate(-360deg);}else{this.style.webkitTransformrotate(360deg);}onOff!onOff;};(2)其次是出现扇形导航在这里使用的就是transform属性我们以主菜单为中心进行旋转将其他的5个子菜单分别平均分布在扇形中。那么首先我们是不是应该先来计算一下角度以及半径的关系。至于sin和cos如何计算以及边和角度如何计算这里就不详细说明。附上我写的var oLeft Math.round(Math.sin(iDeg/180*Math.PI)*iRadius);var oTop Math.round(Math.cos(iDeg/180*Math.PI)*iRadius); round()函数是为了取整。(3)最后是如何是点击图片的时候让图片变大。为了实现这个效果我采用了transform的scale()函数1)scale(X方向上的比率Y方向上的比率)使用scale()函数指定X方向与Y方向上的2D伸缩比率。可以省略第二个值省略时与第一个值相同。2)scaleX(x方向上的比率)使用scaleX()函数指定X方向上的伸缩比率这时Y与Z方向上的比率为1。3)scaleY(Y方向上的比率)使用scaleY()函数指定Y方向上的伸缩比率这时X与Z方向上的比率为1。4)scaleZ(Z方向上的比率)当定义了一个3D变形时使用scaleZ()函数指定Z方向上的伸缩比率。这时X与Y方向上的比率为1。5)scale3d(X方向上的比率,Y方向上的比率,Z方向上的比率)当定义了一个3D变形时使用scaleZ()函数指定Z方向上的伸缩比率。这时X与Y方向上的比率为1。注意默认值none 使用对象块元素和直列元素 值的继承不继承2、过渡完成事件Webkit内核 obj.addEventListener(webkitTransitionEnd,function(){},false);firefox: obj.addEventListener(transitionend,function(){},false);当如果多使用一个样式属性在每个动画执行的过程中webkitTransitionEnd事件的触发次数将多增加两次。也就是说webkitTransitionEnd事件将在元素的每个样式属性值发生改变之后触发一次。
