前端
文章平均质量分 74
伦为JAY下囚
这个作者很懒,什么都没留下…
展开
-
vue实现瀑布流效果
vue实现瀑布流效果一、介绍二、布局原理三、具体实现四、实现效果一、介绍瀑布流,又称为瀑布流布局。是比较流行的一种网页展示形式,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。二、布局原理等宽不等高的图片排列,从第二行开始,图片插入的位置根据上一行插入图片得最低处依次插入,最终形成参差不齐的布局效果。三、具体实现这里是原创 2021-09-03 15:56:45 · 3031 阅读 · 0 评论 -
实现预览图片上下滑动关闭效果
实现预览图片上下滑动关闭效果一、页面结构二、触摸事件概述三、功能实现实现效果今天的项目任务中实现一个瀑布流,点击图片可以实现图片预览、左右切换效果。说干就干,下班时,提交完代码准备溜时,提出一个新需求,在预览图片时添加一个上下滑动取消预览的效果,唉,加吧,我爱加班。这里主要记录一下实现该功能的关键步骤,如下:一、页面结构以下是页面结构内容,css样式及组件内容不在此赘述<template> <div> <halo-dialog class="preview原创 2021-08-27 16:06:19 · 723 阅读 · 0 评论 -
图像裁剪器 Cropperjs
图像裁剪器 Cropperjs1、插件安装2、引入3、代码实现4、效果图5、常用参数options5、常用方法6 、结尾近日前端项目中,需要实现上传图片、支持自定义裁剪,生成海报的功能。该项目采用Taro(react语法)实现。具体实现步骤如下:1、插件安装yarn add cropperjs -S 2、引入在项目中引入cropperjs,一定不要忘记引入样式import Cropper from "cropperjs"import "cropperjs/dist/cropper.css"原创 2021-08-17 18:13:37 · 869 阅读 · 0 评论 -
node抓取豆瓣数据
node抓取豆瓣数据1、准备工作2、安装依赖3、实现代码4、结果实现1、准备工作1)安装node:node下载链接.2)创建项目:使用Express创建项目.2、安装依赖使用npm install(cnpm install、yarn等)安装依赖3、实现代码创建一个movie.js文件,输入以下代码:const fs = require('fs')const axios = require('axios')const cheerio = require('cheerio') // 抓取页面原创 2021-05-17 11:46:09 · 280 阅读 · 0 评论 -
git 常用命令
git 常用命令1、删除远程库2、分支管理查看分支创建分支切换分支创建并切换分支查看提交历史bug分支将指定的提交应用到其他分支查看工作区的状态3、版本回退4、撤销修改5、删除文件6、多人协作的工作模式7、区别理解1、删除远程库使用命令git remote rm name (解除了本地与远程的绑定关系,并不是物理上删除了远程库)使用前建议使用 git remote -v 查看远程库信息2、分支管理查看分支使用命令git branch 可以查看所有分支,当前分支前面会有(*),操作如下:$ gi原创 2021-05-14 17:35:47 · 518 阅读 · 0 评论 -
跨域之JSONP
跨域解决方案之JSONP什么是jsonp什么是同源策略jsonp的原理jsonp的实现方式jsonp为什么不支持POST?什么是jsonpJsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么我们从其它网站获取数据需要通过jsonp技术来获取呢?那是因为同源策略。什么是同源策略同源策略,它是由 Ne...原创 2019-09-22 19:39:32 · 410 阅读 · 0 评论 -
PHP+Bootstrap+原生Ajax+MySQL实现前后端交互(下)——实现分页效果
jQuery实现分页效果思路动态创建页码切换功能分页效果的核心实现效果思路通过总数据的条数/每一页显示的条数,并向上取整,就可以得到页码数,并动态添加到ul中。动态创建页码//每一页显示的信息数 this.num=2; //当前页面的索引 this.index=0; //找到容器ul this.oul=document.queryS...原创 2019-09-21 12:19:36 · 2477 阅读 · 37 评论 -
PHP+Bootstrap+原生Ajax+MySQL实现前后端交互(中)
前后端交互项目修改功能思路修改功能的js代码修改功能的PHP代码实现效果删除功能思路实现删除功能的js代码实现删除功能的PHP代码实现效果在上个文章中介绍了如何使用bootstrap进行布局,使用PHP操作数据库,通过ajax实现数据的查询和添加功能,在这篇文章中,继续实现ajax交互项目的修改和删除操作。修改功能思路通过点击页面上的修改按钮,将会弹出模态框,并将这一行的信息对应显示在模态...原创 2019-09-21 11:53:12 · 1618 阅读 · 0 评论 -
PHP+Bootstrap+原生Ajax+MySQL实现前后端交互(上)
前后端交互简介实现布局Bootstrap布局代码MySQL数据库实现查询功能添加记录修改记录删除记录简介本案例使用Bootstrap进行响应式布局,通过PHP以及MySQL实现前后端交互,使用Ajax技术实现页面的无刷新加载。实现布局布局采用前端框架Bootstrap实现响应式布局,快速、高效。注:使用Bootstrap布局,需注意,Bootstrap是依赖于JQuery之上的,所以需...原创 2019-09-21 11:27:47 · 4108 阅读 · 3 评论 -
轮播图
轮播图布局实现入口函数小圆点切换实现上一张按钮下一张按钮创建定时器布局利用jQuery实现小米轮播图效果。实现该效果由三部分组成:图片、切换上一张和下一张按钮以及图片下方小圆点。在实现过程中,添加了定时器,开始时,图片自动的从右到左切换,底下的小圆点也在相对于的切换,点击上一张或者下一张按钮的时候,图片和小圆点也在对于的切换。布局与样式代码如下:HTML<body> ...原创 2019-09-13 21:22:38 · 605 阅读 · 0 评论 -
js中数组与字符的方法
js中数组与字符的方法Array对象数组属性Array对象方法(常用的)ES5新增的数组方法字符方法常见的字符方法Array对象Array对象用于在变量中存储多个值:var arr=[“abc”,“name”,“user”];数组元素的索引从0开始,到数组的长度-1结束。数组属性属性描述constructor返回创建数组对象的原型函数length设置或返回...原创 2019-09-07 18:00:58 · 309 阅读 · 0 评论 -
JS笔记
JS笔记js的组成BOMwindow身上的方法window下的子对象DOM选择器js的组成js由ECMAScript(语法标准)、DOM(网页)、BOM(浏览器)三部分组成BOMBOM是js中的顶层对象,所有的全局都属于window。BOM和DOM和ECMAScript的关系:BOM是运行平台,BOM规则建立在ECMAScript的规则之上;DOM是运行在平台上的页面;ECMAS...原创 2019-08-30 19:07:22 · 252 阅读 · 0 评论 -
原生JS实现省市县三级联动
文章目录介绍思路实现页面初始化效果编写JS文件area.jsmain.js注意介绍做页面开发或客户端程序开发,都会碰到几个下拉菜单联动的情况,例如在网上买东西的时候,就会选择收货地址,以及在填写家庭信息的时候,都会用到常见的省,市,区三级联动。思路页面加载的时候显示的是默认的初始省市县,通过选择不同的省和市,则该省对应的市和县显示为默认。当点击省份列表中的某一项,此时触发省份下拉框的on...原创 2019-08-22 16:16:03 · 5510 阅读 · 0 评论 -
jQuery实现tab选项卡切换
文章目录项目效果项目<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07-tab选项卡</title> <style> *{ margin: 0; ...原创 2019-06-16 19:41:27 · 1508 阅读 · 3 评论