js特效2
侧边栏简单版
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
body,div{
margin: 0;
padding: 0;
} .scrollbar{position: absolute;right:0;top:0;border: 1px solid red;width:200px;height: 200px;} </style> </head>
<body style="border:1px solid green; height: 2000px;" >
<div class="scrollbar">
123 <br/>
<img src="123.png" alt="" width="100"/>
</div>
<script>
var heightAll=$(window).height();
var heightBar=$('.scrollbar').height();
var fixedTop=(heightAll-heightBar)/2;
$('.scrollbar').css({top:fixedTop+'px'});
$(window).scroll(function () {
var scrollTop=$(window).scrollTop();
var scrollEnd=scrollTop+fixedTop;
$(".scrollbar").stop().animate({top:scrollEnd});
})
</script>
</body>
</html>
侧边栏详细版
<!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>jquery右侧随滚动条浮动导航代码 - xw素材网</title>
<script type="text/javascript" src="js/jQuery.js"></script>
<style>
body{ margin:0; padding:0;}
.main{ width:100%; height:auto;}
.main div{ width:100%;}
#float01{ height:930px; background:#004}
#float02{ height:900px; background:#00f}
#float03{ height:980px; background:#0ff}
#float04{ height:930px; background:#0ad}
#float05{ height:960px; background:#0d0}
#float06{ height:970px; background:#0f0}
#float07{ height:900px; background:#dd4}
div.floatCtro{ width:60px; height:350px; position:absolute; right:0; top:0; z-index:100}
div.floatCtro p{width:60px; text-align:center; height:40px; line-height:40px; font-family:'微软雅黑'; font-size:14px; color:#676767; margin:0; padding:0; cursor:pointer; background:#fff;}
div.floatCtro a{ display:inline-block; display:none; width:60px; height:60px; margin:10px 0 0 0; background:#fff; color:#000; vertical-align:middle; cursor:pointer;}
div.floatCtro a span{ display:block; width:28px; height:44px; line-height:22px; font-family:'微软雅黑'; font-size:14px; line-height:22px; text-align:center; margin:8px 16px; _margin:-10px 0 0 16px;}
div.floatCtro a:hover{ background:#000; color:#fff; zoom:1;}
div.floatCtro p:hover{ background:#c40000; color:#fff;}
div.floatCtro p.cur{ background:#c40000; color:#fff;}
</style>
<script>
$(function(){
var AllHet = $(window).height();
var mainHet= $('.floatCtro').height();
var fixedTop = (AllHet - mainHet)/2
$('div.floatCtro').css({top:fixedTop+'px'});
$('div.floatCtro p').click(function(){
var ind = $('div.floatCtro p').index(this)+1;
var topVal = $('#float0'+ind).offset().top;
$('body,html').animate({scrollTop:topVal},1000)
})
$('div.floatCtro a').click(function(){
$('body,html').animate({scrollTop:0},1000)
})
$(window).scroll(scrolls)
scrolls()
function scrolls(){
var f1,f2,f3,f4,f5,f6,f7,bck;
var fixRight = $('div.floatCtro p');
var blackTop = $('div.floatCtro a')
var sTop = $(window).scrollTop();
fl = $('#float01').offset().top;
f2 = $('#float02').offset().top;
f3 = $('#float03').offset().top;
f4 = $('#float04').offset().top;
f5 = $('#float05').offset().top;
f6 = $('#float06').offset().top;
f7 = $('#float07').offset().top;
var topPx = sTop+fixedTop
$('div.floatCtro').stop().animate({top:topPx});
if(sTop<=f2-100){
blackTop.fadeOut(300).css('display','none')
}
else{
blackTop.fadeIn(300).css('display','block')
}
if(sTop>=fl){
fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f2-100){
fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f3-100){
fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f4-100){
fixRight.eq(3).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f5-100){
fixRight.eq(4).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f6-100){
fixRight.eq(5).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f7-100){
fixRight.eq(6).addClass('cur').siblings().removeClass('cur');
}
}
})
</script>
<title>test</title>
</head>
<body>
<div class="main">
<div id="float01" class="cur"></div>
<div id="float02"></div>
<div id="float03"></div>
<div id="float04"></div>
<div id="float05"></div>
<div id="float06"></div>
<div id="float07"></div>
<div class="floatCtro">
<p>楼层一</p>
<p>楼层二</p>
<p>楼层三</p>
<p>楼层四</p>
<p>楼层五</p>
<p>楼层六</p>
<p>楼层七</p>
<a>
<font style="width:60px; height:1px; display:block"></font>
<span>返回顶部</span>
</a>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.xwcms.net/" target="_blank">xw素材网</a></p>
</div>
</body>
</html>
js特效2的更多相关文章
- 滚动变色的文字js特效
Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...
- 150个JS特效脚本
收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...
- <一>初探js特效魅力之选项卡05
初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 鼠标经过显示二级菜单的js特效
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- 又到圣诞节，让你的网页下起雪(js特效)
又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...
- 很不错的js特效
这里有好多的js特效:http://www.jsfoot.com/jquery/images/qh/ jquery图片特效 jquery幻灯片 .... 有什么js需要可以到这里来下载:http:// ...
- 个人网站html5雪花飘落代码JS特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
- js特效 15个小demo
js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...
随机推荐
- the pipeline of call SNP
######################################## ############### Mapping ################ ################## ...
- Map工具系列-03-代码生成BySQl工具使用说明
所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...
- WKWebView与JS交互，UIWebView+JavascriptCore和JS交互
最近一直在做有关Swift和JavaScript交互的程序,所以有关UIWebView和WKWebView在使用上的差别在此总结下: UIWebView: (1)创建 var webView: UIW ...
- docker入门记录１
一. 什么是Docker 1．英文意思是集装箱,很形象.直白点就是将程序运行环境打包在一个箱子里,然后箱子扔到哪里,里边的程序都可以运行.这样以来一个显而易见的好处是:和以前的开发环境等相比,你不用每 ...
- 基于Linux平台的libpcap源码分析和优化
目录 1..... libpcap简介... 1 2..... libpcap捕包过程... 2 2.1 数据包基本捕包流程... 2 2.2 libpcap捕包过程... ...
- ADMM与one-pass multi-view learning
现在终于开始看论文了,机器学习基础部分的更新可能以后会慢一点了,当然还是那句话宁愿慢点,也做自己原创的,自己思考的东西.现在开辟一个新的模块----多视图学习相关论文笔记,就是分享大牛的paper,然 ...
- ionic ios 友盟多渠道/自动签名/加固之腾讯云。乐固
之前写了一篇文章主要是介绍使用gradle进行多渠道分发处理的文章--链接:http://www.cnblogs.com/happen-/p/6029387.html 最近在做app上线的处理,发现某 ...
- Android系统学习小记
序言 Android 应用的启动到一个页面显示出来,这个过程涉及到点击事件的处理,以及如何启动一个Activity,启动一个Activity之后,如何将Activity中我们的设置的ContentVi ...
- [UML]UML系列——类图Class
相关文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) 一.类图的概念及组成 1.类图的概念 类图是描述类.接 ...
- AOP基本名词解释