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

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

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

以下是程序代码

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

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

相关资料更多>

八位知名设计师评iOS7：新鲜但复杂

美国政府关门可能影响去哪儿等公司IPO

途牛旅游网今晚挂牌纳斯达克融资1亿美元

火一把就死：百度魔图验证社交游戏衰亡宿命

神州泰岳雪上加霜：副总违规买卖遭罚

这一次，微软将带给我们什么惊喜？

公信力消失：马航事件社交媒体传播之痛

“组合拳”怎么打拆解小米新玩法

HDS发布《2013中国CIO洞察白皮书》

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

推荐阅读更多>