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

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

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

以下是程序代码

<!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 全部选择提示：你可先修改部分代码，再按运行]

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

相关资料更多>

FB上广告费用昂贵而且效果不及Twitter

亚马逊落户上海自贸区：美国货直邮中国

国美电商开打价钱战牟贵先言行矛盾受质疑

特斯拉将获上海免费牌照充电桩面临双重标准

全球五大电信设备商业绩：华为净利居首

【晚报】女子泰国游晒10照片流量费2000

从百度世界大会看大数据

Facebook财报前瞻：投资者仍信心不足

王建宙解构OTT效劳中移动重塑飞信平台

香港全能空间免费试用15天香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL

推荐阅读更多>