教程集 > 脚本编程 > javascript > 正文浪微博头像tips的js特效

浪微博头像tips的js特效

发布时间：2017-02-04 编辑：jiaochengji.com

教程集为您提供浪微博头像tips的js特效等资源，欢迎您收藏本站，我们将为您提供最新的浪微博头像tips的js特效资源

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

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style> a,span,p{ line-height:18px; font-size:12px; margin:0; padding:0; color:#0CC; text-decoration:none;} .info{ width:50px; height:50px; position:relative; padding:2px; border:1px solid #ccc; cursor:pointer; margin:170px 0 0 20px;; font-size:12px; float:left; } .b,.detailinfo{ width:300px; height:128px; z-index:10; left:0; top:-162px; padding:12px;border:2px solid #eee; border-bottom:0 none; background:#fff; } .b{ top:60px;} .b dt,.detailinfo dt{ float:left; display:inline; } .b dd,.detailinfo dd{ padding-left:20px; line-height:14px;} .b .links,.detailinfo .links{ background:#eee; line-height:38px; margin:0 -14px; padding:0 15px; height:38px;} .b .i,.detailinfo .i{ padding: 0 5px; color:#ccc} .b .bt,.detailinfo .bt{ float:right; border:1px solid #CCC; width:100px; margin: 7px; height:21px; line-height:21px; padding:0 8px; } .info .arrow, .ar{background: url("http://img.t.sinajs.cn/t35/style/images/common/new_index_bg.png") no-repeat scroll -223px -71px transparent; height: 8px;left: 13px;top: -8px;width: 16px; z-index:12; } .info .ar{ background-position:-142px -71px; top:54px;} .info .arrow, .info .ar, .b,.detailinfo{position:absolute;overflow: hidde;display:none} </style> </head> <body>

XXX <span>（设置备注）</span>

广东，深圳

关注粉丝微薄

简介：: 来自五湖四海的朋友，欢迎你们

求关注 <span class="i">|</span> <span>设置分组</span>

|</span> <span>取消</span>

XXX <span>（设置备注）</span>

广东，深圳

关注粉丝微薄

简介：: 来自五湖四海的朋友，欢迎你们

求关注 <span class="i">|</span> <span>设置分组</span>

|</span> <span>取消</span>

XXX <span>（设置备注）</span>

广东，深圳

关注粉丝微薄

简介：: 来自五湖四海的朋友，欢迎你们

求关注 <span class="i">|</span> <span>设置分组</span>

|</span> <span>取消</span>

<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> </body> </html></textarea>

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

您可能感兴趣的文章：
网页标题随机显示名言js代码
 浪微博头像tips的js特效
 新浪微博如何注销账号?新浪微博注销账号4种方法
 poshytip 基于jquery的插件主要用于显示微博人的图像和鼠标提示等
 基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）
PHP实现百度、网易、新浪短网址服务的API接口调用
 capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
 仿新浪微博返回顶部的jquery实现代码
 微拍视频怎么下载新浪微博视频下载方法
 jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

上一篇：javascript 幻灯片代码效果下一篇：javascript 实现图片放大缩小代码

[关闭]

最近更新

浏览排行

~ ~