随笔分类 -  源码案例

实现图片实时预览的两种方法(有兼容性问题，最好通过后台)
摘要：一 ，通过FileReader对象 <body> <input type="file" id="file" > <div id="box"></div> <script> var file = document.getElementById("file"); var box = document.g 阅读全文
posted @ 2020-03-13 21:34 handsomehe 阅读(668) 评论(0) 推荐(0)
表单元素input的值动态获取到表格案例
摘要：方法一：自己原创 style代码 <style> .table{ width: 600px; } table{ border-collapse: collapse; width: 100%; } table,td,th { border: solid 1px #ccc; text-align:cen 阅读全文
posted @ 2019-11-27 21:34 handsomehe 阅读(1219) 评论(0) 推荐(0)
轮播图超级详细源代码代码以及详细解释
摘要：最下方有源码文件！！！！ 这里面我封装了一个animate.js这个js代码主要实现的是ul的移动,按钮事件处理函数中的代码(让一个元素,从左往右,或者从右往左缓慢移动)（可参考之前写的简单动画案例） animate.js代码 //封装 按钮事件处理函数中的代码(让一个元素,从左往右,或者从右往左缓 阅读全文
posted @ 2019-11-17 01:19 handsomehe 阅读(19203) 评论(0) 推荐(0)
简单动画案例封装
摘要：style代码 <style> *{ margin:0; padding:0; } div{ width: 100px; height: 100px; background-color: red; position:absolute; } </style> 盒子代码 <button id="btn" 阅读全文
posted @ 2019-11-15 23:58 handsomehe 阅读(213) 评论(0) 推荐(0)
html中的放大镜案例
摘要：首先准备两张图片small.jpg和big.jpg放在images文件夹下 文件夹和html页面放在同级目录 style代码 <style> img { display: block; } * { margin: 0; padding: 0; } .box { width: 350px; heigh 阅读全文
posted @ 2019-11-15 15:34 handsomehe 阅读(1319) 评论(0) 推荐(0)
弹出层拖拽案例
摘要：style代码 <style> * { margin: 0; padding: 0; } .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul, 阅读全文
posted @ 2019-11-15 13:35 handsomehe 阅读(158) 评论(0) 推荐(0)
注册框拖拽案例
摘要：style代码 <style> * { margin: 0; padding: 0; } .nav { height: 30px; background: #036663; border-bottom: 1px solid #369; line-height: 30px; padding-left: 阅读全文
posted @ 2019-11-15 11:14 handsomehe 阅读(219) 评论(0) 推荐(0)