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> ...

随机推荐

ASP.NET MVC 必须设置 ErrorMessageString 或 ErrorMessageResourceName，但不能同时设置二者。
解决方案: 1.此错误是指你的验证错误信息为空(required="")和required提示信息一致,引发的错误. 简单的来说就是两个验证错误提示消息一样了. 2.修改提示消息解 ...
UIDynamic - 推动行为: UIPushBehavior
用途: 从一个点移动到另外一个点; 相关属性: mode : UIPushBehaviorModeContinuous //推移模式 angle : setAngle //推移角度 magnitu ...
C#安全性记录
安全性一直是开发中,重中之重的问题.不过平时用的不算特别多,基本上用个MD5,SSL也就到这了.再次记录一下,以免忘记. MD5多次加密 MD5算法是不可逆算法.应用于密码验证,完整性验证这种特征.这 ...
Java数据结构——字典树TRIE
又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种. 典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计. 它的优点是:利用字符串的公共 ...
Html5 杂记
(一):html5的声明 <!DOCTYPE html> 注意:声明必须是 HTML 文档的第一行,位于 <html> 标签之前. 声明不是 HTML 标签:它是指示 we ...
[Head First设计模式]餐馆中的设计模式——命令模式
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
thinkphp自定义标签库
thinkphp ~ php中的类, 的成员变量, 本身是没有类型说明的, 那么我怎么知道它的类型呢? 或初始值呢? 通常在类定义中, 如果能给一个初始值的(对于已知简单类型的),最好给一个初始值, ...
第一次部署Struts2时出现错误java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter.class
报如下错误 at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1720) at org. ...
AOP基本名词解释
【Alpha版本】第一天 11.7
一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成员前段时间完成任务今天完成任务明天要做任务问题困难心得体会胡泽善部分APP功能我要招聘详情的展示注册界面的实现一些特殊效 ...

js特效2

js特效2的更多相关文章

随机推荐

热门专题