始终显示在网页右上角飘浮的图层文字特效-JS特效-爱易网页

始终显示在网页右上角飘浮的图层文字特效

日期：2014-05-18　浏览次数：20139 次

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
     margin:0;
     padding:0;
 }
.float {
    background-color: #FFFEE0;
    border: 1px solid #FFECB0;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    padding: 10px;
    position: absolute;
    right: 10%;
    top:134px;
    width: 80px;
}
</style>

</head>

<body style="height:3000px;">
 <div class="float" id="float">1c城市城</div>
</div>

<script type="text/javascript">
window.onscroll = function(){
 setInterval(scrol,30); 
}
function scrol(){
 var oFd = document.getElementById('float');
 var top = oFd.style.top;
 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
 if(scrollTop > 134){
  oFd.style.position = 'fixed';
  oFd.style.top = '0';
 }else{
  oFd.style.position = 'absolute';
  oFd.style.top = '134px';
 }
}
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

相关资料更多>

苹果优势逐渐丧失传即将推出廉价iPhone

高德百度地图免费背后：李彦宏暗斗马云周鸿祎

途牛开盘价9美元与发行价持平

首家国有独资P2P平台上线或预示政策日渐明朗

评论：马云的成功建立在什么基础上很值得怀疑

百视通：Xbox One汉化获批游戏迷欢呼吧

苹果音乐效劳新战略：与唱片商停止流媒体协作

解析2014年阿里百度等五大互联网巨头深度布局

天音通信170套餐试商用放号：流量两年不清零

香港云服务器免备案云主机VPS 国内独立IP 独享15M 月付SSD

推荐阅读更多>