注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery制作带动画效果的锚点跳转特效

jQuery插件 fishcity 5066浏览

一款jquery制作的非常大气且简单的锚点跳转特效,废话不多说,先上图。

下面开始制作:

第一步:引入jQuery和Css文件

<script src="js/jquery.min.js" type="text/javascript"></script>
<link href="css/christmas.css" rel="stylesheet" type="text/css" />

第二步:html代码,代码主要分三模块,1、头部模块 2、内容模块 3、导航数据模块

1、头部模块,点击顶部主题1-5按钮跳动

 <ul class="index_nav">
    <li><a href="javascript:void(0)" title="1"><i>主题</i><strong>1</strong></a></li>
    <li><a href="javascript:void(0)" title="2"><i>主题</i><strong>2</strong></a></li>
    <li><a href="javascript:void(0)" title="3"><i>主题</i><strong>3</strong></a></li>
    <li><a href="javascript:void(0)" title="4"><i>主题</i><strong>4</strong></a></li>
    <li><a href="javascript:void(0)" title="5"><i>主题</i><strong>5</strong></a></li>
  </ul>
</div>

2、内容模块,各个标题和图片内容

<div class="row" id="main">
  <h2 id="index_1">新年快乐</h2> 
  <div class="mainpage mainpage1"><img src="images/zYdrbnwEff.jpg" width="1156" height="650"  alt=""/></div>
</div>
<div class="row">
  <h2 id="index_2">圣延快乐</h2>
  <div class="mainpage mainpage2"><img src="images/m1ctUiimS4.jpg" width="1156" height="650"  alt=""/></div>  
</div>
<div class="row">
  <h2 id="index_3">时钟2014</h2>
  <div class="mainpage mainpage3"><img src="images/NVunFpwgUr.jpg" width="1156" height="650"  alt=""/></div>
</div>
<div class="row">
  <h2 id="index_4">时髦的圣诞老人</h2>
  <div class="mainpage mainpage4"><img src="images/pimMVasKxQ.jpg" width="1156" height="650"  alt=""/></div>
</div>
<div class="row">
  <h2 id="index_5">好大的礼物</h2>
  <div class="mainpage mainpage5"><img src="images/qCsKJAfT0E.jpg" width="1156" height="650"  alt=""/></div>
</div>

3、数字模块,点击时跳到相应的主题

<div id="tbox"><!-- 这个必须有  id="tbox"-->
    <a class="taoba" href="javascript:void(0)" title="1">1</a>
    <a class="taoba" href="javascript:void(0)" title="2">2</a>
    <a class="taoba" href="javascript:void(0)" title="3">3</a>
    <a class="taoba" href="javascript:void(0)" title="4">4</a>
    <a class="taoba" href="javascript:void(0)" title="5">5</a>
    <a id="gotop" href="javascript:void(0)" title="回到顶部">回到顶部</a> <!-- 这个也是id="gotop"  -->
</div>

例子中加了下面这段码,目的是清除掉浮动。不明白清除浮动的百度下吧,这里就不多说了

<div style="text-align:center;clear:both">

第三步:JS代码了,这个主要是用jquery的动画效果

$(function($) {
   $(".index_nav li a").click(function(event) { //绑定按钮的单击事件
      var index=this.title //取得点击按钮的title属性,这里就是按钮的数字
      var id='#'+'index_'+index //取得需要跳转到的DIV的ID
     $("html,body").animate({scrollTop: $(id).offset().top}, 1000); //一秒跳转到该ID的位置
   });
   $(".taoba").click(function(event) { //含义同上
      var index=this.title
      var id='#'+'index_'+index
     $("html,body").animate({scrollTop: $(id).offset().top}, 1000);
   });
   function a(x,y){
    l = $('#main').offset().left;
    w = $('#main').width();
    $('#tbox').css('left',(l + w + x) + 'px');
    $('#tbox').css('bottom',y + 'px');
 
}//获取#tbox的div距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度
 
$(function() {  
    $(window).scroll(function(){
    t = $(document).scrollTop();
 
    if(t>50){//显示或隐藏数字按钮
      $('#tbox').show();
    }else{
      $('#tbox').hide();
    }
    if(t > 50){ //显示或隐藏GOTOP按钮
        $('#gotop').fadeIn('slow');
    }else{
        $('#gotop').fadeOut('slow');
    }       
})   
 
    a(10,100);//#tbox的div出现在的位置
 
    $('#gotop').click(function(){ 
        $('body,html').animate({
            scrollTop: 0
        },
        800);//点击回到顶部按钮,缓懂回到顶部,数字越小越快
        return false;  
    })
});
});

好了,终于写完,要是看不懂的话,那就去恶补下jquery吧!

转载请注明:jQ酷 » jQuery制作带动画效果的锚点跳转特效

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。