注册 | 登陆

您的位置：阿里西西 > 网页特效 > 页面特效 > 详细内容

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

稿源：本站整理 2018-09-21 点击： 1 撤稿纠错

滚动条滚动的时候，始终显示在网页右上角飘浮的图层文字特效...

阿里西西web开发网为大家整理了这篇始终显示在网页右上角飘浮的图层文字特效，如果这篇文章在您的工作或学习中有帮助，欢迎常回来看看哦，更多精彩的教程请访问我们的主页,以下是教程浏览：

脚本代码(For Alixixi.com)如下:

<!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">网页特效网 js.alixixi.com</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>

始终显示在网页右上角飘浮的图层文字特效文章就讲到这里，欢迎浏览本站的其它内容，点击这里返回首页

更多关于右上角飘浮的文章

·上一篇：纯CSS实现的鼠标悬停时放大且加大图片、图层的高度并且显示到最前的特效
·下一篇：用HTML5+canvas代码绘制的星空月亮图案特效代码

相关阅读

特效分类LIST>>返回特效首页

相关排行总榜

图像特效

菜单特效

日期特效

鼠标经过图片上时，图片突出显示特效
HTML5打造的酷炫3D 360度图片立体浏览特效
鼠标经过图片显示价格或浮动层的js特效代码
带缓冲效果的向上翻转轮播的图片广告特效代
图片延时加载原生JS特效广告代码
鼠标移动到图片上方渐变式切换图片的JS特效
原生JS写的一个书架式的图片缩放滚动展示特
纯CSS实现的鼠标悬停时放大且加大图片、图层
鼠标悬停在图片上浮出并显示文字提示的JS特
图像不随滚动条移动，始终固定在网页垂直居
fixed仿淘宝商品列表顶部浮动工具栏效果特效
很简洁的js树状竖型风格导航菜单代码
页面div导航菜单栏部分始终浮动居于最底部的
一个类似京东网页左侧菜单扩展的特效代码
一段简洁大方的Tab菜单选项卡的JS特效代码
鼠标滑动经过标题时显示详细介绍内容信息的
简单实用的纯CSS实现的横向多级导航特效代码
网页超过一屏时自动浮动在网页最上方的导航
始终飘浮动于网页右侧可缓冲效果弹出和收缩
一款通过jQuery实现的表格列表展开及收缩折
一款原生JS编写的文本框输入日历日期选择器
JS制作的一分钟时间按秒进行倒计时的特效代
一段测试浏览器时钟精度的网页特效代码
用js实现给网页上每日自动更新换一张图片展
js代码下按指定格式显示日期时间样式特效
原生JS代码制作带记事备忘功能的双月份显示
用js检测判断时间日期的间距大于多少天
利用js制作一个最简单的带秒表走动的日期时
一款网友自编简单的日历js代码特效
通过JQUERY制作类似酒店入住时间的日期选择

分类热门文章