Skip to content

Instantly share code, notes, and snippets.

View WangShuXian6's full-sized avatar

王树贤 WangShuXian6

30 followers · 117 following
  • 哈银消费金融科技管理部
  • beijing
View GitHub Profile
@WangShuXian6
WangShuXian6 / index.html
Created July 22, 2019 09:19
Pure CSS Select Box With Direction Aware Hover Effect
<div id="info">Observe the platform icon's motion direction when there is up and down hover on options.</div>
<form id="app-cover">
<div id="select-box">
<input type="checkbox" id="options-view-button">
<div id="select-button" class="brd">
<div id="selected-value">
<span>Select a platform</span>
</div>
<div id="chevrons">
@WangShuXian6
WangShuXian6 / index.html
Created July 22, 2019 09:19
Pretty Select dropdown
<span class="dropdown-el">
<input type="radio" name="sortType" value="Relevance" checked="checked" id="sort-relevance"><label for="sort-relevance">Relevance</label>
<input type="radio" name="sortType" value="Popularity" id="sort-best"><label for="sort-best">Product Popularity</label>
<input type="radio" name="sortType" value="PriceIncreasing" id="sort-low"><label for="sort-low">Price Low to High</label>
<input type="radio" name="sortType" value="PriceDecreasing" id="sort-high"><label for="sort-high">Price High to Low</label>
<input type="radio" name="sortType" value="ProductBrand" id="sort-brand"><label for="sort-brand">Product Brand</label>
<input type="radio" name="sortType" value="ProductName" id="sort-name"><label for="sort-name">Product Name</label>
</span>
@WangShuXian6
WangShuXian6 / css-only-select.markdown
Created July 22, 2019 09:18
CSS only Select
@WangShuXian6
WangShuXian6 / index.haml
Created July 22, 2019 09:18
Select Option Interaction
%div.select-ctr
%div.selected-input.input-preview What is your favourite pet?
%div.input.input-1{:data => {:val => "Cat"}} Cat
%div.input.input-2{:data => {:val => "Dog"}} Dog
%div.input.input-3{:data => {:val => "Birds"}} Birds
%div.input.input-4{:data => {:val => "Cow"}} Cow
%div.input.input-5{:data => {:val => "Bear"}} Bear
@WangShuXian6
WangShuXian6 / index.html
Created July 22, 2019 09:18
Material Design Select Dropdown
<label id="img_category_label"class="field"for="img_category"data-value="">
<span>Category</span>
<div id="img_category"class="psuedo_select"name="img_category">
<span class="selected"></span>
<ul id="img_category_options"class="options">
<li class="option"data-value="opt_1">Option 1</li>
<li class="option"data-value="opt_2">Option 2</li>
</ul>
</div>
</label>
@WangShuXian6
WangShuXian6 / css-only-select-radio-checkbox-no-js.markdown
Created July 22, 2019 09:17
CSS only Select ( radio + checkbox ) No JS
@WangShuXian6
WangShuXian6 / index.css
Last active May 22, 2019 07:39
拖拽移动
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
@WangShuXian6
WangShuXian6 / parse.js
Last active January 4, 2019 11:17
解析url参数
'use strict';
var has = Object.prototype.hasOwnProperty;
var hexTable = (function () {
var array = [];
for (var i = 0; i < 256; ++i) {
array.push('%' + ((i < 16 ? '0' : '') + i.toString(16)).toUpperCase());
}
@WangShuXian6
WangShuXian6 / greenNodejs.js
Created December 28, 2018 04:52
ali 提交语音文件检测任务 签名
var http = require('http');
var crypto = require('crypto');
var uuidV1 = require('uuid/v1');
var greenNodejs = function(bizCfg, callback){
var accessKeyId = bizCfg['accessKeyId'];
@WangShuXian6
WangShuXian6 / index.html
Created September 6, 2018 02:54
滚动到页面指定元素 // source http://jsbin.com/sakayax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>滚动到页面指定元素</title>
<style type="text/css">
#target{
position: absolute;
top:2000px;