作者曾所在我司广告事业部,广告承载方式是以刮刮卡、大转盘等活动页进行展示,然后用户参与出广告券弹层。
entry与output,顾名思义,就是打包的入口与输出,其实之前我们已经接触了这两个参数,下面详细介绍一下这两个参数的配置。
谈起Wookmark我想做过前端的大侠都不会觉得陌生,它就是远近闻名的流布局jQuery插件,这个插件使用起来非常简单,需要引入两个js:
很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网站里面找一个插件,方便省事,不在像从前那般手敲代码,一敲就是一整天的感觉。
分享一个非常简单的图片预览插件viewer 📷 首先引入js和css viewer.js:下载链接 jquery1.11.3.js:下载链接 jquery-viewer.min.js:下载链接 viewer.css:下载链接 然后引入 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
assets下含有image , js ,css3个文件, 分别放各个资源文件
swiper是一款轻量级以及免费的移动设备触控滑块的js框架,主要运用于移动端的操作,但也可以用于pc端页面效果制作,完全的开源免费,
因为 django-ckeditor-5 里面默认是没有可以选择语言代码块插件的,所以我们需要自己定制这个插件,定制之前我们首先去 GitHub 把 django-ckeditor-5 下载下来,下面直接给出 GitHub 的项目地址:
4.3.轮播图布局和样式 templates/news/index.html <im05canvas合成任意数量图片、合成二维码加文字封装处理代码已上传至github github代码地址:https://github.com/Miofly/mio.git02Webpack01-简单入门之项目打包为了方便测试,建立entrey.js index.html bundle.js等文件03Gatsby中怎么加载图片?StaticImage 是 gatsby-plugin-image 提供的组件,类似html 中的 img 标签,可以在页面中直接使用。05H5-Canvas实战-合成任意数量图片文字-函数封装处理代码已上传至github github代码地址:https://github.com/Miofly/mio.git01vue.js下集成腾讯云实时音视频TRTC(step by step )本文适用于vue.js新人,因为作者也是刚刚接触vue.js,也只记录作者学习过程。023gulp之自动化静态资源压缩合并加版本号这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。01Error: Cannot find module 'gulp-clone'问题的解决安装完gulp环境,并且配置好gulpfile.js,执行静态文件压缩和代码混淆时,出现如下错误: Error: Cannot find module 'gulp-clone' Error: Cann04基于 jQuery支持移动触摸设备的Lightbox插件:Swipebox使用说明Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放。0255. Vue webpack的基本使用webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;02JS批量打包下载图片(笔记) <button onclick="packageImages()">packageImages</button> <script src="03js 图片与base64互相转换参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html03功能强大的 JS 文件上传库:FilePond这是 HelloGitHub 推出的《讲解开源项目》[1]系列,今天给大家推荐一个 JavaScript 开源的文件上传库项目——FilePond02自己用jQuery写一个瀑布流这个月一直在忙工作。一直没有机会学习新的知识。前两天,突然想写一个瀑布流代码。倒不是找不到瀑布流代码。而是我想自己练练脑子。 首先,先考虑思路。所有的图片,全部采用相对父目录定位的方式。然后用jQuery来找出它应该排在什么位置。最终,达成瀑布流的效果。 想再多没用。开干。01体验“超级无敌”的文件上传组件bootstrap fileinput网页开发最最重要最最基本的就是富文本编辑器和文件上传,开始我迷信百度的ueditor和webupload,结果总是别扭,看来不能迷信BAT啊。富文本用了froala,文件上传早点用bootstrap fileinput那多炫啊。03那些延时加载图片的开源插件图片延时加载技术对大流量的网站来说是十分实用的。目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源。04Hello Vue 3,晒晒我的 JYM。最近在 Twitter 总刷到有人分享 Twitter circle,感觉挺好玩,所以想能不能拿掘金用户公开数据搞个类似的,比如晒晒我的 JYM。01html2canvans实现浏览器快速截图(这里有demo哦)更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/12005593403urule项目启动与前端开发方法将四个模块引入(urule-console, urule-core, urule-parent, urule-springboot)03Hexo添加PWA支持Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。01Node.js 服务 Docker 容器化应用实践本篇不会讲解 Docker 命令的使用、安装等,因为在之前一篇文章 【一文零基础教你学会 Docker 入门到实践029012教你如何使用gulp4开发项目脚手架由于本文重点是介绍gulp4.0搭建脚手架的思路,相关插件的用法以及项目结构的设计,由于gulp的基本用法很简单,如果不熟悉可以移步官网自行研究学习。该脚手架的设计思路和功能如下:01高质量编码-轨迹管理平台(前端html)介绍一下前端开发思路,百度鹰眼轨迹管理平台是用ES6、React、Reflux开发的。自己开发的简单轨迹管理平台Demo是使用Backbone和marionette开发的。下面截图介绍一下前端思路。00工作实战案例,瀑布流布局实现(方法:CSS3,原生JS,jQuery)。涉及技术点: HTML + CSS简单布局 jQuery基础运用,瀑布流布局实现3种方法:原生JS,jQuery,CSS3 CSS3版本: 瀑布流布局(CSS版本) 代码: /*css代码*/013-1 Loader是什么前面说过,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),我们也看到了webpack对js文件的打包功效和基础配置。 但是,前端代码并不只有JS,还有比如html,css和图片文件等。这个时候,webpack能否成功打包呢? 我们来试一下,改写content.js如下:06EasyUI日期时间框DateTimeBoxWEB DEMO 日期时间框 DateTimeBox image.png 流式日期时间框 image.png <!DOCTYPE html> <html> <HTML> <head> <HEAD>02canvas生成图片今天接到个小需求:前端生成个二维码并且以img标签的方式在web上展示出来。 二维码就不用说了,搜一下实现的各种插件一大堆,这里我用基于jquery的qrcode插件生成一枚。look~ <!DOCT06设计模式 - 代理模式 - JavaScript代理模式可以解决避免对一些对象的直接访问,以此为基础,常见的有保护代理和虚拟代理。保护代理可以在代理中直接拒绝对对象的访问;虚拟代理可以延迟访问到真正需要的时候,以节省程序开销。02简单几步,让微信小程序变身 H5 网页? | 云开发实战我是 盛瀚钦,沪江 CCtalk 前端开发工程师,Taro 框架的 issue 维护志愿者,主要侧重于前端 UI 编写和团队文档建设。04我对JS延迟异步脚本的思考我一共写了2个async和2个defer标签,其它的都是普通标签.其中async1.js里面有4000行代码,其它都是一个console.log而已02简单几步,让微信小程序变身 H5 网页? | 云开发实战我是 盛瀚钦,沪江 CCtalk 前端开发工程师,Taro 框架的 issue 维护志愿者,主要侧重于前端 UI 编写和团队文档建设。02HTML5上传图片,后台使用java <script src="${base_path}/view/html/js/flexible.js"></script> <script src="${base_path}/view/html/lib/jquery.js"></script> <script src="${base_path}/view/html/lib/mobileBUGFix.mini.js"></script> <script src="${base_path}/view/html/lib/fastclick/fastclick.js"></script> <script src="${base_path}/view/html/lib/exif.js"></script> <script src="${base_path}/view/html/lib/jquery.base64.min.js"></script> <script src="${base_path}/view/html/js/common.js"></script> <script src="${base_path}/view/html/js/membercenter/certification.js"></script>01【工具】fis3 - 语法教程(2)之定位资源针对html,我们可以对script\link\style\video\audio\embed等标签的src或href属性进行分析。02使用交叉点观察器延迟加载图像以提高性能在自己平时浏览一些大量图片类的网站时,你会发现无论是你pc端下拉滚动条,还是移动端手动滑屏时,最终呈现的图片有时候会有所延迟,这是一种预先加载图片资源的方式,也就是俗称懒加载,实现该效果,通常有两种方式,分别是线性式(下拉窗帘式的)和渐进式(拨开晨雾见日明)图片加载,至于前者这里暂且不谈,本文主要是介绍后者,在本文中主要给img标签添加一data-src属性(实际图片URL),以及src属性(存储相同图像的非常小的分辨率路径图片),在加载图片时,给用户过度从模糊淡入到图片清晰,当然更重要的是其中的js处理,如果文有误导的地方,欢迎路过的老师多提意见和指正01jQuery之datetimepicker控件(时间单位精确到分钟)一、效果图 image.png image.png image.png image.png 二、代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=103Viewer.js 图片预览插件 实现效果代码<link rel="stylesheet" href="css/viewer.min.css"> <script src="js/viewer.min.js"></script>02编写第二个页面:新闻阅读列表页面关于Swiper组件的官方描述文档: https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html01每天一个设计模式·代理模式代理模式可以解决避免对一些对象的直接访问,以此为基础,常见的有保护代理和虚拟代理。保护代理可以在代理中直接拒绝对对象的访问;虚拟代理可以延迟访问到真正需要的时候,以节省程序开销。01webpack资源管理书接上文,首先对上次的项目进行改造,参考:https://webpack.docschina.org/guides/asset-management/02超级播放器tcplayer如何设置logo点播超级播放器是基于 video.js 框架并结合腾讯云点播业务而开发的视频播放器,采用以 HTML5为主,Flash 为辅的播放方式,在浏览器不支持 HTML5的情况下采用 Flash 播放。播放器界面由 HTML CSS 实现,可以通过 CSS 定制界面。03微信小程序实战--集阅读与电影于一体的小程序项目(一)真正的数据肯定不可能像上面那样写在wxml文件里面,而是从服务器加载的数据,下面模拟从服务器加载数据。02
代码已上传至github github代码地址:https://github.com/Miofly/mio.git
为了方便测试,建立entrey.js index.html bundle.js等文件
StaticImage 是 gatsby-plugin-image 提供的组件,类似html 中的 img 标签,可以在页面中直接使用。
本文适用于vue.js新人,因为作者也是刚刚接触vue.js,也只记录作者学习过程。
这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。
安装完gulp环境,并且配置好gulpfile.js,执行静态文件压缩和代码混淆时,出现如下错误: Error: Cannot find module 'gulp-clone' Error: Cann
Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势,支持桌面电脑的键盘导航,并且支持视频的播放。
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
<button onclick="packageImages()">packageImages</button> <script src="
参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html
这是 HelloGitHub 推出的《讲解开源项目》[1]系列,今天给大家推荐一个 JavaScript 开源的文件上传库项目——FilePond
这个月一直在忙工作。一直没有机会学习新的知识。前两天,突然想写一个瀑布流代码。倒不是找不到瀑布流代码。而是我想自己练练脑子。 首先,先考虑思路。所有的图片,全部采用相对父目录定位的方式。然后用jQuery来找出它应该排在什么位置。最终,达成瀑布流的效果。 想再多没用。开干。
网页开发最最重要最最基本的就是富文本编辑器和文件上传,开始我迷信百度的ueditor和webupload,结果总是别扭,看来不能迷信BAT啊。富文本用了froala,文件上传早点用bootstrap fileinput那多炫啊。
图片延时加载技术对大流量的网站来说是十分实用的。目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源。
最近在 Twitter 总刷到有人分享 Twitter circle,感觉挺好玩,所以想能不能拿掘金用户公开数据搞个类似的,比如晒晒我的 JYM。
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/120055934
将四个模块引入(urule-console, urule-core, urule-parent, urule-springboot)
Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。
本篇不会讲解 Docker 命令的使用、安装等,因为在之前一篇文章 【一文零基础教你学会 Docker 入门到实践
由于本文重点是介绍gulp4.0搭建脚手架的思路,相关插件的用法以及项目结构的设计,由于gulp的基本用法很简单,如果不熟悉可以移步官网自行研究学习。该脚手架的设计思路和功能如下:
介绍一下前端开发思路,百度鹰眼轨迹管理平台是用ES6、React、Reflux开发的。自己开发的简单轨迹管理平台Demo是使用Backbone和marionette开发的。下面截图介绍一下前端思路。
涉及技术点: HTML + CSS简单布局 jQuery基础运用,瀑布流布局实现3种方法:原生JS,jQuery,CSS3 CSS3版本: 瀑布流布局(CSS版本) 代码: /*css代码*/
前面说过,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),我们也看到了webpack对js文件的打包功效和基础配置。 但是,前端代码并不只有JS,还有比如html,css和图片文件等。这个时候,webpack能否成功打包呢? 我们来试一下,改写content.js如下:
WEB DEMO 日期时间框 DateTimeBox image.png 流式日期时间框 image.png <!DOCTYPE html> <html> <HTML> <head> <HEAD>
今天接到个小需求:前端生成个二维码并且以img标签的方式在web上展示出来。 二维码就不用说了,搜一下实现的各种插件一大堆,这里我用基于jquery的qrcode插件生成一枚。look~ <!DOCT
代理模式可以解决避免对一些对象的直接访问,以此为基础,常见的有保护代理和虚拟代理。保护代理可以在代理中直接拒绝对对象的访问;虚拟代理可以延迟访问到真正需要的时候,以节省程序开销。
我是 盛瀚钦,沪江 CCtalk 前端开发工程师,Taro 框架的 issue 维护志愿者,主要侧重于前端 UI 编写和团队文档建设。
我一共写了2个async和2个defer标签,其它的都是普通标签.其中async1.js里面有4000行代码,其它都是一个console.log而已
<script src="${base_path}/view/html/js/flexible.js"></script> <script src="${base_path}/view/html/lib/jquery.js"></script> <script src="${base_path}/view/html/lib/mobileBUGFix.mini.js"></script> <script src="${base_path}/view/html/lib/fastclick/fastclick.js"></script> <script src="${base_path}/view/html/lib/exif.js"></script> <script src="${base_path}/view/html/lib/jquery.base64.min.js"></script> <script src="${base_path}/view/html/js/common.js"></script> <script src="${base_path}/view/html/js/membercenter/certification.js"></script>
针对html,我们可以对script\link\style\video\audio\embed等标签的src或href属性进行分析。
在自己平时浏览一些大量图片类的网站时,你会发现无论是你pc端下拉滚动条,还是移动端手动滑屏时,最终呈现的图片有时候会有所延迟,这是一种预先加载图片资源的方式,也就是俗称懒加载,实现该效果,通常有两种方式,分别是线性式(下拉窗帘式的)和渐进式(拨开晨雾见日明)图片加载,至于前者这里暂且不谈,本文主要是介绍后者,在本文中主要给img标签添加一data-src属性(实际图片URL),以及src属性(存储相同图像的非常小的分辨率路径图片),在加载图片时,给用户过度从模糊淡入到图片清晰,当然更重要的是其中的js处理,如果文有误导的地方,欢迎路过的老师多提意见和指正
一、效果图 image.png image.png image.png image.png 二、代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
<link rel="stylesheet" href="css/viewer.min.css"> <script src="js/viewer.min.js"></script>
关于Swiper组件的官方描述文档: https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
书接上文,首先对上次的项目进行改造,参考:https://webpack.docschina.org/guides/asset-management/
点播超级播放器是基于 video.js 框架并结合腾讯云点播业务而开发的视频播放器,采用以 HTML5为主,Flash 为辅的播放方式,在浏览器不支持 HTML5的情况下采用 Flash 播放。播放器界面由 HTML CSS 实现,可以通过 CSS 定制界面。
真正的数据肯定不可能像上面那样写在wxml文件里面,而是从服务器加载的数据,下面模拟从服务器加载数据。
领取专属 10元无门槛券
手把手带您无忧上云