CSS3鼠标:hover经过元素呼出显示图片
当鼠标停留在设置的元素时呼出图片，移开后隐藏。 CSS代码 .xulgr-hovershow .xulgr-hovershow-img { opacity:0; transform:translateY(6px); transition:.4s; } .xulgr-hovershow:hover...
纯CSS流星雨效果
最近在我的小程序授权登录页加了一些好看的小样式，顺便分享出来 CSS .xulgrrainbox { position: relative; width: 100%; height: 100%; transform: rotateZ(45deg); position: fixed; top: 0; ...
CSS滑动到某位置元素固定住不动或滚动到顶部然后固定
此代码为纯CSS的基本样式，进阶方法查看：点击前往查看 其实只需要用position:sticky就够了，然后用top在设置距顶位置即可。 position: -webkit-sticky; /* 使Safari浏览器兼容 */ position: st...
CSS hover按钮背景色渐变
自定义鼠标hover按钮时,botton的背景颜色渐变效果 <!DOCTYPE html> <html lang='en'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> &...
简单的CSS+JS实现鼠标指针附带图标
html部分直接在body开头加上img图标地址即可 <img src='图标地址' class='xg-mouse'> 图标建议使用透明背景的png或svg CSS部分直接定义图标大小和绝对定位即可 .xg-mouse {width:40px;hei...
JQ选项卡Tab非同级切换并同步下划线滑动效果
上次我写了 简单的JS实现选项卡Tab非同级切换-雪哥尔 (xulgr.com) 的这篇博文，用起来感觉还不够丝滑，这次添加了下划线（也就是border-bottom）样式，达到切换任意相邻或不相邻的TAB时都能实现...
将png或jpg图片制作成svg图标文件
一、下载安装Adobe Illustrator （AI） 关注后回复“AI”或“ai”免费下载Adobe Illustrator CC 2019安装包 二、使用AI制作 1.打开AI软件，按Ctrl+O打开文件选择你要制作图标的png或者jp...
父级和子级iframe的一些交互
一。子级iframe执行父级页面的一些操作 可以使用window.parent直接执行或调用父级的元素和函数 直接看这篇吧 二、父级执行子级iframe页面的一些操作 <iframe id='XulgriFrame' src='h...
JS使用navigator.platform硬核判断移动端和PC端，调试器也判断
我之前发的一些JS或PHP判断用户浏览器或操作系统都是用navigator.userAgent标识头来判断，但如果PC端浏览器打开控制台开发者模式时可以通过模拟设备来改变成安卓手机或苹果手机端，这样userAgen...
JS禁止用户打开调试，判断用户浏览器进入开发者模式并跳转
//禁止右键菜单 document.oncontextmenu = function(){ return false; }; //禁止F12快捷键 document.onkeydown = function(e){ if (e.keyCode === 123) { return false; } }; //当用户打开控制...
