前端笔记共65篇
前端基础
仿凡科网站右侧悬浮窗 在线客服简约图标大全快捷导航钻芒美化版
之前有发个一个凡科的右侧悬浮窗，今天给加了一些图标样式，新增css判断窗口大小自动隐藏（手机端不会显示），这下比较齐全了。 可以自己自定义图标，在css更改图片链接即可（背景图标和鼠标hov...
5年前
JS+jquery实现网页播放音乐歌词高亮自动滚动WordPress钻芒简洁美化版
效果如下: 截图： 样式根据自己需求修改 项目说明 想给关于页面加个音乐播放控件，加完看着又想加个歌词滚动，嗯..想在的效果和预想的一模一样。（一体性挺强） 文件名： js+jquery实现网页播放...
5年前
CSS适配屏幕尺寸大小自适应
改新模板的时候考虑到单独适配手机端排版美化。只需要在css内写好窗口大小相对应的样式。访问就根据窗口大小自动使用相应的样式。 PC端CSS控制自适应: 自动PC端隐藏 手机端显示CSS代码判断实现...
4年前
给WordPress或网站内添加新年挂灯笼特效
源码及教材源自知更鸟:http://zmingcx.com/hanging-lantern.html 这里说一下，作者提供了两种方法部署灯笼， 第一种是 在footer.php主题页脚文件内添加灯笼前端代码，然后在添加style.css样式表...
4年前
FontAwesome Icon图标和文字水平对齐以及设备自适应解决方案
在给新站美化插入font图标的时候，总是和文字对不齐。尝试常规方法后不行那只能用最笨的方法来写。 实例如下: css代码 font-size: 21px!important; /*字体强制大小*/ left:30%; /*偏离左侧30%位...
4年前JS禁止右键和F12查看
此方法目的用来防小白，稍微有点经验的站长绕过方法有很多。 代码转载自: https://www.jianshu.com/p/fcb7747ec620 判断浏览器窗户大小发生变化自动关闭网页是最骚的！ <script language='...
4年前H5 Canvas 旋转小伞+时钟
原生态的js， 利用H5 Canvas 写的旋转小伞+时钟 指针和表盘会变颜色哦！指针到达小伞位置，会跟四周的小伞颜色一致！ 效果如下： JavaScript代码： <script type='text/javascript' language...
5年前
web开发中插入FontAwesome 图标字体库
Font Awesome是一套绝佳的图标字体库和CSS框架，它是可缩放的矢量图标，用户可以可以对图标的特性进行更改，比如大小、颜色、阴影等并且可以组合不同的图标创造自己喜欢的图标。Font Awesome的...
5年前
凡科右侧悬浮菜单定位瞄点
正好用到，还挺好看。就扒来了。 效果在: https://tool.zmki.cn/ 简单修改了一下，演示如下: 二维码图片链接在css里，自行替换即可。 代码: <!-- <link rel='stylesheet' href='https://f...
5年前
JS实现全屏切换控制 WordPress
前段时间做的几个小项目都加入进去了全屏切换控制按钮，这个过程是怎么实现的呢，其实和暗黑控制切换一样。非常的简单。并且适用于所有网站，WordPress、typecho都不是问题，技术互通。只待你补...
4年前
HTML5 SVG+CSS3霓虹灯文字边框动画特效
@font-face { font-family:fzz; src: url('https://img.zmki.cn/ttf/fzz.ttf');} 预览效果 html <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> &...
5年前
CSS限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行
为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。 效果如下: 未限制显示长度，如果超出了会溢出到第二行里。严重影响用户体验和...
5年前
一个js弹窗，点击按钮会出窗口，点击x或空白区域或关闭窗口。
截图 点击按钮会出窗口，点击x或空白区域或关闭窗口。 代码 <style> .overlay-tecgic { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color...
12个月前
DIV+JS+CSS实现点击弹出图片效果
前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。 # ZMKI VLOG: VLOG.ZMKI.CN 效果如下: #代码 CSS代码 <style type='text/css'> .black_overlay { di...
5年前html 如何给li加连接
给 A 标签加上ID，拦截 li onclick 事件模拟A标签单击。事实上你完全不必使用A标签，直接单击事件里self.location=XXX就完事了 <li onclick='javascript:post.getElementById('01').click();...
5年前