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

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

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

以下是程序代码

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

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

相关资料更多>

HTC与苹果三星距离扩展 C2B形式成新武器

iSuppli：上网本将于2015年退出市场

网友爆料称微软雇水军宣传主机Xbox One

用友软件股价逆势下跌再融资方案现曙光

奇虎360证明了“惟平台化才能生存”是谬论，中国互联网不能少了周鸿祎

Line风靡亚洲，在北美却进展缓慢

联通丹东公司一高管造假套出手机变卖被判刑7年

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

智能手机：中国手机市场最受关注十五款产品清点

香港全能空间免费试用15天，送网站加速30M

推荐阅读更多>