![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网页制作案例
文章平均质量分 82
神奇大叔
这个作者很懒,什么都没留下…
展开
-
高德地图基本使用
1、引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=创建新应用后的key"></script> 2、创建地图容器并设置大小 #container {width:100%; height: 100%; } <div id="container"></div> 3、创建地图 <script>原创 2020-09-02 22:47:33 · 3096 阅读 · 0 评论 -
列表滑动对应分类列表也变化(如微信联系人、商家餐品列表)
思路:要想左侧分类对应的标题样式和右侧内容滑动到标题对应内容时选中这里采用better-scroll来实现滚动在数据更新后,界面更新时($nextTick) 1、通过ref获取右侧每个列表块的高度(每个li) 2、实时获取当前滚动条的y坐标 3、利用计算属性(数据变化就会执行)返回当前y坐标应该对应的index 如li高度为100,200,300,当y为220时,应返回坐标1 4、将index和左侧列表的index对比选中样式代码示例:<template> //左侧分原创 2020-05-29 23:14:04 · 456 阅读 · 0 评论 -
flutter 底部导航栏使用BottomAppBar组件和floatingActionButton浮动按钮组件实现中间嵌入式圆形导航
底部导航栏使用BottomAppBar组件 底部导航栏除了可以使用BottomNavigationBar固定样式外,还可以自定义导航栏中的按钮 BottomAppBar( color:, 底部导航栏颜色 shape: CircularNotchedRectangle(), 有缺口的圆形矩阵,用来放置浮动按钮 child...原创 2020-04-26 17:05:50 · 1954 阅读 · 0 评论 -
flutter 利用浮动按钮,实现导航栏中间放置圆形按钮效果
思路:在Scaffold中设置浮动按钮->外包Container设置宽高来控制按钮大小->利用浮动按钮的位置参数floatingActionButtonLocation设置值为centerDocked定位到底部导航栏的中心靠上->设置外包容器的圆角和背景色实现按钮的边框效果->利用按钮大小和margin等布局遮盖掉导航栏中心原来的图标->在事件中根据导航栏索引...原创 2020-04-16 16:00:36 · 1867 阅读 · 0 评论 -
微信答题程序案例
Page({ /** * 页面的初始数据 */ data: { page:'startPage', currentTimu: {}, currentNum: 0, timuList:[], score:0, styleArr: ['optionsItem', 'optionsItem', 'optionsItem','optio...原创 2020-03-10 08:47:18 · 610 阅读 · 0 评论 -
豆瓣api访问流程
豆瓣api访问流程:1、https://api.douban.com2、通过文档查找接口Resources URI:如/v2/movie/in_theaters添加到1后面3、将?apikey=0b2bdeda43b5688921839c8ecb20399b添加到2后面原创 2020-02-18 21:52:22 · 1274 阅读 · 0 评论 -
es7 async、await定义异步函数执行同步操作
ES7 async定义函数 语法: async function 函数名() { await 异步操作 await 异步操作 } 1、将异步操作按同步操作执行,即上一步未执行完会阻塞当前函数的进程,不影响主线程 1、一般await后接promise对象 2、await 函数(); 返回值为函数的返回值 3、await Promise.resolve(内容......原创 2020-02-05 22:11:01 · 925 阅读 · 0 评论 -
zepto 移动端案例(动画等)
处理:滑动页面事件、动画效果(缩放、各方位滑动、抖动、明暗)、代码示例:js文件:$(function(){ //定义方向对象 var direction={up:1,right:2,down:3,left:4}; //初始化两个页面坐标 var now={col:1,row:1}; var last={col:0,row:0}; //上一...原创 2020-02-03 15:52:57 · 709 阅读 · 0 评论 -
zepto ajax接收验证码
zepto的ajax方式和jq一样node.js服务器设置:/** * Created by 10853 on 2020/2/1. *///引入模块var express=require('express');//创建服务器var app=express();//开启服务器并监听端口app.listen(3000,function(){ console.log('...原创 2020-02-02 17:01:22 · 226 阅读 · 1 评论 -
AngularJs 邮箱路由模块化案例
补充:同级controller之间的通信,依靠传入$rootScope全局变量(自身是一个对象)并在注入信息的函数中添加该参数实现模块化样式:html文件:<!DOCTYPE html><html ng-app='app'><head lang="en"> <meta charset='utf-8'/> <title ng-bi...原创 2020-01-19 20:24:34 · 244 阅读 · 0 评论 -
AngularJs 评论案例
<html ng-app='app' ng-controller='main' ><head> <meta charset="utf-8"> <meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,mi...原创 2020-01-18 22:19:55 · 198 阅读 · 0 评论 -
百度地图 标注点、图层
标注点地址图层地址标注点 创建标注点对象 var 标注点对象=new BMap.标注点类型(point坐标点); 添加标注点到地图 map.addOverlay(标注对象);自定义标注点 var 标注点图案对象=new BMap.Icon('img路径',new BMap.Size(设置图案宽,设置团高)); 不带px的数值 var 标注点=new BMap.Marker(...原创 2020-01-17 17:12:29 · 1353 阅读 · 0 评论 -
百度地图 地址解析和逆地址解析
教程地址 地址解析:将地址转换成经纬度坐标 逆地址解析(地理逆编码):将经纬度转换成地址 提供的转换类:BMap.Geocoder():逆/地址解析,用于坐标与地址间的相互转换。 提供的方法: (1)逆地址解析:对象.getLocation(point坐标点,function(info返回的地址信息){传入一个坐标点,返回坐标点的具体地址描述}) (2)地址...原创 2020-01-17 15:52:49 · 1953 阅读 · 0 评论 -
百度地图 控件的摆放、显示和自定义控件
教程地址代码示例<html><head> <meta charset="utf-8"> <meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'> <...原创 2020-01-17 14:54:31 · 1589 阅读 · 0 评论 -
百度地图SDK注册、引入
百度地图引入步骤代码示例:<html><head> <meta charset="utf-8"> <meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>...原创 2020-01-16 22:03:13 · 147 阅读 · 1 评论 -
日历插件
html文件:<!DOCTYPE html><html><head lang="en"> <meta charset='utf-8'/> <title>lesson1_自定义日历插件</title> <link rel="stylesheet" type="text/css" href="schedule/s...原创 2020-01-16 20:45:27 · 615 阅读 · 0 评论 -
cookie实现页面保持登录案例
后台设置cookie写入,前台读取写入的cookie到页面,穿插js判断前台:<html><head> <meta charset="utf-8"> <title></title> <style> .dl{ border:solid 1px black; width:300px; } .dl2{...原创 2020-01-13 17:16:08 · 699 阅读 · 0 评论 -
实现音乐播放器(播放/暂停、可拉动进度条)
html文件:<div class="m-box"> <audio src="img/mo.mp3" id='aud'></audio> <div class='m-music'> <div class="m-button"> <a class="m-control"><img src="img/pl...原创 2020-01-12 16:39:28 · 2254 阅读 · 0 评论 -
网页布置技巧
实现父div宽高由内部元素撑开添加属性:overflow:hidden;原创 2020-01-09 16:45:23 · 108 阅读 · 0 评论 -
分页器实现
产生逻辑顺序:首页->上一页->前省略号->起始页面->默认页面->截至页面->后省略号->末页->尾页js文件: $(function(){ var all=15; var now=1; $.get('ll.php',function(res){ //获得页数,动态增加分页器 var pages=Math.ceil(JSO...原创 2020-01-08 16:52:53 · 227 阅读 · 0 评论 -
字体图标的使用
引入文件夹原创 2019-12-25 09:37:51 · 94 阅读 · 0 评论 -
自定义ajax实现瀑布流
前台:<!DOCTYPE html><html><head > <meta charset='utf-8'/> <title></title> <link rel="stylesheet" type="text/css" href="css/initial.css"> <style> ...原创 2019-12-24 16:28:28 · 101 阅读 · 0 评论 -
Ajax 原生ajax-xhr对象文件上传进度条案例
<input type='file' > 浏览文件夹document.querySelector(‘input’).files; 获得文件对象中的文件集合对象xhr.onload.progress=function(){}; 上传还在进度时的回调函数event.lengthComputable; 进度度量衡,100%时返回false,否则返回true;event.load...原创 2019-12-22 22:36:29 · 740 阅读 · 0 评论 -
php 基于数据库的前后台交互登录、注册案例
前台:<html><head> <meta charset="utf-8"> <title>前后台交互案例</title> <script src="jquery-3.4.1.js"></script><body> <span>用户名:</span><inpu...原创 2019-12-19 11:56:12 · 671 阅读 · 0 评论 -
php Ajax前后台交互案例
前台:<html><head> <meta charset="utf-8"> <title>前后台交互案例</title> <script src="jquery-3.4.1.js"></script><body> <span>用户名:</span><inpu...原创 2019-12-18 10:04:42 · 272 阅读 · 0 评论 -
jq 延迟案例(随机照片延迟出现,发扑克式特效)
延迟执行 delay $('选择器').delay(毫秒数)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> img{ position: abso...原创 2019-12-13 11:46:25 · 187 阅读 · 0 评论 -
百叶窗照片(偏js版、jq精简版)
问题 如何计算每个图片分配的位置大小 当一个图片完全展开时,如何计算其他图片分配的位置大小 如何设置未点击时的黑幕效果和点击后的去除(即利用定位,使得黑幕div和img重叠,然后设置黑幕div的背景颜色和透明度) 压缩图片的效果是怎么实现的(利用overflow多余效果不显示); 如何清除动画累计 jq是使用.eq()来进行类似数组下标操作的 添加方法 $('选择器').fin...原创 2019-12-12 22:03:18 · 262 阅读 · 1 评论 -
jq 呼吸轮播图
问题:淡入淡出时间清除动画累积代码示例:<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0...原创 2019-12-12 12:11:55 · 201 阅读 · 0 评论 -
无线滚动瀑布流(内容无限加载)
解决问题:当图片最后一张顶部到整个div顶部不包括边框的距离大于浏览器不包括上窗口的高度加上滑动滚动距离时,加载后面的图片浏览器不包括上窗口高度:document.documentElement.clientHeight;代码示例:<!DOCTYPE html><html><head lang="en"> <meta charset="...原创 2019-12-09 12:26:15 · 457 阅读 · 0 评论 -
普通瀑布流(错落有致的排列,水平不对齐,左右对齐,下一排的图片的第一张位于上一排高度最小的照片的下面)
解决问题:如何获得每一排存放的图片数,并且能随着窗口的改变而改变(考虑小数的情况)如何获得包裹整个图片的div的宽度如何获得第一排的最小高度如何使第二排的第一张图片的高度是第一排最小高度加上本身高度如何使得之后的排都按照前两排的格式排列,即如何改变第一排高度内数组的值图片的定位问题代码示例<html> <head> <meta charset="...原创 2019-12-09 11:12:00 · 1582 阅读 · 0 评论 -
JSON 无中生有创建节点方式书城案例
问题: 将json数据转成js对象从对象中拿数据如何避免通过搜索(如当前节点.parentNode)获取的节点,同一时刻,页面上只能出现一个的情况无中生有创建div时,如何设置样式位置利用标签的行、块属性设置样式位置代码示例:<html> <head> <meta charset="utf-8"> <title></ti...原创 2019-12-07 22:49:02 · 222 阅读 · 0 评论 -
js 不使用自带轮播方法的轮播图
解决问题:图片的显示问题图片的改变和下面选择圆圈的联动问题圆圈的改变和图片的联动问题代码示例:<html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0px; margin: 0px; }...原创 2019-12-07 00:00:34 · 327 阅读 · 0 评论 -
自定义右键菜单
禁止系统右键菜单 document.oncontextmenu=function(){ return false; //false表示事件禁用 };获取鼠标蓝色框选中的内容 document.getSelection().toString(); //火狐不能得到文本框内的内容代码示例:<html> <head> <meta cha...原创 2019-12-04 00:13:50 · 133 阅读 · 0 评论 -
html 模拟百度和模拟360
百度搜索java的urlhttps://www.baidu.com/s?wd=java&rsv_spt=1&rsv_iqid=0x9f31aa5c00116d2b&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=monline_3_dg&rsv_enter=1&rsv_dl=...原创 2019-10-17 20:06:40 · 907 阅读 · 0 评论 -
图片验证码
图片验证<html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin:0px; padding: 0px; } .big{ height:600px; width:60...原创 2019-12-02 18:47:20 · 119 阅读 · 0 评论 -
内部添加滚动内容
**要点**确定滑动方块的高度 总边框高度和总内容高度的比值和滑动方块的高度和滑动条的高度相等确定滑块下滑的距离占总滑动条的比例和内容上滑的距离占总内容高度的比例相等判断鼠标滑轮滚动方向后,设定每次滑动的距离,再加上到原先拖动时要改变的距离内<html> <head> <meta charset="utf-8"> <title&g...原创 2019-12-02 16:48:47 · 184 阅读 · 0 评论 -
图书管理系统 二维数组或对象
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p align="center"> <span>书名</span><input type="text" id=...原创 2019-11-24 16:28:00 · 446 阅读 · 0 评论 -
小米官网
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .white_nav{ width: 100%; height:100px; l...原创 2019-11-21 20:40:03 · 839 阅读 · 0 评论 -
金立导航
css文件.nav{ width:100%; height:93px; border-bottom: 1px solid #d5d5d5; }.wrap{ width:900px; height: 93px; margin-left:125px; }.logo{ width:270px;}.logo,.nav_right{ float:left;}.logo...原创 2019-11-17 23:23:19 · 171 阅读 · 0 评论 -
百度周边案例 弹性盒子
css文件body{ background-color: #F4F4F4;}.nav{ width:100%; height: 75px; background-color: #ff4433; display: flex;}.arrow,.search{ width:75px; height: 75px;}.arrow{ background-image: url(i...原创 2019-11-17 17:15:45 · 170 阅读 · 0 评论