随笔分类 -  原生Javascript特效

JS实现购物车特效
摘要：学习通过JavaScript实现类似于淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能。 1. 实现兼容低版本IE的getElementsByClassName()方法 2. JS表格操作 3. 通过parseInt()，parseFloat()把字符串转换成数 阅读全文
posted @ 2017-03-15 17:42 Lovebugs.cn 阅读(807) 评论(0) 推荐(0)
JavaScript实现评论点赞功能
摘要：通过分析评论功能的逻辑关系，学会如何使用JavaScript实现评论、回复、点赞等各种功能 1.学会JavaScript处理日期和时间。 2.掌握Dom操作中的添加/删除子节点方法。 3.使用setTimeout设置定时器。 4.使用clearTimeout清除定时器以及事件代理的运用。 效果图： 阅读全文
posted @ 2017-03-12 19:49 Lovebugs.cn 阅读(5692) 评论(2) 推荐(2)
用JavaScript实现图片剪切效果
摘要：学会如何获取鼠标的坐标位置以及监听鼠标的按下、拖动、松开等动作事件，从而实现拖动鼠标来改变图片大小。 还可以学习css中的clip属性。 一、CSS实现图片不透明及裁剪效果。 css代码： 选择框鼠标拖动位置详解： 三、javascript实现控制触点 监听鼠标的按下、拖动、松开的事件控制选取框的大 阅读全文
posted @ 2017-03-07 16:06 Lovebugs.cn 阅读(4493) 评论(0) 推荐(1)
鼠标拖拽效果----百度登录框
摘要：以百度的登录窗口为例，学习鼠标拖拽效果如何实现，拖拽范围限定以及登录窗口自动居中。学会如何制作弹出窗口特效，了解把元素设置为可拖拽的原理。 知识点： 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 阅读全文
posted @ 2017-02-21 10:38 Lovebugs.cn 阅读(424) 评论(0) 推荐(0)
放大镜特效
摘要：掌握页面元素定位和移动 放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置技术点：事件捕获、定位offsetLeft与style.left的对比：1）offsetLeft是与父级元素的距离，不包过滚动条的距离2）style.left返回的是字符串，如30px，of 阅读全文
posted @ 2017-02-09 20:02 Lovebugs.cn 阅读(400) 评论(0) 推荐(0)
Tooltip浮动提示框效果（掌握里面的小知识）
摘要：使用原生JavaScript设计和实现Tooltip浮动提示框特效，了解代码简化、事件绑定、事件冒泡等技巧和知识。 特效四个关键点：显示：鼠标移到ToolTip超链接上时，ToolTip提示框可以显示出来隐藏：鼠标移开时，ToolTip提示框自动隐藏定位：ToolTip提示框的位置需要根据ToolT 阅读全文
posted @ 2017-02-09 12:00 Lovebugs.cn 阅读(1307) 评论(0) 推荐(0)
点开、收起全文效果
摘要：使用JS技术实现QQ阅读类似的点击展开、收起效果。 一、定义展开函数showdiv(),实现点击"全文"按钮，全文展开。 二、定义收起函数hidediv(),实现点击"收起全文"按钮，全文内容隐藏。 阅读全文
posted @ 2017-02-07 21:07 Lovebugs.cn 阅读(539) 评论(0) 推荐(0)
网页定位导航
摘要：一个循环判断当前滚动到的位置，另一个循环遍历导航条判断其id是否与滚动到的位置相同 效果如图： 阅读全文
posted @ 2017-02-07 13:26 Lovebugs.cn 阅读(248) 评论(0) 推荐(0)
瀑布流布局
摘要：用js实现瀑布流布局以及通过模拟的数据加载图片，已标记注释 效果如图： 阅读全文
posted @ 2017-02-07 11:02 Lovebugs.cn 阅读(172) 评论(0) 推荐(0)
简单选项卡切换（二）
摘要：通过设置定时器实现延时0.5s切换，一个重要的技巧是定义了一个that变量来存放当前指针this, 阅读全文
posted @ 2017-02-06 17:11 Lovebugs.cn 阅读(196) 评论(0) 推荐(0)
简单选项卡切换（一）
摘要：可以手动切换，另设置定时器可使其自动切换 效果如图： 阅读全文
posted @ 2017-02-06 16:10 Lovebugs.cn 阅读(270) 评论(0) 推荐(0)
简单焦点轮播（二）（图片可滚动）
摘要：使用函数递归实现图片滑动切换，采用辅助图片实现图片无限滚动等技巧。 假如前后不加一张图片的话，图片顺序为[1,2,3,4,5]，当你点到第 5 张图时，再点“下一张”（就是要回到第 1 张图那里），这时候，你想象下那个画面，会一瞬间“刷刷刷”地闪过中间那几张图片才能到第 1 张图那里，这样，太难看了 阅读全文
posted @ 2017-02-06 11:23 Lovebugs.cn 阅读(207) 评论(0) 推荐(0)
简单焦点轮播(一)
摘要：最简单轮播形式，1）js中通过pic的display属性控制变换2）也可通过调整Pic的margin-Left 效果如图： 2）也可以通过控制Pic的margin-Left 阅读全文
posted @ 2017-02-05 14:31 Lovebugs.cn 阅读(189) 评论(0) 推荐(0)