注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

江志祥的博客

可恶的中国银行,信用卡像病毒啊,取消那么难,,,

 
 
 

日志

 
 

网页页面做浮动图标  

2014-06-09 20:30:37|  分类: 计算机_javascrip |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
有2中方式,第一:动态方式;第二:静态方式
方式一:动态方式,在 </body></html>之前添加如下javascript代码即可
<script>
lastScrollY=0;
var rightm = 50;
function heartBeat(){ 
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
percent=.1*(diffY-lastScrollY); 
if(percent>0)
percent=Math.ceil(percent); 
else
percent=Math.floor(percent); 
document.getElementById("PC_Left").style.bottom=parseInt(document.getElementById("PC_Left").style.bottom)-percent+"px";
lastScrollY=lastScrollY+percent;
}
suspendcode1='<DIV id="PC_Left" style="right:'+rightm+'px;bottom:20px;POSITION:absolute;Z-INDEX:440; width:50px;height:50px;background:#ccc;font-size:14px; filter:Alpha(Opacity=80); text-align:center; line-hight:24px;"><a href="http://hetu.baidu.com/api//apply/create?platformId=162" target="_blank" style="line-height:14px;width:30px;display:block;text-align:center;padding-top:5px;"><s style="width:21px;height:23px;margin-left:50%;padding-bottom:2px;background-repeat:no-repeat;background-image:url(image/nlp/feedback.png);background-position:0 -24px;float:left;"></s><span style="width:50px;margin-right:-20px;">反馈</span></a></div>';

document.write(suspendcode1);
window.setInterval("heartBeat()",10);
</script>
将在页面的右下角出现“反馈”浮动图标,请将 <a>标签中的 href, 及 background-img换成自己的即可。
代码解释:

方式二:静态方式
其实,静态方式,就是在页面的某个固定位置显示一个div即可。
例如:
<ul class="nlpc_float_bar" style="position:fixed;left:50%;margin-left:500px;width:50px;height:50px;bottom:50px;background:rgb(204,204,204);">
  <li style="text-align:center;">
  <a href="www.baidu.com" target="_blank">
  <div style="background-image:url(image/nlp/feedback.png);width:35px;height:23px;background-position:14px -24px;margin-top:5px;background-repeat:no-repeat;"></div>
  <div>反馈</div>
  </a>
  </li>
  </ul>
  评论这张
 
阅读(82)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017