浪微博头像tips的js特效

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<div class="info" id="info">
<a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg"></a>
	<div class="detailinfo" id="detailinfo">
		<dl>
        <dt>
<a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg"></a>
</dt>
        <dd>
        
        <span>（设置备注）</span>
        <p>广东，深圳</p>
        <p>关注粉丝微薄</p>
        </dd>
        </dl>
        <dl>
        <dt>简介：</dt>
        <dd>来自五湖四海的朋友，欢迎你们</dd>
        </dl>
        <div class="links">
        
       	<span class="i">|</span>
        <span></span>
        <div class="bt">
        
        <span class="i">|</span>
        <span></span>
        </div>
        </div>
    </div>
    <div class="arrow" id="arrow"></div>
    </div>   
    
<div class="info" style=" margin:50px 0 0 0;" id="info1">
<a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg"></a>
	<div class="detailinfo" id="detailinfo1">
		<dl>
        <dt>
<a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg"></a>
</dt>
        <dd>
        
        <span>（设置备注）</span>
        <p>广东，深圳</p>
        <p>关注粉丝微薄</p>
        </dd>
        </dl>
        <dl>
        <dt>简介：</dt>
        <dd>来自五湖四海的朋友，欢迎你们</dd>
        </dl>
        <div class="links">
        
       	<span class="i">|</span>
        <span></span>
        <div class="bt">
        
        <span class="i">|</span>
        <span></span>
        </div>
        </div>
    </div>
    <div class="arrow" id="arrow1"></div>
    </div>   
    
 <div class="info" id="info2">
<a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg"></a>
	<div class="detailinfo" id="detailinfo2">
		<dl>
        <dt>
<a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d8af3e07e030.jpg"></a>
</dt>
        <dd>
        
        <span>（设置备注）</span>
        <p>广东，深圳</p>
        <p>关注粉丝微薄</p>
        </dd>
        </dl>
        <dl>
        <dt>简介：</dt>
        <dd>来自五湖四海的朋友，欢迎你们</dd>
        </dl>
        <div class="links">
        
       	<span class="i">|</span>
        <span></span>
        <div class="bt">
        
        <span class="i">|</span>
        <span></span>
        </div>
        </div>
    </div>
    <div class="arrow" id="arrow2"></div>
    </div>   
<script>
var x=window.x||{};
x.personalInfo=function(info,detailinfo,arrow){
	var oinfo=document.getElementById(info);
	var odetailinfo=document.getElementById(detailinfo);
	var arrow=document.getElementById(arrow);
	 oinfo.t=null;
	 oinfo.v=null;
	oinfo.onmouseover=function(){
		clearTimeout(oinfo.v);
		oinfo.style.zIndex=20;
		oinfo.t=setTimeout(function(){
			if(oinfo.offsetTop>150)	{
			odetailinfo.className="detailinfo";
			arrow.className="arrow";		
			odetailinfo.style.display="block";
			arrow.style.display="block";}
		else{
			odetailinfo.className="b";
			arrow.className="ar";
			odetailinfo.style.display="block";
			arrow.style.display="block";
			
			}
		
		},300);
		};
	oinfo.onmouseout=function(){
		
		clearTimeout(oinfo.t);
		oinfo.v=setTimeout(function(){
		oinfo.style.zIndex=2;
		odetailinfo.style.display="none";
		arrow.style.display="none";},300);
	
		}
	}
x.personalInfo("info","detailinfo","arrow");
x.personalInfo("info1","detailinfo1","arrow1");
x.personalInfo("info2","detailinfo2","arrow2");
</script>

提示：您可以先修改部分代码再运行

浪微博头像tips的js特效

相关文章

精彩推荐