demo
关注
分享
扫一扫
阿庭
做废物是很需要天赋的，普通人只能好好活着。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【js】原生js上传图片到服务器
<input id="file" type="file" name="image" size="50" /> <button id="load">上传</button>$('#load').click(function () { var input = $('#file')[0]; //图片上传成功后会将图片名称赋值给 value 属性 if (input.value) { //使用 FormData 对象 ...原创 2020-07-25 21:06:14 · 1347 阅读 · 2 评论 -
【demo】立体方块旋转导航栏(html+css3)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-07-26 17:36:30 · 1271 阅读 · 0 评论 -
【demo】毛玻璃遮罩层
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Mask</title> <style type="text/css"> html, body { ...原创 2019-07-26 17:33:31 · 985 阅读 · 0 评论 -
【demo】网易云的层叠轮播图
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Mask</title> <style type="text/css"> html, body { ...转载 2019-07-26 17:19:05 · 1179 阅读 · 1 评论 -
【demo】原生js实现纯进度条
setTimeout<html> <head> <title>进度条</title> <style type="text/css"> .container{ width: 450px; border: 1px solid #000; height: 25px; }...原创 2019-07-16 22:08:11 · 377 阅读 · 0 评论 -
【demo】悬停出现的竖向导航
效果代码<ul class="v-nav"> <li><img src="img/detail.png" width="50" height="50" /> <ul class="list"> <li ><a href="#content-1">|酒店|</a></li> ...原创 2019-07-13 21:32:15 · 397 阅读 · 0 评论 -
【demo】原生js写最最最最最最简单的轮播图
效果BUG没有首尾相接代码<div id="adv"> <div id="arr"> <button class="arrow" id="left">←</button> <button class="arrow" id="right">→</button> </div> <d...原创 2019-07-13 21:27:06 · 716 阅读 · 0 评论 -
【demo】原生js实现淘宝放大镜
效果BUG受窗口移动影响（鼠标定位的时候）解决想法是在加上滚轮移动距离的变量 目前还没成功（。）只能接受一个比例大小的图代码<div class="bigimg" id="small-box"> <img src="img/1.jpg" alt="" width="400" height="200" id="big-img"> <div clas...原创 2019-07-13 21:15:38 · 276 阅读 · 0 评论 -
【demo】滑动略缩图更换大图的轮播图
效果代码<div class="producedetail"> <div class="flashadv"> <div class="bigimg" id="small-box"> <img src="img/1.jpg" alt="" width="400" height="200" id="big-img">...原创 2019-07-13 18:57:09 · 336 阅读 · 0 评论 -
【demo】纯js实现星级评比（半星单位）
<div class="starassess"><div class="assess-strip" id="assess-strip"><li class="emptystar"><span class="leftstar" ></span><span class="rightstar"></span><...原创 2019-07-13 18:23:13 · 1220 阅读 · 0 评论 -
【demo】button效果demo
body { margin: 0; background: #eee; } .box { display: flex; width: 1200px; height: 300px; margin: 0 auto; } .button { position: relative; width: 300px; height: 50px...原创 2019-05-21 22:48:55 · 367 阅读 · 0 评论