updated 滚动效果优化
This commit is contained in:
路人甲
458
index.html
458
index.html
@@ -26,21 +26,8 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="mod-bg">
|
||||
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.6)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,1)"></use>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="scroll-container">
|
||||
<header>
|
||||
<div class="mod-head">
|
||||
<div class="inner">
|
||||
<div class="bd">
|
||||
@@ -57,229 +44,246 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="mod-panel">
|
||||
</header>
|
||||
<section class="scroll-item">
|
||||
<div class="mod-bg">
|
||||
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.6)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,1)"></use>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="module mod-panel">
|
||||
<div class="inner">
|
||||
<div class="hd">
|
||||
<h1><span class="name">中国</span><span>亲戚关系计算器</span><span class="tag">开源算法</span></h1>
|
||||
<p>逢年过节遇到三姑六婆，拒绝叫不出口的尴尬！轻松搞定亲戚关系～</p>
|
||||
<p>当前亲戚称呼大全已收录约<b id="count">-</b>条亲戚关系</p>
|
||||
<p class="text-gray">始于2016年3月</p>
|
||||
<div class="picture">
|
||||
<img src="static/image/app.png" width="512" height="320" alt="亲戚称呼换算APP"/>
|
||||
</div>
|
||||
<div class="mobile">
|
||||
<a class="btn" href="vue/" target="_blank">
|
||||
<span class="name">访问手机版</span>
|
||||
<span class="qrcode">
|
||||
<img src="static/image/qrcode.png"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<div class="c-hd">
|
||||
<ul>
|
||||
<li class="active"><a href="javascript:;" rel="nofollow">关系找称呼</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">称呼找关系</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">两者间称呼</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">两者的合称</a></li>
|
||||
</ul>
|
||||
<div class="panel-left">
|
||||
<h1><span class="name">中国</span><span>亲戚关系计算器</span><span class="tag">开源算法</span></h1>
|
||||
<p>逢年过节遇到三姑六婆，拒绝叫不出口的尴尬！轻松搞定亲戚关系～</p>
|
||||
<p>当前亲戚称呼大全已收录约<b id="count">-</b>条亲戚关系</p>
|
||||
<p class="text-gray">始于2016年3月</p>
|
||||
<div class="picture">
|
||||
<img src="static/image/app.png" width="512" height="320" alt="亲戚称呼换算APP"/>
|
||||
</div>
|
||||
<div class="mobile">
|
||||
<a class="btn" href="vue/" target="_blank">
|
||||
<span class="name">访问手机版</span>
|
||||
<span class="qrcode">
|
||||
<img src="static/image/qrcode.png"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-bd">
|
||||
<div class="c-panel" style="display:block;">
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
区域模式：
|
||||
<label for="field-0-1">
|
||||
<input id="field-0-1" type="radio" name="mode" value="default" checked>
|
||||
<span>默认</span>
|
||||
</label>
|
||||
<label for="field-0-2">
|
||||
<input id="field-0-2" type="radio" name="mode" value="north">
|
||||
<span>北方地区</span>
|
||||
</label>
|
||||
<label for="field-0-3">
|
||||
<input id="field-0-3" type="radio" name="mode" value="guangdong">
|
||||
<span>粤语惯用</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
我的性别：
|
||||
<label for="field-1-1">
|
||||
<input id="field-1-1" type="radio" name="sex" value="1" checked="checked">
|
||||
<span>男</span>
|
||||
</label>
|
||||
<label for="field-1-2">
|
||||
<input id="field-1-2" type="radio" name="sex" value="0">
|
||||
<span>女</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
称呼方式：
|
||||
<label for="field-2-1">
|
||||
<input id="field-2-1" type="radio" name="reverse" value="0" checked>
|
||||
<span>我称呼对方</span>
|
||||
</label>
|
||||
<label for="field-2-2">
|
||||
<input id="field-2-2" type="radio" name="reverse" value="1">
|
||||
<span>对方称呼我</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<textarea name="input" placeholder="称呼之间用'的'字分开…"></textarea>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<p>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="爸爸">父</button>
|
||||
<button class="btn btn-small" data-value="妈妈">母</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="老公">夫</button>
|
||||
<button class="btn btn-small" data-value="老婆">妻</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="哥哥">兄</button>
|
||||
<button class="btn btn-small" data-value="弟弟">弟</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="姐姐">姐</button>
|
||||
<button class="btn btn-small" data-value="妹妹">妹</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="儿子">子</button>
|
||||
<button class="btn btn-small" data-value="女儿">女</button>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="btn btn-3 btn-orange">回退</button>
|
||||
<button class="btn btn-3 btn-red">清空</button>
|
||||
<button class="btn btn-3 btn-green">计算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>计算结果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="panel-right">
|
||||
<div class="c-hd">
|
||||
<ul>
|
||||
<li class="active"><a href="javascript:;" rel="nofollow">关系找称呼</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">称呼找关系</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">两者间称呼</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">两者的合称</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="c-panel">
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
输入称呼：
|
||||
<input class="input-text" type="text" name="input" placeholder="输入要查询的称呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="c-bd">
|
||||
<div class="c-panel" style="display:block;">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">计算</button>
|
||||
<div class="field">
|
||||
区域模式：
|
||||
<label for="field-0-1">
|
||||
<input id="field-0-1" type="radio" name="mode" value="default" checked>
|
||||
<span>默认</span>
|
||||
</label>
|
||||
<label for="field-0-2">
|
||||
<input id="field-0-2" type="radio" name="mode" value="north">
|
||||
<span>北方地区</span>
|
||||
</label>
|
||||
<label for="field-0-3">
|
||||
<input id="field-0-3" type="radio" name="mode" value="guangdong">
|
||||
<span>粤语惯用</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
我的性别：
|
||||
<label for="field-1-1">
|
||||
<input id="field-1-1" type="radio" name="sex" value="1" checked="checked">
|
||||
<span>男</span>
|
||||
</label>
|
||||
<label for="field-1-2">
|
||||
<input id="field-1-2" type="radio" name="sex" value="0">
|
||||
<span>女</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
称呼方式：
|
||||
<label for="field-2-1">
|
||||
<input id="field-2-1" type="radio" name="reverse" value="0" checked>
|
||||
<span>我称呼对方</span>
|
||||
</label>
|
||||
<label for="field-2-2">
|
||||
<input id="field-2-2" type="radio" name="reverse" value="1">
|
||||
<span>对方称呼我</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<textarea name="input" placeholder="称呼之间用'的'字分开…"></textarea>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<p>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="爸爸">父</button>
|
||||
<button class="btn btn-small" data-value="妈妈">母</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="老公">夫</button>
|
||||
<button class="btn btn-small" data-value="老婆">妻</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="哥哥">兄</button>
|
||||
<button class="btn btn-small" data-value="弟弟">弟</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="姐姐">姐</button>
|
||||
<button class="btn btn-small" data-value="妹妹">妹</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="儿子">子</button>
|
||||
<button class="btn btn-small" data-value="女儿">女</button>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="btn btn-3 btn-orange">回退</button>
|
||||
<button class="btn btn-3 btn-red">清空</button>
|
||||
<button class="btn btn-3 btn-green">计算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>计算结果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>计算结果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>应用场景</h3>
|
||||
<p class="q">七舅姥爷和我什么关系？</p>
|
||||
<p class="q">三叔公是什么亲戚？</p>
|
||||
<p class="q">侄子和外甥的区别在哪里？</p>
|
||||
<p class="q">太外公和外太公有什么不同？</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-panel">
|
||||
<div class="row text-right">
|
||||
<label for="field-3-0">
|
||||
<input id="field-3-0" type="checkbox" name="optimal" value="1" checked>
|
||||
<span>最短关系</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="person" placeholder="输入要查询的称呼"/>
|
||||
<div class="c-panel">
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
输入称呼：
|
||||
<input class="input-text" type="text" name="input" placeholder="输入要查询的称呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">计算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>计算结果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>应用场景</h3>
|
||||
<p class="q">七舅姥爷和我什么关系？</p>
|
||||
<p class="q">三叔公是什么亲戚？</p>
|
||||
<p class="q">侄子和外甥的区别在哪里？</p>
|
||||
<p class="q">太外公和外太公有什么不同？</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
称呼方式：
|
||||
<label for="field-3-1">
|
||||
<input id="field-3-1" type="radio" name="reverse2" value="1" checked>
|
||||
<span>前者称呼后者</span>
|
||||
</label>
|
||||
<label for="field-3-2">
|
||||
<input id="field-3-2" type="radio" name="reverse2" value="0">
|
||||
<span>后者称呼前者</span>
|
||||
<div class="c-panel">
|
||||
<div class="row text-right">
|
||||
<label for="field-3-0">
|
||||
<input id="field-3-0" type="checkbox" name="optimal" value="1" checked>
|
||||
<span>最短关系</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="target" placeholder="输入要查询的称呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">计算</button>
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="person" placeholder="输入要查询的称呼"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>计算结果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>应用场景</h3>
|
||||
<p class="q">外舅公是我妈的谁？</p>
|
||||
<p class="q">我爸应该叫舅老爷什么？</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-panel">
|
||||
<div class="row text-right">
|
||||
<label for="field-4-0">
|
||||
<input id="field-4-0" type="checkbox" name="optimal" value="1" checked>
|
||||
<span>最短关系</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="person" placeholder="输入要查询的称呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field" style="text-align:center;">
|
||||
<span>+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="target" placeholder="输入要查询的称呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">计算</button>
|
||||
<div class="field">
|
||||
称呼方式：
|
||||
<label for="field-3-1">
|
||||
<input id="field-3-1" type="radio" name="reverse2" value="1" checked>
|
||||
<span>前者称呼后者</span>
|
||||
</label>
|
||||
<label for="field-3-2">
|
||||
<input id="field-3-2" type="radio" name="reverse2" value="0">
|
||||
<span>后者称呼前者</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="target" placeholder="输入要查询的称呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">计算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>计算结果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>应用场景</h3>
|
||||
<p class="q">外舅公是我妈的谁？</p>
|
||||
<p class="q">我爸应该叫舅老爷什么？</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>计算结果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>应用场景</h3>
|
||||
<p class="q">奶奶和外婆之间什么关系？</p>
|
||||
<p class="q">舅公和爷爷是什么关系？</p>
|
||||
<div class="c-panel">
|
||||
<div class="row text-right">
|
||||
<label for="field-4-0">
|
||||
<input id="field-4-0" type="checkbox" name="optimal" value="1" checked>
|
||||
<span>最短关系</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="person" placeholder="输入要查询的称呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field" style="text-align:center;">
|
||||
<span>+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="target" placeholder="输入要查询的称呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">计算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>计算结果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>应用场景</h3>
|
||||
<p class="q">奶奶和外婆之间什么关系？</p>
|
||||
<p class="q">舅公和爷爷是什么关系？</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="scroll-item">
|
||||
<div class="module mod-intro">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>功能支持</span></div>
|
||||
@@ -361,9 +365,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-banner">
|
||||
</section>
|
||||
<section class="scroll-item">
|
||||
<div class="module mod-article">
|
||||
<div class="inner">
|
||||
<div class="bd">
|
||||
<div class="banner">
|
||||
<span>外甥</span>
|
||||
<span>姑姑</span>
|
||||
<span>岳父</span>
|
||||
@@ -403,10 +409,6 @@
|
||||
<span>孙子</span>
|
||||
<span>姑丈公</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="module mod-article">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>关于中国亲戚称呼</span></div>
|
||||
<div class="bd">
|
||||
<p>亲属是基于婚姻、血缘和法律拟制而形成的社会关系。亲属关系包括夫妻、父母、子女、兄弟姊妹、祖父母和外祖父母、孙子女和外孙子女、儿媳和公婆、女婿和岳父母、以及其他三代以内的旁系血亲，如伯、叔、姑、舅、姨、侄子女、甥子女、堂兄弟姊妹、表兄弟姊妹、姨兄弟姊妹等。</p>
|
||||
@@ -416,6 +418,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="scroll-item">
|
||||
<div class="module mod-copy">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>算法开源</span></div>
|
||||
@@ -433,6 +437,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="scroll-item">
|
||||
<div class="module mod-app">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>他们都在使用</span></div>
|
||||
@@ -466,7 +472,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-foot">
|
||||
<div class="module mod-foot">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>😳支持我的开源</span></div>
|
||||
<div class="bd">
|
||||
@@ -503,7 +509,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
|
||||
<script type="text/javascript" src="https://passer-by.com/public/script/stat.js"></script>
|
||||
</section>
|
||||
</div>
|
||||
<script type="text/javascript" src="dist/relationship.min.js"></script>
|
||||
<script type="text/javascript" src="dist/relationship-mode.min.js"></script>
|
||||
@@ -764,7 +772,5 @@
|
||||
})();
|
||||
</script>
|
||||
<script async defer src="https://cdn.bootcdn.net/ajax/libs/github-buttons/2.21.1/buttons.min.js"></script>
|
||||
<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
|
||||
<script type="text/javascript" src="https://passer-by.com/public/script/stat.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user