- 博客(19)
- 收藏
- 关注
RSS订阅原创 js运动(2)----缓冲运动
匀速运动1.关于匀速运动,百度的解释是这样的 初中物理规定速度大小不变的运动机械运动叫做匀速运动。初中物理教学中速度即速率，不考虑速度的方向。 高中物理规定任意相同时间内通过相同的位移的运动叫做匀速运动。即:速度大小和方向都不改变的运动，或者是加速度为零的运动。百度的解释确实通俗易懂,其实在js中我们的关注点也差不多: 运动过程中速度需要始终保持一致方向需固定2.形象的说明一下Cre
2017-01-13 20:33:46
606
原创 苹果底部菜单效果实现
关于苹果底部效果,一般人肯定不会陌生,由于该效果不止在苹果电脑上出现,在很多网站都运用到了该效果.效果看起来还是比较酷炫的,当鼠标移动过去时,会发现对应的菜单会出现放大的效果.图片展示:说下原理:1.确认事件源:对应的菜单按钮,为img实现2.确认事件属性:onmousemove,这里会出现误区,因为很多人认为是当鼠标悬浮在对应菜单项上时,该菜单才会发生变化,其实不然,
2016-12-29 19:59:20
1671
原创 关于js缓冲运动
缓冲运动算是用的比较多的运动类型了，速度是由快到慢，最后到达目的地停止 定时器缓冲运动 *{ padding: 0; margin: 0;} 缓冲运动 var btn=document.getElementsByTagName('button')[0]; var div=document.getEle
2016-12-20 15:22:57
379
原创 3d照片效果实现
3D球形 *{ padding: 0; margin: 0; } div{ width: 300px; height: 300px; /*border:1px solid #00aa00;*/ pe
2016-12-16 09:54:11
456
原创 关于数组字符反转的问题
比如['cdf','efrt','rtyc']需要反转为['fdc','trfe','cytr']代码如下： Title function reverseArr(arr){ var arrLast=arr; var arr1=[]; for(var i=0;i<arr.length;i++){
2016-12-15 21:50:32
352
原创 关于button按钮设置padding失效的原因
因为button浏览器已经自己设置了box-sizing：border-box，所以无效。另外还有 input[type="submit"], input[type="reset"], input[type="file"]参考资料：点击打开链接
2016-12-15 18:45:36
3482
原创 js运算符的优先级
关于js运算符，无非有三大类，算数运算符、关系运算符和逻辑运算符。但是对于这三种运算符之间的优先级，许多人却是不清楚，这里简单的介绍一下。1.算数运算符 +- * / %2.关系运算符 > = 3.逻辑运算符 && || !4.赋值运算符 =优先级：1>2>3>4比较特殊的： 单目运算符>多目运算符；逻辑与>逻辑或;具体如下：
2016-12-14 16:45:39
573
原创 js中逻辑运算符&&||！
js中逻辑运算符在开发中可以算是比较常见的运算符了，主要有三种：逻辑与&&、逻辑或||和逻辑非！。当&&和|| 连接语句时，两边的语句会转化为布尔类型（Boolean），然后再进行运算，具体的运算规则如下：1.&& 1.1两边条件都为true时，结果才为true；1.2如果有一个为false，结果就为false；1.3当第一个条件为false时，就不再判断后面的条件注意：
2016-12-14 13:07:11
11220
1
原创 css3画一个运动的钟表
思路如下1.定义一个盒子，然后通过border-radius变为圆2.画6条线，然后通过定位，把这6条线设置到大盒子里，作为钟表刻度3.画一个小圆，通过定位将中间部分的线条遮住4.画中心点和时分秒针5.最后在设置运动一圈时分秒针的动画，大功告成上代码： 钟表border-radius *{padding:0;margi
2016-12-13 16:00:21
3238
原创 css3模块之动画animation
在animation出来之前，动画效果需要通过js实现，但是animation的诞生可以说是css3中非常独特的属性之一基本用法，这里我用连写属性来说明（其实吧，单独属性我记不住）----animation:动画名 动画所需时间 动画曲线 延迟时间 动画重复次数 是否往复。一般来说，动画名可以随意指定，这个属于用户自定义；动画曲线以匀速运动最为常见（line
2016-12-13 14:03:49
756
原创 css3-2D-transform之translate平移
translate平移应该也算是transform中用的比较多的属性之一了，用法：transform：translate（x轴平移，y轴平移），也可以单独设置：transform：translateX（），transform：translateY（）。如果只设置transform：translate（值），那么只会在X轴进行平移。后期在transform-3D还会有transform：transl
2016-12-13 10:56:16
50956
原创 js实现左右轮播图效果
一般轮播图为左右、上下、3D或者渐变轮播，忙里偷闲写了一个左右轮播，该效果比较常见，但是实用性比较强。 Title *{ padding: 0; margin: 0;} div{ width: 520px; height: 280px; border:1px
2016-12-13 10:39:38
9801
原创 关于对同一个盒子同时设置相对定位和浮动或者绝对定位和浮动的问题
可能细心的朋友在查看某些网页的时候发现，某些盒子或是图片既设置了相对定位又设置了浮动，觉得很奇怪，其实呢，这个设置是非常的正常。 比如，在布局页面的时候，我希望导航和轮播图一左一右的进行显示，就可以对导航设置左浮动float。轮播图右浮动。但是呢、如果导航里面有些小图标之类的东西要进行绝对定位absolute操作时，那么就可以对该导航设置相对定位relative了，相当于小图标的已定位的祖
2016-12-13 09:45:05
9612
原创 css3 2D--transform--scale缩放
再来说说css3 2Dtransform之scale， 该属性理解也很简单，可以让元素在水平和垂直方向进行缩放，请注意缩放这个词语，说明它是既可以将元素方法，也可以将元素缩小的。该属性的用法如下： transform：scale（水平缩放比例，垂直缩放比例）//注意是缩放比例，是不用带单位的，表示元素的宽高*对应的比例即为缩放的具体值。 直接上代码：
2016-12-13 09:32:26
2520
原创 css3transform--2D篇--rotate
说起css3，不得不提css3的维度模块（字我也不晓得写错没），维度比较简单，就是一个transform，但是呢，该属性对应的值却不少。 首当其冲的是rotate(XXdeg) ，该值表示元素在平面旋转的度数，也就是定义2D旋转。
2016-12-13 09:18:22
650
原创 css3过渡transition
css3标志属性之一的transition，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
2016-12-12 19:26:03
428
原创 伪类选择器hover应用
伪类选择器hover 主要是当鼠标悬停在某个元素上时，其样式会根据设定的属性进行变化，一般用于文字或是背景图片的修改； 说多了都是眼泪，直接上代码！ Eg： a-day1 *{ padding: 0; margin: 0; } ul{
2016-12-12 14:07:51
2175
原创 css 伪类选择器相关
伪类选择器主要是用于修改a标签的样式，一共有四种,分别是link（默认样式）、visited（访问过后的样式）、hover（鼠标悬浮的样式）、active（鼠标长按的样式）；举例说明： Title a:link{color:blue} a:visited{color:pink} a:hover{color:de
2016-12-12 13:35:54
279
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人