首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何让你 JS 代码写得更漂亮

    作者:会编程银猪 www.renfed.com/2017/04/29/effective-js-optimize 网上有不少关于 JS 编写优化建议,这里我根据自己经验提出一些比较有用建议。...按强类型风格写代码 JS是弱类型,但是写代码时候不能太随意,写得太随意也体现了编码风格不好。...下面分点说明: (1)定义变量时候要指明类型,告诉JS解释器这个变量是什么数据类型,而不要让解释器去猜,例如不好写法: var num, str, obj; 声明了三个变量,但其实没什么用...因为JS最终都会被解释成汇编语言,汇编语言变量类型肯定是要确定,你把一个整型改成了字符串,那解释器就得做一些额外处理。...这样写也不太好,虽然它是符合JS语法,但这种编码风格是不好。使用你这个函数的人会有点无所适从,不敢直接进行加减乘除,因为如果返回字符串进行运算的话值就是NaN了。

    2K20

    wow~ 让网站动起来动画库,真漂亮,再也不用写复杂动画代码了~wow.js

    前言 越来越多网站特效很漂亮,其中就有一种我很喜欢动画,就是当滑动到某个元素时候,元素就是出现动画效果,如:缩放、旋转、滑动等。...感觉很漂亮,之前在做企业站时候,基本上都是自己手写,有点麻烦而且效果也不是很好,最近发现了一款比较好用动画库~~~~wow.js,可以轻松网站具有这种特效。...感受一下吧 安装使用 Wow.js 动画效果依赖于第三方库,官方推荐是:Animate.css 当然也可以使用其它动画库,需要配置一下 wowo.js。...引入动画库 引入并且使用 wow.js </script...总结 wow.js 是一款不错js特效库,可以方便给元素添加上滑动出现效果。大大提高了网站美观和交互性,并且降低了开发时间和成本。

    1.7K10

    使用 Prism.js 实现漂亮代码语法高亮

    给大家推荐一个代码高亮显示东东,直接使用一个 JavaScript 库 —— Prism 是一款轻量、可扩展代码语法高亮库,使用现代化 Web 标准构建。 为什么选择 Prism.js ?...极致易用引用 prism.css 和 prism.js,使用合适 HTML5 标签(code.language-xxxx),搞定!...天生伶俐语言 CSS 类是可继承,所以你只需定义一次就能应用到多个代码片段。轻如鸿毛代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。... 遵循 HTML5 标准,Prism 使用语义化 元素和 元素来标记代码区块:...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:使用 Prism.js 实现漂亮代码语法高亮

    4.4K30

    代码分享:高亮显示鼠标移动用户窗体上控件

    这是在vbaexpress.com上找到一段代码,非常有意思,当鼠标移动到用户窗体中控件上时,该控件会高亮显示。这可以让我们将用户窗体界面设计得更好。 示例效果如下图1所示。...图1 代码如下: '声明默认颜色 Const D_Lbl_Def_Bac As Long = 10066329 Const D_Lbl_Def_Bor As Long = 5066061 Const...D_Lbl_Def_FoCol As Long = 16579836 '声明鼠标移动到标签上时显示颜色 Const D_Lbl_Move_Bac As Long = 13750737 Const...' "移动到这里3" 标签 Dim D_Bo_Lbl_4 As Boolean ' "移动到这里4" 标签 '标签 1 位置 Const D_L1_Top_Mi As Single = 30...MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X AsSingle, ByVal Y As Single) '当鼠标移动时改变

    1.1K20

    Excel实战技巧65: 制作漂亮用户窗体按钮——当鼠标移动到按钮上时高亮显示

    在很多场合,我们都能看到这样效果,当鼠标移动到某个元素上面时,该元素会变成另外一种颜色,达到强调效果。...下面,我们来实现当鼠标移动到用户窗体按钮上时,会使用颜色高亮显示,让用户窗体更生动,如下图1所示。 ? 其实,你在图1中看到按钮并不是用户窗体内置传统命令按钮,而是使用图像控件来制作。...然后,使用VBA代码来根据鼠标的位置切换这两个图像可见性,从而实现按钮动态变化。 在Excel工作表中创建按钮图像 使用文本框在Excel中创建按钮图像。...复制一个刚才绘制图像控件,如下图6所示。 ? 这个图像将代码鼠标不在按钮上时状态。...编写代码 使用MouseMove事件来响应鼠标的动作,这个事件当鼠标移动到特定控件中时,执行其中代码

    8.2K20

    电商放大镜及动态边框效果

    本文长度为 2772 字,建议阅读 7 分钟 序   大家在网购时候一定没少用过此功能吧~某宝某猫某东,在PC端所有商品展示均是如此:鼠标放在缩略图上,旁边便会有细节图展示出来,并鼠标移动展示相应缩略图细节...下面我用js(jq)来展示一下,并且加入一丢丢动态边框效果。 效果 ?...环境及语言 html css js / jq 思路 放大镜 缩略图及细节图布局 鼠标划入事件:鼠标放在缩略图,出现小蒙层和细节图;当鼠标移动,细节图随之变化 鼠标及蒙层边界判断处理 鼠标移除事件:隐藏蒙蒙层及细节图...动态边框 鼠标悬浮,边框出现 鼠标移除,边框消失 那么问题来了,细节图怎么鼠标变化?...如果设置border,如何使其边框动画?如果周边设置4个div,那么不仅是需要js操控,并且无形之中增加了许多复杂度,与编程思想背道而驰。 那么我们还有别的办法来处理使边框动起来吗?

    1.9K20

    图形编辑器基于Paper.js教程09:鼠标动画布,以鼠标点为缩放中心进行视图缩放

    如何使用Paper.js实现画布缩放与拖动功能 在Web开发中,利用Paper.js库进行图形绘制和交互操作是一种常见实践。...Paper.js是一个强大矢量图形库,可以让开发者通过简洁API完成复杂图形操作。在本文中,我们将详细探讨如何使用Paper.js来实现对画布缩放和拖动功能,提供用户友好交互体验。...缩放功能是通过监听鼠标滚轮事件来实现。...viewPosition是将鼠标的屏幕位置转换为画布上坐标,确保缩放操作围绕鼠标当前位置进行。 实现画布拖动功能 画布拖动功能是通过一个Tool实例来处理鼠标的拖动事件。...在onMouseDrag事件中,我们计算从上一次事件到当前事件鼠标移动差值,并相应地调整视图中心,实现拖动效果。最后,在onMouseUp事件中结束拖动。

    11710

    那些前端常用网站插件

    创建漂亮图表 Instantclick — 能够明显加速网站加载时间,鼠标 hover 时预加载资源 Chartist — 另一个图表库 Motio — 一个基于动画和平移雪碧图库 Animsition... — CSS 实现动画过渡 jQuery 插件 Barba.js — 流式页面过渡 TwentyTwenty — 一个对比图片可视化 diff 工具 Vivus.js — 在 SVG 上绘制动画 Wow.js... — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅 JavaScript 动画 Animate on scroll — 漂亮页面滚动元素动画...keycode Sortable — 拖拽插件 Flexdatalist — 自动补全 Slideout.js — 移动应用侧滑导航 Jquerymy — 使用 jQuery 实现双向数据绑定 Cleave.js... — 实时格式化输入内容 Page — 客户端单页应用路由 Selectize.js — 用来添加 tag Hybrid 选择框 Nice select — 创建漂亮选择框 jQuery 库 Tether

    4.4K50

    将JavaScript代码转换为漂亮SVG流程图——js2flowchart

    js2flowchart 是一个可视化库,可将任何JavaScript代码转换为漂亮SVG流程图。你可以轻松地利用它学习其他代码、设计你代码、重构代码、解释代码。...index.js ? 我们直接在文本域中输入自己代码,如下,左边会直接生成流程图,这只是一个简单示例: ?...js2flowchart特性以及适用场景(来自官网翻译) js2flowchart获取您JS代码并返回SVG流程图,适用于客户端/服务器,支持ES6。...销毁修饰符,用于在方案上用一个形状替换代码块 自定义流树修改器支持创建自己流修改器 流树忽略过滤器完全省略一些代码节点,如日志行 聚焦节点或整个代码逻辑分支突出显示方案重要部分 模糊节点或整个代码逻辑分支以隐藏不太重要东西...为有效JS语法简单描述任何进程创建流程图 以上所有功能可以直接到github上详细了解,用法太多,这里就不在介绍了!

    5.7K40

    总结100+前端优质库,让你成为前端百事通

    并且可以在 React、Vue、Angular 项目中使用 「Scroll Reveal」 零依赖,为 web 和移动浏览器提供了简单滚动动画,以动画方式显示滚动中内容 「Kute.js」 一个强大高性能且可扩展原生...「iscroll」 移动端使用一款轻量级滚动插件 「swiper.js」 一款强大 js 跨端触摸滑动插件 「MixItUp」 是用于 DOM 操作高性能,无依赖库,使您能够使用精美的动画过滤,...After Effects 动画,并在移动设备和网络上呈现它们 鼠标/键盘相关 「KeyboardJS」 一个在浏览器中使用库(与 node.js 兼容).它使开发人员可以轻松设置键绑定和使用组合键来设置复杂绑定...」 一个基于图像中前 2 种主要颜色生成互补渐变背景库 表单表格 「x-spreadsheet」 一个基于 web 简单易用表格插件 Css 相关库 hover.css 开箱即用鼠标悬停动画...动画/动效果 Halogen 使用 React 加载动画集合 react-loading 一款基于 react 轻量级加载动画库, 支持按需导入, 开箱即用 react-move 漂亮,数据驱动

    3.1K20

    Android EditText输入法一起移动并悬浮在输入法之上示例代码

    百度看了好多代码,又是写监听改变布局,又是动态调整输入框位置,很高级,但是我尝试都没有效果,也不知道是我手机原因还是不会用人家代码,没办法,自己动手研究。...android:name=".MainActivity" android:windowSoftInputMode="adjustResize" </activity 2.布局里设置 加如下四句话在你代码里...,至于添加位置,类比上面面的代码块,应该容易懂 (1)RelativeLayout //根目录需要相对布局,其他没尝试 (2)android:fitsSystemWindows=”true...(4)android:layout_alignParentBottom=”true” 将需要输入法移动控件固定根布局底部,究竟为啥,咱尝试出来也搞不懂,反正能用 //这里采用了相对布局作为根布局占满全屏...getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); } } } 总结 到此这篇关于Android EditText输入法一起移动并悬浮在输入法之上文章就介绍到这了

    1.9K22

    「Web Animation API 专题」用原生JS制作一个图片随机移动动画

    Web Animation API 介绍 当我们谈及网页动画时,自然联想到是 CSS3 动画JS 动画、SVG 动画 等技术以及 jQuery.animate() 等动画封装库,根据实际动画内容设计去选择不同实现方式...,然而,每个现行动画技术都存在一定缺点,如 CSS3动画必须通过JS去获取动态改变值,一个动画效果分散在css文件和js文件里不好维护,setInterval 时间往往是不精确而且还会卡顿,引入额外动画封装库也并非对性能敏感业务适用...,封装移动动画。...好了今天代码撸完了,js代码还不到50行(注:为了在手机端运行,引入了web-animations.min.js),您可以点击阅读原文预览,笔者亲测在iPhone XS Max运行良好,由于没有其它手机...下一篇文章我将用不到20行原生js代码纯手工撸一个漂亮时钟,敬请期待...

    3.9K30

    2019年最全web前端知识体系汇总

    : · Chart.js—使用 JavaScript 创建漂亮图表 · Instantclick—能够明显加速网站加载时间,鼠标 hover 时预加载资源 · Chartist—另一个图表库 · Motio...—一个基于动画和平移雪碧图库 · Animsition—CSS 实现动画过渡 jQuery 插件 · Barba.js—流式页面过渡 · TwentyTwenty—一个对比图片可视化 diff 工具...· Vivus.js—在 SVG 上绘制动画 · Wow.js—滚动时展现动画 · Scrolline.js—页面滚动时显示滚动进度 · Velocity.js—快速流畅 JavaScript 动画...· Animate on scroll—漂亮页面滚动元素动画 · Handlebars.js—Javascript 模板 · jInvertScroll—视差滚动 · One page scroll... Hybrid 选择框 · Nice select—创建漂亮选择框 jQuery 库 · Tether—使用固定定位来创建相关元素 · Shepherd.js—为应用创建新手引导 · Tooltip—tooltip

    2.8K00
    领券