vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能. CSS Sprites能减少图片的字节. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变.维护起来更加方便. 3.主要代码: <template> <div class="t…

1.通过命令新建一个vue项目 环境要求: 安装有 Node.js. vue. vue-cli . 创建项目: vue init webpack tx_demo cd tx_demo 进入项目,下载依赖: // 最新版已经无需安装依赖初始化,可直接运行下面的命令 npm install 或者 cnpm install 运行项目: npm run dev 2.由于我用的是sass样式,所以安装sass依赖 npm install node-sass sass-loader 3.配置雪碧图功能 先安…

一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webpack-spritesmith可以将所有的icon小图标整合成一张图片.每次都只会请求一次,同时还能自动生成定位样式,对于都是同尺寸的小图标,直接可以使用. 三.废话少说,直接来code 1.我是使用vue-cli3配置这个webapck的插件的.如果使用cli2的网上也很多,自行查找 2.查阅资料…

1.先安装插件 npm install --save-dev webpack-spritesmith 2.配置webpack 配置之前 先引入var SpritesmithPlugin = require('webpack-spritesmith'); 在webpack.config.js的插件里面写(plugins) new SpritesmithPlugin({ // 目标小图标,这里就是你要生成的图片的目录 src: { cwd: path.resolve(__dirname, './sr…

一.配置eslint module.exports={ "printWidth": 240, //一行的字符数,如果超过会进行换行,默认为80 "tabWidth": 2, //一个tab代表几个空格数,默认为80 "useTabs": false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减 "singleQuote": true, //字符串是否使用单引号,默认为false,使用双引号 "s…

//vue.config.js const path = require("path"); const SpritesmithPlugin = require("webpack-spritesmith"); //引入雪碧图 module.exports = { // 请求基本路径(是否在根目录下) baseUrl: "process.env.NODE_ENV" === "production" ? "/"…

因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最近用vue2 + webpack重新构建了下,代码量挺简洁的,逻辑也很简单,适合新手看看,顺便求几个star 项目名称: FrameSpriteMaker 简称 FSM github项目地址:https://github.com/pspgbhu/FrameSpriteMaker-vue…

花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显,在缩放的屏幕上人物还是按照原尺寸大小显示 后来临时留了一节预备的方案:CSS3的scale处理直接可以让元素缩放 通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放,目测还是不错. 但是这会带一系列的计算问题,因为通过sacle缩放后的元素,在浏览器布局中还是按照原尺寸计算的,所以这样的方案…

本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点. 雪碧图 雪碧图实例:淘宝PC端 将多张小图放至一张大图 使用的时候,通过background-position调整显示的位置,如下图所示: 雪碧图的使用方法 使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数.因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chro…

V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/detail/wx247919365/8685489 提示:如果不是win7或者程序运行不起来的话请下载微软的.net framework 3.5运行环境 一.增加客户端版本更新提醒 服务器端版本更新后,客户端如果没有更新要最新版本,会在标题中提示,点击更新按钮出现版本更新的简单介绍 二.删除多余的选择背…