某一天在 B站 学习的时候，发现 B站 已经开启了秋季主题，并且在头图的这个交互上还内有乾坤。随着我们的鼠标变换位置，头图也跟随着我们的鼠标位置进行变换，配上秋季主题，显得特别治愈。（如下图）
实践出真知，有的时候看到一些有趣的现象就想着用自己所学的知识复现一下。 boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目，在 IOS 上实现了这样一个小动画效果，看上去蛮炫
一、前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！本篇为先占个坑，以后慢慢填^_^！！！ CSS3 Filter
如果A网站和B网站, 同时使用了https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js的资源, 在访问其他网站A时, 浏览器会缓存jquery.min.js资源文件, 访问网站B时,就可以免于下载jquery.min.js的文件, 这样既节省了服务器流量, 又提升了资源加载的速度, 一举两得~
在现在做页面很多时候都会用上动画效果。比如下拉菜单，侧边搜索栏，层的弹出与关闭等等。通常我们实现这些动画效果可以采用 JavaScript与CSS3两种方式来实现。本文主要介绍JavaScript动画，CSS3的动画下次在总结。对于JavaScript动画 目前有很多的动画插件库，如: Jquery等等.以下就简单介绍以下JavaScript动画的实现原理。
sharp 是 Node.js 平台上相当热门的一个图像处理库，其实际上是基于 C 语言编写 的 libvips 库封装而来，因此高性能也成了 sharp 的一大卖点。sharp 可以方便地实现常见的图片编辑操作，如裁剪、格式转换、旋转变换、滤镜添加、添加水印等。
今天我们将向大家展示如何制作SVG动态模糊效果，并将其应用于HTML元素的常规JS或CSS动画。
大屏数据的页面里面包含了一些3D地图和世界航班趋势图，反应上来有个问题，就是动画比较卡顿。
本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣、大胆的的动效。
室内全彩大屏数据的页面里面包含了一些3D地图和世界航班趋势图，反应上来有个问题，就是动画比较卡顿。
但是使用这种方法得出来的效果不理想(比如图片模糊后四周缩小)，而且不能局部控制图片
9.26~9.28 目的：想为社团做一个自己的宣传网站来迎新，同时积累UI设计经验 http://comesherry.xyz 感受或实际遇到的问题 （1）UIPC移动端兼容问题，（bootstrap 和layui提供的模块化帮助我搭建了自适应布局，不希望移动端出现的就不让它出现） （2）素材加载问题，图片视频导致网站加载缓慢（目前图片采用懒加载lay-src，视频预加载处理，并做了剪短处理） （3）图片大小一致性问题，大小不同杂乱，而且影响移动端响应式的展示。（word 的图片统一大小很好用）但直接修改图片尺寸图片质量会降低， 推荐方案：ps处理兼顾品质和尺寸，并且对不同端提供相同内容不同品质的图片；或者ps 文件>导出>web格式（选择jpeg）,品质和大小还是很可观的 （4）视频模糊，还想用，（加上浅灰色背景）视觉上有变强的感觉 （5）视频背景头一次用，还有待完善 （6）更加熟悉layui，但还不能跳出bootstrap他的范例，将功能实现在自己的框架上，而非他定义的容器中 （7）layui弹出层是最大的惊喜，boostrap封闭的结构不太令人舒服，layui的样式更加自由丰富 (8)1M带宽服务器不推荐图片展示，目前已经换成1～5M轻量级服务器了，打开速度快点不止5倍
本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：
https://github.com/androidmumo/Bing-upyun
基于Jquery开发的Autocomplete插件。具有易于使用，配置简单，既可以利用Ajax读取数据也可以直接从本地获取数据。
分享一个bootstrap简洁居中毛玻璃登录源码，感觉很好看，希望大家喜欢。随机图调用杨小杰api接口 做了两个，一个是原版的，一个是emlog登录的，还有一个typecho版本的 原版源码： <html> <head> <meta itemprop="name" content="杨小杰博客后台"/> <meta itemprop="image" content="http://www.youngxj.cn/logopic.png" /> <meta name="descri
img标签的src为空或者加载失败，浏览器都会自动加上一个边框，一定程度上影响美观。
1、动画的原理：动画是利用人眼的视觉残留特性而达成的一种视觉效果，即人眼看到的影像会有短暂时间的残留，这个时间约为1/24秒，当一段连续变化的影像 在较短时间内变化时就会给人以流畅的感觉。根据1/24秒这个数据我们可以推断出，当连续变化的影像为每秒24次的速度就能给人流畅的感觉。 所以电影的帧频为24帧，而电视一般采用的是25帧和30帧两种制式 2、帧：动画中最小单位的单幅影像画面,在讲多少帧的时候指的就是每秒钟画面切换的次数
响应式（Responsive）设计的目标是要让产品界面能够响应用户的行为，根据不同终端设备自动调整尺寸，带给用户良好的使用体验。这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件，它们能够帮助你在 Web 项目中实现有吸引力的图片滑块效果。
web前端 —— 移动端知识的一些总结 个人在移动端的一些总结归纳，有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应
Jquery Lazyload是一款网页图片延迟加载JS插件，本文介绍该JS的使用方法。
所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。看看你有没有这JavaScript
通俗地说网页图片延迟加载即是加载网页的时候，把本该一同加载的图片用体积很小的图片暂时替换加载，达到减少加载体积的目的，当用户浏览到图片的区域时再把原图片加载回来（大致是这个意思）！图片延迟加载对网页的加载速度的提高很有帮助，同时实现网站图片延迟加载也不繁琐，因此前人已为我们准备好了所有工作。
https://github.com/kingwsi/compress-pic/blob/master/index.html
作者：matrix 被围观: 4,685 次 发布时间：2011-10-01 分类：Wordpress 兼容并蓄 | 2 条评论 »
如何用JS实现一个类似搜索框的输入框呢，再填充完失去焦点时，自动填充配置项，最终效果如下图： 实现很简单，但是易用性会上升一大截，需要用到的有jquery-ui的autocomplete，jquery
插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 TheaterJS: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程序 regulex: 用于生成 正则表达式 的
例：box-shadow：10px 10px 5px 5px red inset;
喜欢就点一下star哟，谢谢亲的支持 https://github.com/wsk1103/Used-Trading-Platform
jquery的灵活性为我们所熟知并热爱。 给人映象最深的jquery应用通常与图片相关。 事实上，你可以借助jquery来处理图片达到给你的项目增添令人惊奇的功能！ 这里筛选了10个非常有用的jque
LazyLoad大家再熟悉不 过的一个jquery插件了，它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才会加载并显示出来，这和图片预加载的处理方式正好刚好相反。图片不多 的页面时，效果并不太明显，但是当页面大图片比较多的时候，这种效果就比较显著了，明显加快了页面的加载速度。浏览器将会在加载可见图片之后即进入就绪状 态，在某些情况下还可以帮助降低服务器负担。 因此，比较流行的wordpress主题，typecho主题，emlog主题等都使用了lazyload图片延迟加载来实现快速加载页面。 当然啦，你的网站纯文字的，就没必要多搞个jquery插件了。
偶然间在网上看到的几个图片预览的插件，挺好用的，顺手整理下来。 1：Zoomify – jQuery缩放效果lightbox插件 地址：http://www.dowebok.com/214.html
可以在js里面建个相应文件夹放置，也可分开放置，若图片与其他文件分开记得修改css里面的图片链接地址。
由于现在很多的网站都带有大量的图片，而图片的加载又会特别的慢，特别是在移动端，懒加载就显的特别重要了，说白了就是按需加载，用户要看到哪里就显示哪里，下面来记录一下懒加载的基本实现步骤！
首先这是一款处理表格的js，我们如果写element习惯了会发现其实表格的处理是业务中相对简单的，他没有什么很强的交互，就是拿到数据，按照头部和body对应起来就可以了，更新什么的也是没关系的，因为毕竟可以拿到当前行的数据，调更新接口就可以了，表格能说的就是分页的操作了，很多的js处理这块都不是很友好，分页可以分为客户端分页和服务端分页，一般相对大一点的项目会服务端分页，原因也很简单，每一次拿到的数据都不是很多，都是一页的数据，我们默认一般是5-20条就不少了，这样对页面渲染的压力也不大，但是如果项目或者数据不是很大的情况下还是建议是客户端分页，这样的好处是减少页面的请求次数，提升页面的性能，今天介绍的bootStrapTableJs是一款既可以客户端分页也可以服务端分页的神器，还支持客户端或者服务端模糊搜索等功能
软件开发程序员在整个产品研发的过程中起着很重要的作用，由于经常研究各种技术，他不会精确记得所有语言代码的语法和API，他觉得没有Google和百度，几乎没法工作。他记的只是一个Key，一个如何找寻答案的索引，而不是全部。正所谓“工欲善其事必先利其器”我们程序员也是一样，选择一个好工具可以大大提升开发效率，下面是我使用的一些并且觉得很不错的软件，和大家分享下。最后还会给大家介绍一款我最近在测试全流程一站式的测试神器。
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)
我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作，所以上面显示和隐藏的也只是一个div，而并不是一个图片。下面我就来和小伙伴们讲一个如何对元素的属性进行操作，使其显示或者隐藏！
今天分享的这款就是基于jQuery的瀑布流图片筛选插件，我们可以点击图片分类名称，即可将对应分类下的图片以瀑布流的方式展示出来，这款插件在筛选图片上使用还是比较方便的。
在一些产品演示网站，常常需要这样的效果，把鼠标移到小图的上面，旁边出现这这部分的放大效果，通过这种方式让用户能够详细了解产品的细节。
在前端开发中，JQuery 作为一个广泛应用的 JavaScript 库，为开发者提供了丰富的工具和方法，简化了 DOM 操作、事件处理等繁琐的任务。而在这个庞大的生态系统中，插件机制是 JQuery 的一项重要特性，使得开发者能够轻松地扩展 JQuery 的功能，实现更灵活、高效的前端开发。本篇博客将围绕 JQuery 插件机制展开详细的讲解，带你一探插件的神奇世界。
1.UI.Layout jQuery UI布局插件 官方网站：http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局
一、前端开发入门 在入门阶段，你首先要学会最基本的技能：根据UI的设计稿，实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。 📷 请点击此处输入图片描述 在这个阶段你需要学习： 1、HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发 2、JavaScript基础 掌握JS的基本语法、条件、语句、循环等，学会常用算法，增强逻辑性。 3、常用的前端工具 比如Webstrom、Sublime、Dreamweaver、HBuilder等
灯箱效果是我一直想加又没有加的功能，正好最近百度在推移动落地页检测，顺手做一下优化
通过上面两张图可以看出来，我们既可以用网络图片来实现高斯模糊，又可以用本地图片来实现。
在项目里，有时候会写这样的开关效果，点击开关来回切换，也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。
2015年6月29日更新：本文章发布时间较早，不建议继续阅读，并且该插件后续已经修复此问题，大家可以放心使用。
图片预览的话有很多插件，不过 fancybox 我认为是比较公然好评的一款，之所以使用它也是因为之前把图片预览关掉了（像图片比较多的页面还是比较不方便），优缺点以及在 weblog 里讲了，这里简单记下使用的步骤
“bxSlider”就是一款响应式的幻灯片js插件 bxSlider特性 充分响应各种设备，适应各种屏幕； 支持多种滑动模式，水平、垂直以及淡入淡出效果； 支持图片、视频以及任意html内容； 支持触摸滑动； 支持Firefox，Chrome，Safari，iOS，Android，IE7+ bxSlider使用方法： 加载jQuery库，加载bxSlider插件文件和相关CSS文件； <link href="jquery.bxslider
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
