随笔- 16  评论- 15  文章- 0 
  2019年12月29日
摘要:下面有三种方式,看自己需求: 一、顶部进度条 在html代码中间插入jq代码 执行动画。页面加载到哪部分,进度条就会相应的向前走多少 当全部加载完成后将loading进度条模块隐藏 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars 阅读全文
posted @ 2019-12-29 10:13 #SY 阅读 (16) 评论 (0) 编辑
  2019年12月26日
摘要:大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="w 阅读全文
posted @ 2019-12-26 22:06 #SY 阅读 (77) 评论 (0) 编辑
  2019年12月20日
摘要:封装了一个JS方法,支持元素的基本动画:宽、高、透明度...等,也支持链式动画和同时运动。 获取元素的属性的函数并进行了兼容性处理: 1 function getStyle(obj, attr) { 2 if(obj.currentStyle){ //IE浏览器 3 return obj.curre 阅读全文
posted @ 2019-12-20 17:28 #SY 阅读 (88) 评论 (2) 编辑
摘要:主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) 动画效果主要是用定时器setInterval()来实现的,每隔几毫秒让物体移动一点距离,通过不断调用 阅读全文
posted @ 2019-12-20 15:09 #SY 阅读 (75) 评论 (0) 编辑
  2019年12月4日
摘要:功能描述: 当全选按钮被按下时,所有商品的小复选框(以及另外一个全选按钮)的选中状态跟按下的全选按钮保持一致; 当用户选中商品时,如果所有商品都被选中,就让全选按钮为选中状态; 用户可以点击 + - 增加或减少商品数量,也可以直接在文本框修改数量,数量修改后 后边的小计也会相应改变; 用户可以进行删 阅读全文
posted @ 2019-12-04 08:34 #SY 阅读 (316) 评论 (2) 编辑
  2019年12月2日
摘要:功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中;点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然;点击删除按钮会删除该事项;双击事项可以修改事项的内容。待办事项的数据是保存到本地存储的(localStorage),就算关闭页面再打开,数据还是存在的(前提是要用相同 阅读全文
posted @ 2019-12-02 11:52 #SY 阅读 (216) 评论 (0) 编辑
摘要:功能描述: 当滚动条滑到某个位置时,显示电梯导航; 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致; 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域 准备工作: 首先将jQuery文件以及你自己的js文件引入你的html里,jq文件要放在上面 <script src="j 阅读全文
posted @ 2019-12-02 10:26 #SY 阅读 (187) 评论 (0) 编辑
  2019年12月1日
摘要:功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致;手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个index=0用来存图片索引; 添加一个定时器,每隔两秒调用一次,每调用一次定时器(图片播放一次)index 阅读全文
posted @ 2019-12-01 12:03 #SY 阅读 (130) 评论 (0) 编辑
  2019年11月27日
摘要:功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 4.给箭头绑定单击事件,并且使图片可以无缝轮播 5.实现自动轮播(动画函数) 具体实现代码: 1.鼠 阅读全文
posted @ 2019-11-27 11:18 #SY 阅读 (191) 评论 (8) 编辑
  2019年11月26日
摘要:仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部,速度由快到慢向上滑。 思路: 1、页面加载完毕才能执行js代码 可以将js代码写在最下边(本次回顶示例是用的这种) 想写在上边可以用下边这两种: ①window. 阅读全文
posted @ 2019-11-26 22:40 #SY 阅读 (166) 评论 (0) 编辑