flying meng的菜鸟居

之前写过一篇文章「小tips：如何摆脱浏览器下12px的限制」，不少人觉得“有点东西”。文中提到的“transform: scale()”方法也是利用了CSS中 transform 的特点，可以说兼顾了效果和性能。但是它必须考虑height甚至在“动态多行”效果时要用 JS 辅助的特点也很是让人头疼。其实还可以用两种方法解决这个限制：SVG解决文字12px限制SVG 本质上你可以看成是一张图片，给图片设置width:100%就能够跟随容器尺寸拉伸，SVG 也是如。并且由于 SVG 是矢量的，因此，再

图片让web性能变得复杂，也变得有趣了。相信初学者一定看到过这样的案例：“当你在HTML中将一张500*500像素的图像缩小，就会带来不必要的下载开销。”<img src="xxx" width="100" height="100" alt="xxx" />在这个例子中，你让浏览器将图片在视觉上缩小到了100*100，但浏览器还是要下载那张大图。也就是说，下载所需流量没有变。但更要命的是，有些浏览器将缩放图像作为一个“卖点”但其实并没有流行的软件比如 Image Magic 做得好。这就

当然，弹出有两种方式，在此就不显示“在原位置替换”的方式了，在其他博文中有提到。其实这个很简单的实现，就是利用js中document操纵文本的特性。下面是我实现某官网时所用的方式：<div class="footer-top-right-bottom"> <a href="javascript:void(0)" onMouseout="hid...

前言今天看到某网站上有关于“用js实现图片的缓慢伸展”和“图片缩放”的课程，不禁心血来潮，想要写篇文章，也算是纪念一下曾经被难倒的问题吧。先来说一下用js实现图片缓慢缩放效果在我设计的某网页中，有这样一串代码：``` ```最后一个bb6从后面代码可以看出，这是没有相关特效的div，故将其图片放在了css中。（图片的两种引...

不知各位遇到特别长的图片时是怎么处理的？是 截取符合长宽的部分做临时展示？还是 硬要长宽100%模糊（啥也看不清）展示？还是 先拿一个压缩的图片做占位，在鼠标移入或点击时放大预览？今天偶然打开PC端QQ空间时，我发现了一种似乎更好的方式 —— 鼠标移入时在范围内上下滚动图片预览，移出时停止滚动。直到用户点击图片跳转到详情展示：分析这种方式着实让我“眼前一亮”，一定程度上带给了用户新奇的体验感。顺着思路，一键 f12 打开源码，我看到了这样的代码：显而易见，QQ应该是采用了js监听鼠标位

看到手机相册，突发奇想：能不能用实现一个原生的页面“相册”？或者说，传统网页中怎么实现图片预览功能？如果在原生网页中使用插件，那必不可少的要引入一堆东西（并不是鄙视插件，只是为了引入下文，见谅嘿嘿）；但又不是说所有的页面都要用框架…经过一番探索，终于大概实现了想要的功能：大概流程就是：可以点开大图观看、可以左右滑动切换、进入预览时可以从你当前点击的那一张开始浏览。实现相册初始展示页如上所示，我们可以在Header头中添加Viewport配置 —— 移动端页面常备：<meta name=

SVG图——基于数学的描述使用方式：浏览器直接打开在HTML中使用<img>标签引用直接在HTML中使用<svg>标签作为CSS背景如：<img src="如 simplr.svg" width="50" height="50" />和一般img不同，这个地方的width和height可以改！SVG绘图书写格式（大概）其不同图形有不同格...

相信不少人都看过圆明园破损后的图片，残垣败壁，令人惋惜。一些网站为了增加对比程度，将圆明园被毁前后的图片放在一起，这样确实非常鲜明。“对比”已经越来越多地被用来在偏设计的网站中了，而最常见的布局方案是将两张图并排/并列放置。但由此带来的问题是：就像“找不同”一样，人通常只能观察到非常明显的差异 —— 正如上面所说“圆明园对比图”一样。于是还有的网站干脆把两张对比图弄成一张图片展示，简直无语。跟上面描述场景相似的还有一个离谱的解决方案：把两张图放在一个位置上，然后定时来回变换 —— 开发者人为制造一个突兀

众所周知：前端页面上的图片是优化时最重要也是最令人头疼的部分。图片的优化有两种方式： 预加载 和 懒加载。本文结合实际案例，为大家讲述网站中图片的优化妙方。文章不短，但没有废话，肯定令你耳目一新啦

这个想法是来源于「性能优化」中的骨架屏：在图片居多的站点中，这将是非常nice的体验 —— 图片加载通常是比较让人难受的，好的骨架中一般占位图就是低像素的图片，即大体配色和变化是和实际内容一致的。有时候比如图片不固定的，那可以使用算法获取图片的主体颜色（至少得是同色系的吧），使用纯色块占位。再进一步想到，在一些“轻松”的场景下，我们可以让背景色/页面主题色跟随轮播图改变。至于效果嘛…你们可以想一下网易云音乐滑动切歌时的背景效果。因为是不固定图片，所以我想到了四种方法：tensorflow.js

<img>是不可替换元素（标签）很奇怪？《CSS世界》作者张鑫旭大大提出了一个观点：替换元素和非替换元素之间只隔了一个src属性！经过“千奇百怪”的验证，至少现在看来，它无疑是正确的。由于我们平时都会这样写：<img src="xxx">，所以我们难免陷入思维定式，认为<img>===图片。But事实完全相反：去掉src的<img>其实就是一...