摘要:
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架) 阅读全文
摘要:
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大 阅读全文
摘要:
▓▓▓▓▓▓ 大致介绍 碰撞检测是指在页面中有多个元素时,拖拽一个元素会出现碰撞问题,碰撞检测是以模拟拖拽和磁性吸附中的范围限定为基础的 效果:碰撞检测 ▓▓▓▓▓▓ 碰撞检测 先来看看碰撞检测的原理 我们想要移动红色的方块,当它在大的方块外面时,大的方块为绿色。当它碰撞到大方块时,大方块变为黑色 阅读全文
摘要:
▓▓▓▓▓▓ 大致介绍 磁性吸附是以模拟拖拽为基础添加一个拖拽时范围的限定而来的一个效果,如果对模拟拖拽有疑问的同学请移步模拟拖拽。 源代码、效果:点这里 ▓▓▓▓▓▓ 范围限定(可视区) 先来看一个在可视区范围内的模拟拖拽,我们先要搞清楚可视区的范围。 可视区就是用户可以看到的区域,有上、下、左、 阅读全文
摘要:
模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候,x2-x1即可确定。移动鼠标之后,我们用鼠标当前的位置即x4、y4减去x2-x1、y2-y1 阅读全文
摘要:
妙味课堂-Event事件 1、焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1、点击 2、tab 3、js 2、(例子:输入框提示文字) onfocus:当元素获取焦点时触发: onblur:当元素失去焦点时触发: obj.focus( 阅读全文
摘要:
学习了妙味课堂的图片切换(动画版) 预览:图片切换 这个小效果相对简单一点。 知识预备: 【1】background-position-x background-position属性设置背景原图像(由 background-image 定义)的位置,意味着使用这个属性的前提是必须设置背景原图像bac 阅读全文
摘要:
学习妙味课堂的展示页效果 效果预览:展示页 知识点预备: 【1】transform-style属性 transform-style属性指定了它的子元素看起来是存在3D空间中,还是存在2D空间中,如果存在2D空间中,则它的子元素不能存在3D中。 注意:因为该属性不会被(自动)继承,所以必须为元素所有非 阅读全文
摘要:
学习了妙味课堂扇形展开效果 点击这里预览 知识点预备: 【1】CSS3中特别重要的transform中的rotate(),现在transform可以将元素进行2D和3D变形。 2D transform常用的transform-function的功能: translate():用来移动元素,可以根据X 阅读全文
摘要:
要实现一个元素的抖动的基本思想: 先构建一个存储抖动位置的数组,例如:[20,-20,18,-18.........2,-2,0]。把这个数组的每一项依次与元素的属性的当前值相加并应用到元素上,就可以实现抖动。 语法:shake(obj,attr,pos,endFn) obj是对象 attr是对象要 阅读全文
摘要:
简易的运动框架可以用来控制长宽高、位置、透明度,结合定时器可以实现简单的动画。 其中最主要也是最基础的就是获得元素的属性,我们先来看一下给元素添加样式的三种方法:行内样式、嵌入式样式、外链样式表 我们要获取元素的样式可以使用 obj.style.xx,但是这个方法只能获取行内样式。 所以我们要想获得 阅读全文
摘要:
Array.from方法可以把一个类数组或者课遍历对象转换为一个正真的数组 语法 参数 把字符串转化为数组 创建一个数字序列 阅读全文
摘要:
JavaScript - reduce方法 (Array) 解释:reduce() 方法接收一个函数作为累加器(accumulator),数组 中的每个值(从左到右)开始合并,最终为一个值。 语法:arr.reduce(callback,[initialValue]) 参数: callback:执行 阅读全文
摘要:
在慕课网学习的小效果-图片阴影 这两种阴影效果实现思路都是在图片下面在加一个或者多个阴影来形成曲边或者翘边 效果预览: 第一个大图是曲线阴影 思路:在图片下面在加一个有曲边的阴影,阴影太浅我们可以在下面加两个阴影。 原理图: 这个红色的方块就是阴影块,这样只是为了说明原理,我们可以给他设置阴影并把它 阅读全文
摘要:
在慕课网学习了一个小的效果-按钮特效,总体来说还是挺简单的。其中用到了CSS3中transform、transition、box-sizing、border-radius。 效果图(动态效果图可以去原网站看): 当鼠标移到图片上,图片会自动旋转。鼠标移动到按钮上会在上放出现提示信息并伴有四条线条移动 阅读全文