锚点定位 动画的两种实现方式
一周过得好快啊，又到周五啦，小颖和我们家大颖下个礼拜被发配到广州去了，也就是说从下周一开始小颖又要开始魔鬼加班生活了。
所以小颖提前给奶奶说周末回家，我要吃浆水面，哈哈哈，明天回家就可以吃到啦，还有奶奶做的菜盒嘻嘻。不然去广州了又要两个礼拜都吃不到好吃的面条，不过广州那边的鲜虾肠粉、太古汇下面那家卖各种饼的店里面的好吃、刘洋姐姐带我去的卖各种意面的餐厅那里的好吃的也不少，上次回来之前在他们家我和大颖都点了好多，然后就吃撑了，嘻嘻·······，还有各种粉·······想想那些好吃的心里还能好受点^_^
好啦大家一起来看看代码吧：
1.使用js实现锚点定位 动画
html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>锚点特效</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/master.css"> <script src="js/jquery.js" type="text/javascript"></script> </head> <body> <div class="main"> <div class="box" id="box"> <div class="list-menu"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">锚点特效</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#section1" class="con">深圳拟出新规：</a></li> <li><a href="#section2" class="con">2017年春运四大变化：</a></li> <li><a href="#section3" class="con">雅虎再次爆出数据泄露事件：</a></li> </ul> </div> </div> </nav> </div> <div class="list-wrap"> <div id="section1" class="section-content"> <h4>深圳拟出新规:个人出租房暂将按10%税率征个税</h4> <p>原标题：深圳：个人出租住房暂将按10%税率征收</p> <p>中国证券网讯 记者12月15日从深圳市地税局获悉，日前，该局就《深圳市地方税务局关于个人出租房屋个人所得税征收管理的公告（征求意见稿）》向社会公开征求意见。</p> <p>根据意见稿，个人出租住房，暂减按10%的税率征收个人所得税；个人出租非住房，按20%的税率征收个人所得税。</p> <p>以下为全文：</p> <p>深圳市地方税务局关于个人出租房屋个人所得税征收管理的公告</p> <p>为进一步加强对个人出租房屋的个人所得税征管，根据《中华人民共和国税收征收管理法》及其实施细则、《中华人民共和国个人所得税法》及其实施条例，以及相关税收法律法规的规定，现公告如下：</p> <p>一、个人（含外籍个人、华侨、港澳台同胞）在深圳市范围内将自有房屋或租入房产出租给承租人，并取得租金或者其它经济利益所得，应按照“财产租赁所得”项目缴纳个人所得税。</p> <p>二、个人所得税征收采取据实征收和核定征收两种征收方式：</p> <p>1、纳税人出租（转租）房屋采取据实征收方式计算应纳税所得额时，可凭合法有效凭证，从其租金收入中依次减除房屋租赁过程中缴纳的税费、向出租方支付的租金、由纳税人负担的实际修缮费用，以及税法规定的费用扣除标准。</p> <p>2、纳税人不能提供合法、准确的成本费用凭证，不能准确计算房屋租赁成本费用的，按租金收入的5%核定应纳税所得额。</p> <p>3、应纳税额的计算公式如下：</p> <p>应纳税额=应纳税所得额×税率</p> <p>个人出租住房，暂减按10%的税率征收个人所得税；个人出租非住房，按20%的税率征收个人所得税。</p> <p>三、房屋租赁所得以一个月内取得的收入为一次，纳税人同一个月多次取得房屋租赁所得应合并计算纳税。</p> <p>四、个人出租房屋的个人所得税收入不含增值税，计算房屋出租所得可扣除的税费不包含本次出租缴纳的增值税。个人转租房屋的，其向房屋出租方支付的增值税税额，在计算转租收入时可予以扣除。</p> </div> <div id="section2" class="section-content"> <h4>2017年春运四大变化:部分火车站可“刷脸”进站</h4> <p>原标题：2017年春运四大变化：部分火车站可“刷脸”进站</p> <p>中新网北京12月15日电（记者 李金磊）2017年春运即将开始，与往年春运相比，这次春运至少有四点不一样：部分火车站可“刷脸”进站，火车票预售期缩短为30天，网购火车票起售时间提前至早6点，近六成火车票购买时不再需要验证码。</p> <p>部分火车站可“刷脸”进站</p> <p>2017年铁路春运从1月13日开始，全国铁路预计发送旅客3.56亿人次。中新网（微信公众号：cns2012）记者了解到，为了提高进站效率，北京西站等一些火车站开通了自助“刷脸”进站通道。</p> <p>“北京西站自11月底开通了自助进站通道，目前运行非常顺利，每天自助进站的人数大概在1.4万到1.8万人左右，大部分旅客进站速度是很快的，基本上都在5秒以内。”北京西站客运车间相关负责人告诉中新网记者。</p> <p>据介绍，要想自助“刷脸”进站，旅客需将二代身份证和蓝色车票叠放在一起，车票要放在身份证上方，车票正面的二维码要朝上、朝前，将身份证和车票一起放入闸机插入口，摄像头会采集旅客的人脸信息，与身份证人脸信息进行识别，如果一致的话，闸机就会打开，旅客就可以通过进站。</p> <p>中新网记者在北京西站观察到，这项能实现5秒内“刷脸”进站的“黑科技”颇受旅客欢迎。不少旅客向记者表示，相比通过人工通道进站，“刷脸”进站速度更快，更方便快捷。</p> <p>“我们现在安排了1-2名工作人员帮助旅客使用自助进站闸机，目前自助进站闸机的开放时间为早上6点半到晚上11点，春运期间会根据客流情况，适当延长开放时间。”北京西站客运车间相关负责人说，如果春运期间“刷脸”进站运行很顺利，未来会大规模推广，以不断提高乘客的乘车体验。</p> <p>“刷脸”进站虽然新潮，但也不是所有旅客都能用。北京西站客运车间相关负责人表示，目前，持有红色车票的不能使用，持有学生票、残疾人票等减价车票的由于需要人工核验减价的证件，所以只能走人工通道。”北京西站客运车间相关负责人表示。</p> </div> <div id="section3" class="section-content"> <h4>雅虎再次爆出数据泄露事件：涉10亿账户 有史以来最严重</h4> <p>新浪科技讯 北京时间12月14日上午消息，雅虎周三警告称，该公司又发现一起大规模黑客攻击事件，导致10亿用户帐号在2013年8月被盗。这成为有史以来最大规模的网络帐号被盗事件。</p> <p>此次被盗事件较该公司今年9月公布的2014年的那起事件的规模翻了一番，他们认为是政府控制的黑客主导了此次攻击。之前的帐号被盗事件至少影响5亿帐号，Verizon甚至在10月表示，可能因此撤销48.3亿美元收购雅虎核心资产的协议。</p> <p>Verizon表示，该公司将评估此事造成的影响才会最终作出决定。</p> <p>雅虎发言人对路透社表示，该公司在调查过程中就已经与Verizon展开了沟通，他们相信此事不会影响收购计划。</p> <p>雅虎已经要求所有用户重置密码。</p> <p>雅虎还在周三表示，该公司认为发动此次攻击的黑客已经接触到雅虎的专有代码，学会了如何通过伪造cookie的方式，在无需输入密码的情况下进入用户帐号。</p> <p>“雅虎的状况很糟。”著名安全专家、密码学家布鲁斯·施奈尔（Bruce Schneier）说，“他们并没有重视安全问题，这一点已经很明显。我以后很难再信任雅虎。”</p> <p>雅虎在描述此事时的用词非常谨慎，他们表示，此次攻击“可能”与今年9月公布的事件有所不同，此次被盗的信息“可能包含”姓名、电子邮件地址、电话号码、出生年月、散列密码，甚至加密或未加密的安全问题及答案。</p> <p>该公司尚未确定导致此次数据泄密的入侵事件，但他们指出，支付卡和银行账号并未存储在受影响的服务器上。</p> <p>该公司表示，他们是在向执法机构提供数据的过程中发现此事的。雅虎发言人表示，安全公司Fire Eye和Aon Plc都派专家协助该公司展开调查。</p> <p>作为一家互联网先驱企业，雅虎最近几年境况不佳，被谷歌和Facebook等后起之秀大幅超越。</p> </div> </div> </div> </div> </body> </html>
css：master.css
小颖先调用了bootstrap的css，然后自己又写了一部分，大家在用的时候记得先把bootstrap.css引进你的html
body { overflow-y: hidden; } .main { width: 660px; margin: auto; } .list-wrap { height: 400px; position: relative; margin-top: 10px; overflow: auto; } .mulu-img { width: 100%; height: 450px; }
js：
<script type="text/javascript"> $(function() { $(".navbar-nav li").each(function(index) { $(this).click(function() { $("li.active").removeClass("active"); //注意这里 $(this).addClass("active"); //注意这里 }); }); }); </script>
页面效果：
2.使用jquery.js和scrollspy.js插件实现锚点定位 动画
html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>scrollspy.js滚动监听</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/master.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/scrollspy.js"></script> </head> <body> <div class="main"> <div class="scroll-content "> <nav id="navbar-example2" class="navbar navbar-default "> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">锚点特效</a> </div> <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li class="active"><a href="#section1">深圳拟出新规：</a></li> <li><a href="#section2">2017年春运四大变化：</a></li> <li><a href="#section3">雅虎再次爆出数据泄露事件：</a></li> </ul> </div> </div> </nav> <div class="list-wrap" data-spy="scroll" data-target="#navbar-example2" data-offset="0"> <div id="section1" class="section-content"> <h4>深圳拟出新规:个人出租房暂将按10%税率征个税</h4> <p>原标题：深圳：个人出租住房暂将按10%税率征收</p> <p>中国证券网讯 记者12月15日从深圳市地税局获悉，日前，该局就《深圳市地方税务局关于个人出租房屋个人所得税征收管理的公告（征求意见稿）》向社会公开征求意见。</p> <p>根据意见稿，个人出租住房，暂减按10%的税率征收个人所得税；个人出租非住房，按20%的税率征收个人所得税。</p> <p>以下为全文：</p> <p>深圳市地方税务局关于个人出租房屋个人所得税征收管理的公告</p> <p>为进一步加强对个人出租房屋的个人所得税征管，根据《中华人民共和国税收征收管理法》及其实施细则、《中华人民共和国个人所得税法》及其实施条例，以及相关税收法律法规的规定，现公告如下：</p> <p>一、个人（含外籍个人、华侨、港澳台同胞）在深圳市范围内将自有房屋或租入房产出租给承租人，并取得租金或者其它经济利益所得，应按照“财产租赁所得”项目缴纳个人所得税。</p> <p>二、个人所得税征收采取据实征收和核定征收两种征收方式：</p> <p>1、纳税人出租（转租）房屋采取据实征收方式计算应纳税所得额时，可凭合法有效凭证，从其租金收入中依次减除房屋租赁过程中缴纳的税费、向出租方支付的租金、由纳税人负担的实际修缮费用，以及税法规定的费用扣除标准。</p> <p>2、纳税人不能提供合法、准确的成本费用凭证，不能准确计算房屋租赁成本费用的，按租金收入的5%核定应纳税所得额。</p> <p>3、应纳税额的计算公式如下：</p> <p>应纳税额=应纳税所得额×税率</p> <p>个人出租住房，暂减按10%的税率征收个人所得税；个人出租非住房，按20%的税率征收个人所得税。</p> <p>三、房屋租赁所得以一个月内取得的收入为一次，纳税人同一个月多次取得房屋租赁所得应合并计算纳税。</p> <p>四、个人出租房屋的个人所得税收入不含增值税，计算房屋出租所得可扣除的税费不包含本次出租缴纳的增值税。个人转租房屋的，其向房屋出租方支付的增值税税额，在计算转租收入时可予以扣除。</p> </div> <div id="section2" class="section-content"> <h4>2017年春运四大变化:部分火车站可“刷脸”进站</h4> <p>原标题：2017年春运四大变化：部分火车站可“刷脸”进站</p> <p>中新网北京12月15日电（记者 李金磊）2017年春运即将开始，与往年春运相比，这次春运至少有四点不一样：部分火车站可“刷脸”进站，火车票预售期缩短为30天，网购火车票起售时间提前至早6点，近六成火车票购买时不再需要验证码。</p> <p>部分火车站可“刷脸”进站</p> <p>2017年铁路春运从1月13日开始，全国铁路预计发送旅客3.56亿人次。中新网（微信公众号：cns2012）记者了解到，为了提高进站效率，北京西站等一些火车站开通了自助“刷脸”进站通道。</p> <p>“北京西站自11月底开通了自助进站通道，目前运行非常顺利，每天自助进站的人数大概在1.4万到1.8万人左右，大部分旅客进站速度是很快的，基本上都在5秒以内。”北京西站客运车间相关负责人告诉中新网记者。</p> <p>据介绍，要想自助“刷脸”进站，旅客需将二代身份证和蓝色车票叠放在一起，车票要放在身份证上方，车票正面的二维码要朝上、朝前，将身份证和车票一起放入闸机插入口，摄像头会采集旅客的人脸信息，与身份证人脸信息进行识别，如果一致的话，闸机就会打开，旅客就可以通过进站。</p> <p>中新网记者在北京西站观察到，这项能实现5秒内“刷脸”进站的“黑科技”颇受旅客欢迎。不少旅客向记者表示，相比通过人工通道进站，“刷脸”进站速度更快，更方便快捷。</p> <p>“我们现在安排了1-2名工作人员帮助旅客使用自助进站闸机，目前自助进站闸机的开放时间为早上6点半到晚上11点，春运期间会根据客流情况，适当延长开放时间。”北京西站客运车间相关负责人说，如果春运期间“刷脸”进站运行很顺利，未来会大规模推广，以不断提高乘客的乘车体验。</p> <p>“刷脸”进站虽然新潮，但也不是所有旅客都能用。北京西站客运车间相关负责人表示，目前，持有红色车票的不能使用，持有学生票、残疾人票等减价车票的由于需要人工核验减价的证件，所以只能走人工通道。”北京西站客运车间相关负责人表示。</p> </div> <div id="section3" class="section-content"> <h4>雅虎再次爆出数据泄露事件：涉10亿账户 有史以来最严重</h4> <p>新浪科技讯 北京时间12月14日上午消息，雅虎周三警告称，该公司又发现一起大规模黑客攻击事件，导致10亿用户帐号在2013年8月被盗。这成为有史以来最大规模的网络帐号被盗事件。</p> <p>此次被盗事件较该公司今年9月公布的2014年的那起事件的规模翻了一番，他们认为是政府控制的黑客主导了此次攻击。之前的帐号被盗事件至少影响5亿帐号，Verizon甚至在10月表示，可能因此撤销48.3亿美元收购雅虎核心资产的协议。</p> <p>Verizon表示，该公司将评估此事造成的影响才会最终作出决定。</p> <p>雅虎发言人对路透社表示，该公司在调查过程中就已经与Verizon展开了沟通，他们相信此事不会影响收购计划。</p> <p>雅虎已经要求所有用户重置密码。</p> <p>雅虎还在周三表示，该公司认为发动此次攻击的黑客已经接触到雅虎的专有代码，学会了如何通过伪造cookie的方式，在无需输入密码的情况下进入用户帐号。</p> <p>“雅虎的状况很糟。”著名安全专家、密码学家布鲁斯·施奈尔（Bruce Schneier）说，“他们并没有重视安全问题，这一点已经很明显。我以后很难再信任雅虎。”</p> <p>雅虎在描述此事时的用词非常谨慎，他们表示，此次攻击“可能”与今年9月公布的事件有所不同，此次被盗的信息“可能包含”姓名、电子邮件地址、电话号码、出生年月、散列密码，甚至加密或未加密的安全问题及答案。</p> <p>该公司尚未确定导致此次数据泄密的入侵事件，但他们指出，支付卡和银行账号并未存储在受影响的服务器上。</p> <p>该公司表示，他们是在向执法机构提供数据的过程中发现此事的。雅虎发言人表示，安全公司Fire Eye和Aon Plc都派专家协助该公司展开调查。</p> <p>作为一家互联网先驱企业，雅虎最近几年境况不佳，被谷歌和Facebook等后起之秀大幅超越。</p> </div> </div> </div> </div> </body> </html>
这里面的css和上面的css是一样的我就不重复写啦，嘻嘻
页面效果：
