锚点相信大家都使用过吧！点击后僵硬的切换是不是很不爽呢？

下面分享一个小技巧，根据锚点offset值来实现动画切换

<!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=gb2312" />

<title>无标题文档</title>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<style>

*{ margin:0; padding:0;}

.main{ width:1000px; margin:0 auto; position:relative; }

.main img{ float:left;}

.bg{ position:absolute; width:100%; z-index:-5;}

.bg01{ height:885px;background:url(../images/b_01.jpg) no-repeat center;}

.bg02{ height:938px;background:url(../images/b_04.jpg) no-repeat center; }

.bg03{ height:946px;background:url(../images/b_02.jpg) no-repeat center; }

.bg04{ height:946px;background:url(../images/b_03.jpg) no-repeat center; }

.div_scoll{ position:fixed; width:50px; height:200px; right:100px; top:50%;}

a{ display:block; background:#3F6; color:#000; width:50px; height:50px; }

</style>

</head>

<body>

<div class="wrapper">

<div class="main">

<div id="tab_01" class="tab"><img src="data:images/m_01.jpg" alt="" /></div>

<div id="tab_02" class="tab"><img src="data:images/m_04.jpg" alt="" /></div>

<div id="tab_03" class="tab"><img src="data:images/m_02.jpg" alt="" /></div>

<div id="tab_04" class="tab"><img src="data:images/m_03.jpg" alt="" /></div>

</div>

<div class="bg">

<div class="bg01" id="bg01"></div>

<div class="bg02" id="bg02"></div>

<div class="bg03" id="bg03"></div>

<div class="bg04" id="bg04"></div>

</div>

</div>

<div class="div_scoll">

<a href="#bg01">图1</a>

<a href="#bg02">图2</a>

<a href="#bg03">图3</a>

<a href="#bg04">图4</a>

</div>

<script>

$(function(){

$(".div_scoll a").click(function(){

$("html,body").animate({ scrollTop:$($(this).attr("href")).offset().top + "px"},1000);

});

});

</script>

</body>

</html>

jquery实现锚点动画效果的更多相关文章

  1. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  2. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  3. jquery 最简单的动画效果

    <p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...

  4. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  5. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  6. 关于JQuery（最后一点动画效果*）

    1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...

  7. 强大的JQuery（二）--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  8. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  9. jQuery入门基础（动画效果）

    一.隐藏显示 1.show()--显示隐藏的被选择元素 例:$(selector).show(speed,callback); 2.hide()--隐藏被选元素的内容 例:$(selector).hi ...

随机推荐

  1. ORACLE 如何查询被锁定表及如何解锁释放session

    ORACLE EBS操作某一个FORM界面,或者后台数据库操作某一个表时发现一直出于"假死"状态,可能是该表被某一用户锁定,导致其他用户无法继续操作 --锁表查询SQLSELECT ...

  2. TCP/IP详解之：Ping程序、Traceroute程序

    Ping程序: ping程序是通过发送一份ICMP回显请求报文(即ICMP报文的一种,其类型为8,代码为0)给主机,并等待返回ICMP回显应答 来测试另一台主机是否可达. ping程序不用经过传输层, ...

  3. InterviewProblems

    package com.xiaoysec; /** * 下面是面试趣医网技术面的时候出现的一个简单的题目 题目的要求是将一个数组中的奇数和偶数进行分离 以奇数在前一部分为例进行解题 * 算法的主要思想 ...

  4. C++中的函数指针和指针函数

    C++中的函数指针和指针函数       数组名一般可以被当成指向数组第一个元素的常量指针,同样的情况,在函数中,函数名可以本当成指向函数的常量指针,假如一个函数已经定义,那么它在计算机中一定有特定的 ...

  5. hadoop笔记之Hive的管理(web界面方式)

    Hive的管理(二) Hive的管理(二) Web界面方式 端口号9999 启动方式:hive --service hwi 通过浏览器来访问:http://<IP地址>:9999/hwi/ ...

  6. ajax调用后台Java

    //html部分 <input type='text' placeholder='用户名' id="username" name="username" c ...

  7. 用Servlet实现聊天室设计

    实验一   Servlet编程 一.实验目的 1.熟悉Java EE编程环境JDK和NetBeans的安装,配置和使用: 2.掌握Servlet的编写及部署: 3.掌握Servlet的工作原理和编程接 ...

  8. SQL Server 判断数据库是否存在，表是否存在

    if DB_ID('testdb') is not null -- 如果这个数据库已经存在了 drop database testdb; create database testdb; if OBJE ...

  9. 4.java.lang.NumberFormatException（数据类型转换异常）

    字符串转换为数字异常 当试图将一个String转换为指定的数字类型,而该字符串确不满足数字类型要求的格式时,抛出该异常.如现在讲字符型的数据“123456”转换为数值型数据时,是允许的. 但是如果字符 ...

  10. [android]清单文件中MAIN与LAUNCHER的区别

    原文:[android]清单文件中MAIN与LAUNCHER的区别 MAIN 和 LAUNCHER,之前一直不注意这两个有区别,写程序的时候都放到一个filter中,前两天面试问到了,总结一下: MA ...