js模仿微信联系人 定位和字母悬浮

最新推荐文章于 2020-07-07 21:13:06 发布
最新推荐文章于 2020-07-07 21:13:06 发布
阅读量1.6k 收藏
点赞数
分类专栏： Js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gyq04551/article/details/77945660
版权 
<!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>
	<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>

 

约德尔蒙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
仿微信通讯录
11-11
仿微信通讯录。
仿联系人定位悬浮
你全家都是博客
04-26 397
效果图导包：compile 'com.android.support:recyclerview-v7:23.1.1' compile 'ca.barrenechea.header-decor:header-decor:0.2.6'这里还用到一个Jar包链接: https://pan.baidu.com/s/1X-dcGEomFlmMWu3QYx_iOg 密码: xi73免费下载1.直接复制拼音工具...
仿微信通讯录列表
LovelyCoder
06-01 1143
自己项目中需要做一个通讯录，单是和微信不一样，微信通讯录头部的几列好像是固定的，但是项目中的头部是群组管理，是动态的，对其联系人还需要做首字母排序，效果倒是很容易做出来，但是这里只能放一个listview，不然list就不能实现随侧边栏字母滑动查找，所以自己想了个办法 分享一下，同时也是复习，希望看到的童鞋有帮助 首先我重写了listview，在listview的头部添加了
微信小程序自定义组件（仿微信联系人可导航字母序排列数据列表）
10-14
本文将深入探讨如何创建一个自定义组件，实现类似微信联系人界面的可导航字母序排列数据列表。这种列表允许用户通过点击字母栏快速跳转到对应首字母的联系人，极大提升了用户体验。 首先，我们要了解微信小程序...
js模仿微信语音播放的动画效果
09-17
在JavaScript编程中，模仿微信语音播放的动画效果是一项有趣且实用的技术挑战。微信语音播放时，用户会看到一个小喇叭图标，随着声音的播放，图标会有动态的变化，这种效果增加了用户体验的交互性和趣味性。以下是对...
Android仿微信联系人列表字母侧滑控件
01-04
仿微信联系人列表字母侧滑控件， 侧滑控件参考了以下博客： Android实现ListView的A-Z字母排序和过滤搜索功能 首先分析一下字母侧滑控件应该如何实现，根据侧滑控件的高度和字母的数量来平均计算每个字母应该占据的...
Android仿微信联系人字母排序效果
01-05
本文实例为大家分享了Android联系人字母排序的具体代码，供大家参考，具体内容如下 实现思路：首先说下布局，整个是一个相对布局，最下面是一个listview，listview上面是一个自定义的view（右边显示字母），最上面...
高仿微信通讯录列表
qq_35698774的博客
11-10 2861
闲来无事写一个微信通讯录列表demo                                                                  思路右侧导航自定义view 中间名字列表list view 直接上代码 右侧导航view /** * Created by wjs on 2017/11/7. * 右侧
原生JS实现微信通讯录
10-15
主要为大家详细介绍了原生JS实现微信通讯录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
H5首字母检索通讯录
12-20
带拼音首字母检索的通讯录，H5页面可用于联系人选择，使用简单方便
H5页面防微信字母搜索定位
02-22
H5防微信主页通讯录按字母搜索定位
html5仿微信联系人按首字母排序功能.rar
07-10
html5仿微信联系人按首字母排序功能，applist仿微信联系人的列表，微信或者手机联系人都有这个功能，本效果基于HTML5移动端标准设计，按照首字母排序，支持锚点-传入特定格式的数据，包括应用的名称，指向的链接，应用的图标，按照应用的名称首字母从A~Z排序并生成列表，右侧有a~z的锚点，直接拷贝到手机中用自带的手机浏览器可运行。
仿微信通讯录--按姓氏进行分类
qq_40637612的博客
12-06 1313
话不多说，先上效果图，看看是不是你们需要实现的效果 如果是要这样效果的话，下面上代码（主要分为三个部分）： 1、html部分 &lt;div class="contentData"&gt; &lt;div v-for="(item, index) in letterData" :key="index"&gt; /** 这是首字母 */ &lt;div cl...
样式集（六）仿微信通讯录样式
a_靖的博客
07-07 2504
效果图： 这里有引用到 自定义底部导航，自定义底部导航组件链接 <!--pages/chatList/chatList.wxml--> <view class="top"> <view class="pageTitle">家博慧</view> <view class=" search_arr"> <icon class="searchcion" size='16' type='search'></icon>
H5页面防微信通讯录按字母搜索定位
MR_wb的博客
02-22 4514
H5防微信通讯录 按字母搜索定位
Android 仿微信通讯录功能，好友排序 + 字母索引
热门推荐
阿飞的博客
05-29 1万+
一、效果图展示   二、功能特点 1.好友排序：按照拼音顺序对好友进行排序，兼容英文数字符号等 2.字母索引：右侧字母导航条，既可拖动也可点击，联动ListView滑动   三、实现 接下来就让我们一步步显示这个效果吧。 1.右侧字母索引的导航条 这个我们可以在网上找到很多类似的，你大可找一个自己喜欢的甚至自己写一个出来，这里我在网上找了一个带波浪效果的，看起来比较炫酷一点吧...
python 获取微信联系人
最新发布
06-10
获取微信联系人需要使用微信开放平台的API接口进行调用。这个过程需要注册微信开放平台账号，并且需要经过微信的审核才能使用相关的API接口。 具体的操作步骤如下： 1. 在微信开放平台注册账号并创建应用，获取...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值