第50天：scrollTo小火箭返回顶部
scrollTo(x,y)//可把内容滚动到指定的坐标
scrollTo(xpos,ypos)//x,y值必需
1、固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<script src="my.js" type="text/javascript"></script>
<style>
*{
margin: 0;
padding: 0;
}
img{
vertical-align: top;
}
.main{
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
.fixed{
position: fixed;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="top" id="Q-top">
<img src="data:images/top.png" alt="">
</div>
<div class="nav" id="Q-nav">
<img src="data:images/nav.png" alt="">
</div>
<div class="main">
<img src="data:images/main.png" alt="">
</div> </body>
</html>
<script>
var nav=$("Q-nav");
var navTop=nav.offsetTop;//导航栏距离顶部的距离
//alert(navTop);
window.onscroll=function(){
//console.log(scroll().top);
if(scroll().top>=navTop){
nav.className="nav fixed";
}else{
nav.className="nav";
}
}
</script>
2、鼠标移动跟随的广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟随的广告</title>
<style>
img{
position: absolute;
top:50px;
left:0; }
.txt{
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="data:images/aside.jpg" alt="" id="ad">
<div class="txt" id="txt">
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
<p>好好学习，天天向上</p>
<p>天天奋斗，天天快乐</p>
</div>
</body>
</html>
<script src="my.js" type="text/javascript"></script>
<script>
window.onload=function(){
var ad=$("ad");
var leader=0;
var target=0;
var timer=null;//定时器
var top=ad.offsetTop;
window.onscroll=function(){
target=scroll().top+top;//把最新的scrollTop给target
timer=setInterval(function(){
leader=leader+(target-leader)/10;
ad.style.top=leader+'px';
},30)
} }
</script>
3、小火箭返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
width: 2000px;
}
.top{
position: fixed;
right: 50px;
bottom: 100px;
display: none;
}
</style>
</head>
<body>
<div class="top" id="gotop">
<img src="data:images/Top.jpg" alt="">
</div>
<div>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
<p>我是内容部分，有很多很多</p>
</div><!--内容部分-->
</body>
</html>
<script src="my.js" type="text/javascript"></script>
<script>
var goTop=$("gotop");
window.onscroll=function(){
scroll().top>0?show(goTop):hide(goTop);
leader=scroll().top;
}
var leader=0;
var target=0;
var timer=null;
goTop.onclick=function(){
target=0;//点击后 等于0
timer=setInterval(function(){
leader=leader+(target-leader)/10;
window.scrollTo(0,leader);
if(leader==target){
clearInterval(timer);
}
},20)
}
</script>
4、屏幕滑动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屏幕滑动效果</title>
<style>
ul,ol{
list-style: none;
}
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#ul{
width: 100%;
height: 100%;
}
ul li{
width: 100%;
height: 100%;
background-color: peachpuff; }
#ol{
position: fixed;
top:0;
left:50px;
}
#ol li{
width: 50px;
height: 50px;
border:1px solid #000;
}
</style>
</head>
<body>
<ul id="ul">
<li>首页</li>
<li>关注</li>
<li>动态</li>
<li>风格</li>
<li>作品</li>
</ul>
<ol id="ol">
<li>首页</li>
<li>关注</li>
<li>动态</li>
<li>风格</li>
<li>作品</li>
</ol>
</body>
</html>
<script src="my.js"></script>
<script>
var ulBox=$("ul");
var ulBoxli=ulBox.children;
var olBox=$("ol");
var olBoxli=olBox.children;
var bgColor=["pink","blue","yellow","green","orange"];
var leader=0;
var target=0;
var timer=null;
for(var i=0;i<ulBoxli.length;i++){
ulBoxli[i].style.backgroundColor=bgColor[i];
olBoxli[i].style.backgroundColor=bgColor[i];
olBoxli[i].index=i;//记录当前的索引号
olBoxli[i].onclick=function(){
clearInterval(timer);
target=ulBoxli[this.index].offsetTop;//重点
timer=setInterval(function(){
leader=leader+(target-leader)/10;
window.scrollTo(0,leader);//屏幕滑动
},20)
}
}
</script>
第50天：scrollTo小火箭返回顶部的更多相关文章
- jQuery---小火箭返回顶部案例
小火箭返回顶部案例 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐 ...
- 小程序返回顶部top滚动
wxjs const app = getApp(); Page({ data:{ // top标签显示(默认不显示) backTopValue:false }, // 监听滚动条坐标 onPageSc ...
- jQuery实现返回顶部
由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
- 【微信小程序】实现类似WEB端【返回顶部】功能
1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- DIY 博客全文界面的推荐、反对、加关注、返回顶部、快速评论等小功能的集成
博客园已经很不错了,但作为比较“挑剔”的用户,在使用的过程中,还是有一些地方不爽的. 我不是一个专业的前台程序员,也只能凭借自己蹩脚的JS和CSS知识完成对页面的小改造(专业的大虾莫要鄙视呀..). ...
- 微信小程序ios点击状态栏返回顶部不好使
最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...
- 用jquery实现小火箭到页面顶部的效果
恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下 需要引入jquery 代码和布局都很简单 <!DOCTYPE ...
随机推荐
- go学习笔记-反射（Reflection）
反射(Reflection) 反射是利用reflect包实现的 反射可大大提高程序的灵活性,使得interface{}有更大的发挥余地 反射使用TypeOf和ValueOf函数从接口中获取目标对象信息 ...
- Multiclonal Invasion in Breast Tumors Identified by Topographic Single Cell Sequencing
Title: Multiclonal Invasion in Breast Tumors Identified by Topographic Single Cell Sequencing 课题的目的 ...
- 为什么我要放弃javaScript数据结构与算法（第七章）—— 字典和散列表
本章学习使用字典和散列表来存储唯一值(不重复的值)的数据结构. 集合.字典和散列表可以存储不重复的值.在集合中,我们感兴趣的是每个值本身,并把它作为主要元素.而字典和散列表中都是用 [键,值]的形式来 ...
- MongoDB入门---文档查询操作之条件查询&and查询&or查询
经过前几天的学习之路,今天终于到了重头戏了.那就是文档查询操作.话不多说哈,直接看下语法: db.collection.find(query, projection) query :可选,使用查询操作 ...
- 20145234黄斐《Java程序设计》第九周学习总结
教材学习内容总结 JDBC Java语言访问数据库的一种规范,是一套API.JDBC (Java Database Connectivity) API,即Java数据库编程接口,是一组标准的Java语 ...
- 北京Uber优步司机奖励政策（12月20日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Sysbench安装步骤及详情
Sysbench安装步骤及详情 Sysbench是压力测试工具,可以测试系统的CPU,内存,I/O等,也可以用于数据库的性能测试 Sysbench安装步骤: 安装具体分为Ubuntu16.04和Cen ...
- kettle_简单入门
简介 Kettle是一款纯Java开发的ETL工具,它是跨平台的,所以它可以在Window.Linux.Unix上运行.注意什么是ETL,读者可以自行百度了解,我的理解是将一个数据库的数据导入到另外一 ...
- 使用js跳转手机站url的若干注意点
引子: 去年年底公司开发手机站平台,经历了前期的用户群.市场调查,产品需求分析,产品原型设计,ui前端到程序开发上线测试等等工作,终于上线...此处略去本人作为前端开发的心情. 应该说,我们的手机站平 ...
- NMAP-高级用法
1.报文分段 2.偏移 –mtu后面的数字是8的倍数 3.源端口欺骗 4.指定报文长度 5.ttl 6.mac地址伪造 0代表随机伪造 7.正常输出 8.输出为xml 9.输出为grep 10.输出所 ...