随笔分类 -  小实例

vue路由实现多视图的单页应用
摘要：多视图的单页应用：在一个页面中实现多个页面不同切换，url也发生相应变化。 router-view结合this.$router.push("/pickUp")实现， 实现效果： 实现代码： 1.系统上下作为一个整体，在点击顶部的时候，跳转至对应的下部路由，顶部的每个菜单都会有他自己的下部，可以分为侧 阅读全文
posted @ 2019-03-22 16:58 苏小落 阅读(927) 评论(0) 推荐(0)
关于vue的增删改查操作
摘要：利用vue也可以实现数据的增删改查，只是未涉及到数据库，只是在浏览器页面中进行操作。 将datas数组中的数据循环输出： 再增加一行，用于保存新数据，编辑数据后保存： 此时，数据已经呈现出来，开始进行一系列的操作：1.sava: 通过v-model将在最后一行填写的数据传输到piece中，然后改变t 阅读全文
posted @ 2019-03-04 23:33 苏小落 阅读(1098) 评论(0) 推荐(0)
bootstrap浅谈
摘要：学习地址：http://www.runoob.com/bootstrap/bootstrap-tutorial.html 自己练习了下 主要是使用了bootstrap中包含的class类样式，只要给相应的HTML元素添加上该类，就可以实现相应的效果。 只是需要记住都有哪些class，并依据相应的语法 阅读全文
posted @ 2018-12-28 11:17 苏小落 阅读(292) 评论(0) 推荐(0)
angular的小实例
摘要：主要是使用了angular的指令。 学习地址:http://www.runoob.com/angularjs/angularjs-tutorial.html 1.输入数据剩余字数会相应减少，点击保存弹出已保存提示信息，点击清空输入数据为空。 <!DOCTYPE html> <html lang="e 阅读全文
posted @ 2018-12-21 16:31 苏小落 阅读(494) 评论(0) 推荐(0)
关于vue的小实例
摘要：练习的两个小例子。 1. 实现点击全选，下面的均被选中，再点击一下，下面的均取消选择； 当下面的均被选择的时候，全选被选中，值为true <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo 阅读全文
posted @ 2018-11-16 16:43 苏小落 阅读(1599) 评论(0) 推荐(0)
购物demo
摘要：这段时间从一个模板网站上拷了个购物系统的demo，试着写了一下，发现div+css布局还真是精妙无穷呢。设置好了布局，加上动态效果也只是锦上添花而已。所以，接下来的重点就是布局了！ 我把网址粘上去：http://www.html5code.net/moban/ 下面是我仿照着写的比较简单一点的dem 阅读全文
posted @ 2018-11-09 14:31 苏小落 阅读(218) 评论(0) 推荐(0)
slider插件制作轮播图
摘要：代码实现： 1.html代码: <div id="banner_tabs" class="flexslider"> <ul class="slides"> <li> <a title="" target="_blank" href="#"> <img width="1920" height="500 阅读全文
posted @ 2018-11-02 11:23 苏小落 阅读(1637) 评论(0) 推荐(0)
javascript实现全选，全不选，反选
摘要：效果： 利用input的checked属性来实现：checked值为true,表示被选择，否则反之。 实现代码： js代码： <script> var butt1 = document.getElementById("butt1"); var butt2 = document.getElementB 阅读全文
posted @ 2018-10-25 11:17 苏小落 阅读(547) 评论(0) 推荐(0)
用jQuery写的轮播图
摘要：效果图： GitHub地址：https://github.com/123456abcdefg/Javascript 大家可以下载源码查看。 与前一篇写的轮播图实现的效果一致，这个是用jQuery写的，相对简单一点的吧。 js代码： 主要包括一下几个部分： 1.一个轮播的方法（left）：nextPa 阅读全文
posted @ 2018-10-23 11:34 苏小落 阅读(1865) 评论(0) 推荐(0)
3D转换（位置）+过渡+透视
摘要：效果如图： 实现代码： 1.html： <div class="door"> <div class="in"><div> </div> 2.css： 设置父元素： .door{ width:250px; height:170px; background-image:url(img/1.jpg); b 阅读全文
posted @ 2018-09-29 16:30 苏小落 阅读(297) 评论(0) 推荐(0)
多层菜单
摘要：实现水平导航栏，多层菜单： html: css: 完整代码如下： 需要注意的是，设置浮动的时候需要给“整体”设置，给ul添加absolute定位，设置left及top， 阅读全文
posted @ 2018-09-28 15:38 苏小落 阅读(400) 评论(0) 推荐(0)
菜单栏
摘要：自己练了一个菜单栏，讲真，做的很一般，就当是先做个铺垫了。 样式如下： 代码实现： 1.HTML部分： <div id="nav"> <button id="total">新闻</button> <div id="list"> <a href="#home">新闻1</a> <a href="#ho 阅读全文
posted @ 2018-09-18 14:44 苏小落 阅读(268) 评论(0) 推荐(0)
轮播图
摘要：实现效果： 实现代码： 1.css： css样式我也不怎么熟练，我感觉这就要靠多练，多记了吧 2.根据偏移量获取显示的图片： 3.消除按钮样式： 4.通过左右按钮点击来切换图片： 5.可以自动播放，以及鼠标放至图片上，停止播放： 6.点击按钮显示相应的图片和按钮样式： 7.html： 完整代码： < 阅读全文
posted @ 2018-09-17 15:03 苏小落 阅读(207) 评论(0) 推荐(0)