js模仿微信联系人 定位和字母悬浮
来源：互联网 发布：软件研发队伍介绍 编辑：程序博客网 时间：2024/06/04 18:40
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>人名反应</title></head><link rel="stylesheet" href="css/namerea.css"><!-- <link rel="stylesheet/less" href="css/styles.less" /> --><!-- <script src="js/less.min.js"></script> --><style>* { margin: 0; padding: 0; font-family: "microsoft yahei !important";}li { list-style: none;}#bigbox { margin-top: 0.525rem;}.search { width: 100%; display: block; height: 1.425rem; box-sizing: border-box; background: #f7f7f7; border-radius: 5px; border: 0;}#searchbox { position: relative; width: 17.55rem; font-size: 0.65rem; margin: 0 auto; height: 1.425rem; margin-bottom: 0.6rem;}#searchbox img { position: absolute; display: inline-block; width: 0.875rem; height: 0.875rem; top: 50%; margin-top: -0.4375rem; margin-left: 0.625rem;}#searchbox span { color: #bbbbbb; position: absolute; top: 50%; margin-top: -0.4375rem; margin-left: 1.75rem;}.namelist { display: block; height: 1.125rem; line-height: 1.125rem; background: #f5f5f5; color: #999999; font-size: 0.6rem; border-top: 1px solid #e6e6e6;}.namelist span { display: block; width: 17.55rem; margin: 0 auto;}.listbox { display: block; width: 100%;}.listbox li { width: 17.55rem; font-size: 0.65rem; height: 2.2rem; margin: 0 auto; line-height: 2.2rem; font-size: 0.7rem; color: black; border-bottom: 1px solid #e6e6e6;}li:last-child { border: none ;}.right_nav { position: fixed; right: 0.6rem; top: 25%;}.right_nav li { font-size: 0.5rem;}.right_nav img { width: 0.45rem;}.active_fixed { position: fixed; display: block; top: 0; width: 100%;}.active_top { margin-top: 1.2rem;}.active_hide { display: none;}.overbox { width: 100%;}.overbox .overlistbox { display: block; width: 18.15rem; margin-left: 0.6rem;}.overbox .overlistbox li { font-size: 0.7rem; border-bottom: 1px solid #e6e6e6; height: 2.25rem; line-height: 2.25rem;}input { outline: none; /*清除选中效果的默认蓝色边框 */ -webkit-appearance: none; /*清除浏览器默认的样式 */ line-height: normal;}</style><body style="position: relative;"><div id="bigbox"><div id="searchbox"><form action="#" ><input class="search" type="search" /></form><spahu class='imgbig'><img src="img/search.png"/><span >搜索</span></spahu></div></div><!--列表区域--><div id="list_big_box" style=""><div class="elist publictop" style="display: none"><div class="namelist active_fixed"><span id="pubtext">A</span></div></div><ul id="ul"><div class="elist" id="A"><div class="namelist"><span>A</span></div><ul class="listbox"><li>Acetoacetic Ester Condensation</li><li>Acetoacetic Ester Synthesi</li><li>Acyloin Condensation</li><li>Alder-Ene Reaction</li></ul></div><div class="elist" id="B"><div class="namelist"><span>B</span></div><ul class="listbox"><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Baeyer-Villiger Oxidation</li><li>Acyloin Condensation</li><li>Alder-Ene Reaction</li></ul></div><div class="elist" id="C"><div class="namelist"><span>C</span></div><ul class="listbox"><li>Ccetoacetic Ester Condensation</li><li>Ccetoacetic Ester Synthesi</li><li>Ccetoacetic Ester Condensation</li><li>Ccetoacetic Ester Synthesi</li><li>Ccetoacetic Ester Condensation</li><li>Ccetoacetic Ester Synthesi</li><li>Ccetoacetic Ester Condensation</li><li>Ccetoacetic Ester Synthesi</li><li>Ccetoacetic Ester Condensation</li><li>Ccetoacetic Ester Synthesi</li><li>Ccetoacetic Ester Condensation</li><li>Ccetoacetic Ester Synthesi</li><li>Ccetoacetic Ester Condensation</li><li>Ccetoacetic Ester Synthesi</li><li>Ccetoacetic Ester Condensation</li><li>Ccetoacetic Ester Synthesi</li></ul></div><div class="elist" id="D"><div class="namelist"><span>D</span></div><ul class="listbox"><li>Dcetoacetic Ester Condensation</li><li>Dcetoacetic Ester Synthesi</li><li>Dcyloin Condensation</li><li>Dlder-Ene Reaction</li><li>Dcetoacetic Ester Condensation</li><li>Dcetoacetic Ester Synthesi</li><li>Dcyloin Condensation</li><li>Dlder-Ene Reaction</li><li>Dcetoacetic Ester Condensation</li><li>Dcetoacetic Ester Synthesi</li><li>Dcyloin Condensation</li><li>Dlder-Ene Reaction</li><li>Dcetoacetic Ester Condensation</li><li>Dcetoacetic Ester Synthesi</li><li>Dcyloin Condensation</li><li>Dlder-Ene Reaction</li></ul></div><div class="elist" id="E"><div class="namelist"><span>E</span></div><ul class="listbox"><li>Ecetoacetic Ester Condensation</li><li>Ecetoacetic Ester Synthesi</li><li>Ecyloin Condensation</li><li>Elder-Ene Reaction</li><li>Ecetoacetic Ester Condensation</li><li>Ecetoacetic Ester Synthesi</li><li>Ecyloin Condensation</li><li>Elder-Ene Reaction</li><li>Ecetoacetic Ester Condensation</li><li>Ecetoacetic Ester Synthesi</li><li>Ecyloin Condensation</li><li>Elder-Ene Reaction</li><li>Ecetoacetic Ester Condensation</li><li>Ecetoacetic Ester Synthesi</li><li>Ecyloin Condensation</li><li>Elder-Ene Reaction</li></ul></div><div class="elist" id="F"><div class="namelist"><span>F</span></div><ul class="listbox"><li>Fcetoacetic Ester Condensation</li><li>Fcetoacetic Ester Synthesi</li><li>Fcyloin Condensation</li><li>Flder-Ene Reaction</li><li>Fcetoacetic Ester Condensation</li><li>Fcetoacetic Ester Synthesi</li><li>Fcyloin Condensation</li><li>Flder-Ene Reaction</li></ul></div></ul><ul class="right_nav"><img src="img/search_little.png"/><li>A</li><li>B</li><li>C</li> <li>D</li><li>E</li><li>F</li><li>G</li><li>H</li><li>I</li><li>J</li><li>K</li><li>L</li><li>M</li><li>N</li><li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li><li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li></ul></div></body></html><script type="text/javascript">//适配(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=1024){ // 兼容的设备宽度最大尺寸 //iphone6 1rem = 20px; docEl.style.fontSize = '54.61px'; // console.log("1rem===="+docEl.style.fontSize); }else{ docEl.style.fontSize = 54.61* (clientWidth / 1024) + 'px'; //console.log("1rem====="+docEl.style.fontSize); } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); //滚动字母悬浮 window.addEventListener('scroll',function(){ var sct = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop; var scp = document.querySelector('.right_nav').firstChild.nextElementSibling; var scrtop = document.querySelector('#A').lastElementChild.offsetTop; var imalist = document.querySelectorAll('.elist'); if(scrtop-sct<=14){//余量自己调 document.querySelector('.publictop').style.display = "block"; }else{ document.querySelector('.publictop').style.display = "none"; } for(var i=0;i<imalist.length;i++){ if(sct-imalist[i].offsetTop>=0){ document.querySelector('#pubtext').innerHTML=Elist[i].firstChild.innerHTML; } } }); //定位 var liList = document.querySelector('.right_nav').children; var Elist = document.querySelectorAll('.namelist');for(var i=0;i<liList.length;i++){liList[i].index = i;liList[i].onclick=function(){if(this.index==0){//回顶部document.querySelector('html').scrollIntoView();}var _text = this.innerHTML;//点击左侧的字母if(Elist[this.index-1]){var listText=Elist[this.index].firstChild.innerHTML;}if(_text==listText){//防止某个 字母下内容为空Elist[this.index].parentNode.scrollIntoView();}}}</script>阅读全文
1 0
- js模仿微信联系人 定位和字母悬浮
- android:模仿微信联系人效果
- 微信联系人右侧字母滑动索引
- 微信联系人右侧字母滑动索引
- 模拟微信联系人右侧字母滑动
- 模仿微信最近联系人列表长按功能
- 模仿联系人侧边栏字母查询
- ListView根据字母排列——仿照微信联系人
- 类似微信的联系人根据字母排列查询
- vue.js 微信定位
- Android城市索引含定位和热门城市（悬浮块+右侧字母索引）
- 28自定义View 模仿联系人字母侧栏
- js 模仿锚点定位
- 微信联系人列表点击侧边栏首字母定位到相应联系人列表的实现方法
- 微信联系人列表点击侧边栏首字母定位到相应联系人列表的实现方法
- 模仿微信朋友圈 图片浏览 h5 html5 js
- 模仿微信红包
- 模仿微信界面
- Arcgis---绘制多边形
- RabbitMQ 介绍
- Python04_函数式编程
- git提交代码时出现错误：error : unpack failed : error Missing commit XXX
- 物理隔离与数据交换-网闸的设计原理与误区
- js模仿微信联系人 定位和字母悬浮
- luoguP1091 合唱队形 题解
- CSDN-markdown
- Python05_面向对象
- svn cleanup: sqlite: database disk image is malformed
- Android Studio开启Lambda
- HDU6187-Destroy Walls
- 解决 Spring MVC No converter found for return value of type
- rabbitmq 安装-单点
