之前韩国首页首先推出这个导航就引起了讨论。
实际上，这种效果非常简单，只是我们缺乏思维而已。
原理是通过背景+偏移来做到动画的，用setTimeout和backgroundPosition就可以实现动画了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/>
<title>Untitled Document</title>
<style type="text/css">
span {
width: 52px;
height: 37px;
display: block;
background: url(button.gif) no-repeat 0px 0px;
}
</style>
<script type="text/javascript">
function dsp(n, playing){
if (n <= 6 && n >= 0) {
var button = document.getElementById("button");
var width = 52;
var offsetWidth = -width * n;
button.style.backgroundPosition = offsetWidth + "px 0px";
n = playing ? n + 1 : n - 1;
setTimeout("dsp(" + n + "," + playing + ")", 45);
}
}
</script>
</head>
<body>
<span onmouseover="dsp(1, true);" onmouseout="dsp(6);" id="button"> </span>
</body>
</html>
为什么要使用这种方法？
因为，这样可以减少HTTP链接，加快浏览速度，减少服务器负担。
所以对于，GOOGLE这种级别的访问，是非常有用的，不是为了酷..
2008-12-28 添加 jQuery版
/**
* jQuery wko.DynImg
*
* version 0.1 (2008/8/15)
*
* @author Willko Cheng <willko@foxmail.com>
*
*/
(function($){
$.fn.extend({
DynImg: function(options){
options = $.extend({
step: 0,
width: 0,
timeout: 60
}, options);
return this.each(function(){
var over, out;
var overHandler = function(e, me){
var me = me || $(this);
clearTimeout(out);
var position = me.css("backgroundPosition").split(' ');
var x = parseInt(position[0]);
var y = parseInt(position[1]);
if (x >= -options.step * options.width) {
me.css({
backgroundPosition: x + -options.width + "px " + y + "px"
});
over = setTimeout(function(){
overHandler(e, me)
}, options.timeout);
}
};
var outHandler = function(e, me){
var me = me || $(this);
clearTimeout(over);
var position = me.css("backgroundPosition").split(' ');
var x = parseInt(position[0]);
var y = parseInt(position[1]);
if (x <= -options.width) {
me.css({
backgroundPosition: x + options.width + "px " + y + "px"
});
out = setTimeout(function(){
outHandler(e, me)
}, options.timeout);
}
};
$(this).hover(overHandler, outHandler);
});
}
});
})(jQuery);
用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/>
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.pack.js">
</script>
<script type="text/javascript" src="wko.DynImg.js">
</script>
<style type="text/css">
.toolbar {
margin: 0;
padding: 0;
list-style-type: none;
}
.toolbar a{
display: block;
height: 37px;
width: 50px;
background: url(toolbar_animation_20080807.png) no-repeat;
}
</style>
</head>
<body>
<ul class="toolbar">
<li><a href="" style="background-position: 0px -35px"></a></li>
</ul>
<script type="text/javascript">
$(function(){
$(".toolbar a").DynImg({step: 3, width: 52});
});
</script>
</body>
</html>
参数step为动画长度，width为图片相隔长度
分享到：
相关推荐
本资源“纯css3谷歌Google样式的按钮”正是一个这样的库，旨在帮助开发者轻松实现谷歌Google+样式的按钮设计。这种样式以其简洁、实用的特点深受设计师和开发者的喜爱。 首先，CSS3（Cascading Style Sheets Level ...
6. **Material Design**：Google推出的Material Design设计规范中，按钮有明确的点击态效果，包括颜色的变化和微小的形状变形。 7. **LikeAnimation**：压缩包中的"LikeAnimation-master"可能是一个专门用于实现...
在Android中实现浮动按钮效果，首先需要引入相关库，如谷歌的Material Design库。在build.gradle文件中添加依赖： ```groovy dependencies { implementation 'com.google.android.material:material:版本号' } ``` ...
这个压缩包可能包含了一个实现圆形按钮样式的库或者示例项目，Material Design是Google推荐的UI设计规范，其中的圆形按钮是常见且易于操作的组件。这个库可能提供了自定义的`Button`类，支持Material Design的风格...
Google的Material Design设计语言为按钮提供了统一的交互和视觉指南。使用Material Components库，开发者可以轻松地创建符合Material Design规范的按钮，它们带有内置的点击效果和过渡动画。 8. **Ripple效果** ...
"按钮点击波纹效果"是一种在用户触摸按钮时呈现出的动画效果，它模仿了水波扩散的动态，为用户提供了直观且吸引人的触控反馈。这种效果自Android 5.0 (Lollipop)开始引入，被称为 RippleEffect，并且通过使用...
这种效果通常是通过实现Material Design设计规范来达成的，该规范是Google推出的一种跨平台的设计语言，旨在提供一致、直观且富有表现力的用户体验。 波纹点击效果的核心在于"Ripple Effect"，它是一种触摸反馈机制...
要实现中间凸起的按钮效果，我们需要自定义一个BottomNavigationView或者使用现有的库如`com.google.android.material:material`中的`BottomNavigationView`，因为默认的 BottomNavigationView 并不直接支持这种样式...
【标题】"google首页动画效果"揭示了这个项目的核心内容，即模拟谷歌（Google）搜索引擎首页的动画特性。这些动画通常包含微妙而引人入胜的交互元素，为用户提供了愉快的浏览体验。谷歌作为全球知名的搜索引擎，其...
在Android开发中，悬浮按钮（Floating Action Button, 简称FAB）是一种常见的设计元素，用于突出显示关键操作或动作。...通过理解并应用上述知识，你可以创建出具有专业品质的Android悬浮按钮效果。
要实现呼吸按钮效果，需要使用Android的动画机制来实现呼吸按钮的呼吸效果。主要步骤包括： 1. 创建三个anim文件，分别用于进入效果、呼吸效果和退出效果。 2. 在进入效果anim文件中，使用scale标签来实现按钮的...
标题 "Google 首页 JS 效果 导导航" 提到的是谷歌（Google）网站主页上曾经使用的一种JavaScript特效，通常是指其简洁且用户体验友好的导航设计。JavaScript是一种广泛应用于网页开发的脚本语言，它允许动态内容的...
标题中的“google首页的动画效果”指的是Google搜索引擎首页上的Doodle（涂鸦）动画，这是一种交互式的、富有创意的设计元素，通常用来纪念重要的日子、人物或事件。这些动画不仅仅是静态的图片，而是通过JavaScript...
为了提升用户体验，许多开发者会为按钮添加各种视觉效果，其中“水波纹”特效是一种非常吸引人的设计。这种特效在用户点击按钮时，会产生如同水面波动般的动画效果，既美观又具有交互性。 水波纹效果主要依赖于...
Quttons是一款谷歌Quantum Paper风格按钮变形动画特效jQuery插件。Quantum Paper（量子纸）是一种新的谷歌Material Design语言。它可以改变大小、形状和颜色以容纳新...该插件使用按钮来模拟量子纸效果，效果非常炫酷。
本教程将深入探讨如何在Android项目中实现各种按钮效果。 1. **默认按钮效果** Android SDK提供了默认的按钮样式，当用户点击按钮时，会显示一种按下状态的效果，即颜色变化或轻微的阴影效果。这个效果是通过`...
本篇将深入探讨如何在Android中为按钮添加动态效果。 1. **自定义按钮样式** Android系统提供了一系列内置的按钮样式，但开发者可以根据需求创建自己的样式。这可以通过修改`res/drawable`目录下的XML资源文件实现...
这种特效源于谷歌的Material Design设计语言，它模拟了物体在真实世界中被触摸后产生的涟漪扩散效果，使得用户界面更加生动和具有反馈感。本主题将详细介绍如何利用CSS3实现多款不同风格的按钮波纹动画。 首先，...
jQuery实现仿Google首页拖动效果涉及的主要知识点包括： 1. jQuery基础： jQuery是一个快速、简洁的JavaScript库，它通过简化HTML文档遍历、事件处理、动画和Ajax交互，使Web开发变得更加方便。实现拖动效果，重点...
【标题】"效果很棒的 Fab 按钮.zip" 提供的是一个遵循材料设计原则的浮动操作按钮（Floating Action Button, 简称 FAB）的实现，这在 Android 应用开发中是一个重要的组件。FAB 是谷歌推出的一种设计模式，主要用来...