随笔分类 - JavaScript小案例
用JavaScript做的一些小案例,大多都是在慕课网上学习的。
摘要:之前偶然看到了w3c上的编程挑战题,就像拿来试试手,先做的是初级脚本算法,总体不难,如果有更好的方法,希望能一起交流! 1、翻转字符串 先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串。 2、计算一个整数的阶乘 如果用字母n来代表一个整数,阶乘代表着所有小于或
阅读全文
摘要:▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: 基本样式: 思路: 1、获取#main下的所有.box 2、计算页面中图片有几列,并设置页面的宽度 3、找出这几列中高度最小的列 4、从第二行开始,设置图
阅读全文
摘要:▓▓▓▓▓▓ 大致介绍 这次是一个简单的效果,就是思路的问题 效果: ▓▓▓▓▓▓ 思路 旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转 由于效果是根据鼠标的移动距离来操作的,即移动的像素值。如果按照默认的情况,移动鼠标的时候图片就旋转的太快了,所以我们要给鼠标
阅读全文
摘要:学习了妙味课堂的图片切换(动画版) 预览:图片切换 这个小效果相对简单一点。 知识预备: 【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,但是这个方法只能获取行内样式。 所以我们要想获得
阅读全文
摘要:在慕课网学习的小效果-图片阴影 这两种阴影效果实现思路都是在图片下面在加一个或者多个阴影来形成曲边或者翘边 效果预览: 第一个大图是曲线阴影 思路:在图片下面在加一个有曲边的阴影,阴影太浅我们可以在下面加两个阴影。 原理图: 这个红色的方块就是阴影块,这样只是为了说明原理,我们可以给他设置阴影并把它
阅读全文
摘要:在慕课网学习了一个小的效果-按钮特效,总体来说还是挺简单的。其中用到了CSS3中transform、transition、box-sizing、border-radius。 效果图(动态效果图可以去原网站看): 当鼠标移到图片上,图片会自动旋转。鼠标移动到按钮上会在上放出现提示信息并伴有四条线条移动
阅读全文
摘要:这个案例学习起来还有点吃力,目前还没有独自自己写出来过,贴出来以免忘记。 慕课网该课程原地址:http://www.imooc.com/learn/412 源码:
阅读全文
摘要:Document类型 JavaScript通过Document类型表示文档。在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,document对象是window对象的一个属性,因此可以将其作为全局对象来访问。Document节点具有下列特征: nod
阅读全文
摘要:慕课网上学习的简单的信息排列效果 源码: 慕课网原课程:http://www.imooc.com/learn/62
阅读全文
摘要:这两天在慕课网学习了一门课程即Js动画效果,循序渐进的做一个运动框架。可以实现多物体的同时运动,链式运动。 运动框架 move.js 引用move.js的格式 慕课网JS动画效果-http://www.imooc.com/learn/167 代码演示地址:http://runjs.cn/detail
阅读全文
摘要:第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固。可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂。。。。)。我相信以后自己也能够写出高
阅读全文

浙公网安备 33010602011771号