网站上打广告,手机会员卡管理系统,怎么做刷qq业务网站,完整网站建设教程【整理】原文#xff1a;https://segmentfault.com/a/1190000007087701 本人新手#xff0c;国庆苦逼加无用班#xff0c;那是我在夕阳下的奔跑吗#xff1f;闲来无聊整理以前学习的资料#xff0c;关于广告栏的效果制作#xff0c;详情观看[这里][1]。其中用了一个作者自…【整理】原文https://segmentfault.com/a/1190000007087701 本人新手国庆苦逼加无用班那是我在夕阳下的奔跑吗闲来无聊整理以前学习的资料关于广告栏的效果制作详情观看[这里][1]。其中用了一个作者自己写的move.js插件也就是移动动画完成重点就是定时器setinterval如果有人有代码欢迎送上另一个就是用jq完成下面主要说说jquery的实现方法吧。
jquery实现的重点就是animate方法这是[官网][2]。 **定义和用法** animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的这样就可以创建动画效果。 **语法 1** $(selector).animate(styles,speed,easing,callback)
废话少说下面是详细代码
dom结构 1 div classdbmove iddbmove/div2 a hrefjavascript:void(0) classdbhide iddbhide/a3 a hrefjavascript:void(0) classdbshow iddbshow/a4 cssdbshowdohide类似5 .dbmove {6 background: url(db.png) no-repeat 0 0;7 width: 0px;8 height: 33px;9 float: left;
10 }
11 jquery:
12 $(document).ready(function () {
13 $(#dbshow).click(function () {
14 $(this).hide();
15 $(#dbmove).animate({width: 150}, 500, function () {
16 $(#dbhide).show();
17 })
18 })
19
20 $(#dbhide).click(function () {
21 $(this).hide();
22 $(#dbmove).animate({width: 0}, 500, function () {
23 $(#dbshow).show();
24 })
25 })
26 }) ![图片描述][3]这个是图片资源大家意淫一下效果吧点击展开点击收起。
**下面进入重点CSS3动画的实现**写完了想用css实现一个这样的功能之后进行了简单的百度和尝试代码如下 1 -webkit-keyframes fadeInRight {2 0% {3 width: 0;4 }5 100% {6 width: 150px;7 }8 9 }
10 .dbmove {
11 background: url(db.png) no-repeat 0 0;
12 width: 0px;
13 height: 33px;
14 float: left;
15 animation-name:fadeInRight;/*动画属性名也就是我们前面keyframes定义的动画名*/
16 animation-duration: 2s;/*动画持续时间*/
17 animation-timing-function: ease-in-out; /*动画频率和transition-timing-function是一样的*/
18 animation-delay:1s;/*动画延迟时间*/
19 animation-iteration-count: 1;/*定义循环资料infinite为无限次*/
20 animation-direction: normal;/*定义动画方式*/
21 } 第一个想到的自然是keyframes动画以前也就听过并没有写过这样的代码。经过一段尝试最终失败现在的效果是默认动画执行一次但是不知道怎么用JS通过点击控制并且最终动画会还原不符合预想。希望有人看到来继续完成吧随记
最后附上[JS动画比CSS3动画性能谁更好][4][CSS3 动画][5] [1]: http://www.imooc.com/learn/22 [2]: http://api.jquery.com/animate/ [3]: /img/bVDTYJ [4]: https://www.zhihu.com/question/33686030 [5]: http://www.w3school.com.cn/css3/css3_animation.asp
