案例demo
一块小砖头儿
每一天,每一点
展开
-
案例效果:在屏幕中拖拽箱子
案例效果:在屏幕中拖拽箱子实现效果:在工作中最近遇到点小的知识点,现在写出一个小demo,供需要的朋友来参考实现效果:首先看见需求我们不着急做,我们先来分析一下:位置特点:拖到时,鼠标在盒子内的位置不变;盒子新的位置=新的鼠标位置-鼠标在盒子内的一开始位置;鼠标在盒子内的一开始位置 =鼠标的位置-盒子的位置(offsetLeft)执行特点:先鼠标落下在盒子内,再在页面上进行...原创 2019-08-04 20:36:39 · 216 阅读 · 0 评论 -
案例效果:原生JS-实现京东查看商品点击放大案例
案例效果:原生JS-实现京东查看商品点击放大案例需求分析实现效果:需求分析鼠标移入,出现黄色的遮罩,和用来放大的盒子鼠标移出,遮罩和放大的盒子消失鼠标在小图片上面进行移动的时候黄色遮罩层会随着鼠标一起移动用来放大显示的图片,也跟着一起移动实现效果:html部分:<div class="box"> <div class="small"&g...原创 2019-08-08 21:39:52 · 389 阅读 · 0 评论 -
案例效果:手机验证码-this指向案例
案例效果:手机验证码-this指向案例实现效果最近在使用this指向这里突然想到以前的demo有待优化的地方,特此写篇文章记录下。实现效果html部分:<div class="form"> <div class="row"> <div class="cell cols-1">请输入手机号码</div>...原创 2019-08-18 21:22:45 · 135 阅读 · 0 评论 -
案例效果:原生JS-实现新浪微博的增删(利用localStorage存储到浏览器中,实现刷新不清空的效果)
案例效果:实现新浪微博的增删(利用localStorage存储到浏览器中,实现刷新不清空的效果)实现效果:![在这里插入图片描述](https://img-blog.csdnimg.cn/20190807114126677.gif)实现效果:html部分:<div class="weibo"> <textarea class="weibo-text">...原创 2019-08-07 11:45:14 · 553 阅读 · 2 评论 -
案例效果:原生JS-实现pc端轮播图效果
案例效果:原生JS-实现pc端轮播图效果案例:轮播图需求实现效果:案例:轮播图需求布局:ul下有很多li标签;浮动在一行;原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden;功能需求:序号轮播左右按钮的轮播自动轮播鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播实现效果:html部分<div class...原创 2019-08-09 23:24:34 · 499 阅读 · 0 评论 -
案例效果:利用Ajax实现页面无刷新留言效果
案例效果:利用Ajax实现页面无刷新留言效果实现效果前言:在百度贴吧,以及一些论坛中,当你回复或者评论完毕之后,从来没有见过页面重新刷新加载的效果,那么这个究竟是怎么做成的呢,也就是利用Ajax技术,页面无刷新效果,废话不多说,直接上代码。实现效果html部分: <div class="container"> <h1 class="display-1">留...原创 2019-08-20 20:25:58 · 836 阅读 · 4 评论 -
案例效果:实现移动端端轮播图效果
实现移动端端轮播图效果实现效果插件使用:1.zepto.js2.touch.js实现效果html部分:<!-- 结构 --> <!-- li*6>a[href=#]>img[src=./images/$.jpg] --> <div class="box"> <ul> &...原创 2019-08-12 23:33:24 · 745 阅读 · 1 评论