基于匀速运动的实例讲解(侧边栏,淡入淡出)
javascript中，如何让一个元素(比如div)运动起来呢？
设置基本的样式，一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 );
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
}
</style>
基本的结构:
<input type="button" value="动起来"/> <div id="box"></div>
当我们点击，这个按钮的时候，要让div运动起来，其实就是让div的left值持续变化，那么div就会产生运动效果，我们先让left改变，再让他持续改变
window.onload = function(){
var oBtn = document.querySelector( "input" ),
oBox = document.querySelector( '#box' );
oBtn.onclick = function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}
那么每当我点击按钮的时候，div的left值就会在原来的基础上加上10px。这里也可以用获取非行间样式的方法获取left的值再加上10px，也可以达到效果
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
window.onload = function () {
var oBtn = document.querySelector("input"),
oBox = document.querySelector('#box');
oBtn.onclick = function () {
oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
}
}
offsetLeft与获取非行间样式left的值 有什么区别呢？
offsetLeft没有px单位，而left是有px单位的
oBtn.onclick = function () {
// alert( css( oBox, 'left' ) ); //0px
alert( oBox.offsetLeft ); //0
}
现在div是点击一下动一下，我们让他持续动起来，怎么做？ 加上定时器
oBtn.onclick = function () {
setInterval( function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}, 1000 / 16 );
}
当我们点击按钮时候，div就会不停的向左运动，怎么让他停下来呢？停下来，肯定是需要条件的，比如，我们让他跑到500px的时候停下来
var timer = null;
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft == 500 ) {
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}, 1000 / 16 );
}
这样，我们就可以让div停在500px的位置，这里如果我们把步长10 改成 7或者8，你会发现停不下来了，为什么呢？因为会跳过500px这个判断条件
0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 从497变成504跳过了500px，所以div停不下来，那怎么办呢？修改下判断条件就可以了.
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}
把条件变成>=500 清除定时器， 同时还要加上这句代码oBox.style.left = 500 + 'px'，让他强制被停在500px, 否则div就不会停在500px, 而是504px了，还有一个问题，如果在div运动的过程中，你不停的点击按钮，会发现， div开始加速运动了，而不是每次加10px了，这又是为什么呢？这是因为，每次点击一下按钮，就开了一个定时器，每次点击一个按钮就开了一个定时器，这样就会有多个定时器叠加，那么速度也会产生叠加，所以div开始加速了，那么我们要让他保持10px的速度，意思就是不要让定时器叠加，更通俗点说就是确保一个定时器在开着。应该怎么做呢？
oBtn.onclick = function () {
clearInterval( timer );
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}
只需要在每次点击按钮的时候，清除之前的定时器就可以了，这样就能确保始终一个定时器开着，至此，一个最基本的匀速运动结构就完成了，那么我们可以把他封装成函数
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}
有了这个函数之后，我们来小小的应用一下。
http://www.jiathis.com/getcode
打开这个网站，你注意看他右边有个侧栏式效果（分享到），这种特效在网站上很普遍
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>侧边栏 - by ghostwu</title>
<style>
#box {
width: 150px;
height: 300px;
background: red;
position: absolute;
left: -150px;
top: 50px;
}
#box div {
width: 28px;
height: 100px;
position: absolute;
right: -28px;
top: 100px;
background: green;
}
</style>
<script>
window.onload = function () {
var timer = null;
var oBox = document.getElementById("box");
oBox.onmouseover = function () {
animate(this, 0, 10);
}
oBox.onmouseout = function () {
animate(this, -150, -10);
}
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}
}
</script>
</head>
<body>
<div id="box">
<div>分享到</div>
</div>
</body>
</html>
再来一个淡入淡出的效果:
当鼠标移上去之后，透明度变成1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出 - by ghostwu</title>
<style>
img {
border: none;
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>
<script>
window.onload = function () {
var timer = null;
var oImg = document.getElementById("img");
oImg.onmouseover = function(){
animate( this, 100, 10 );
}
oImg.onmouseout = function(){
animate( this, 30, -10 );
}
//alpha=30 --> 100
function animate(obj, target, speed) {
clearInterval(timer);
var cur = 0;
timer = setInterval(function () {
cur = css( obj, 'opacity') * 100;
if( cur == target ){
clearInterval( timer );
}else {
cur += speed;
obj.style.opacity = cur / 100;
obj.style.filter = "alpha(opacity:" + cur + ")";
}
}, 30);
}
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>
以上这篇基于匀速运动的实例讲解(侧边栏,淡入淡出)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
JS运动框架之分享侧边栏动画实例
本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">
-
基于jQuery实现最基本的淡入淡出效果实例
本文实例讲述了基于jQuery实现最基本的淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求.其实质就是JavaScript 下面来编写一个最基本的JQ程序来说明JQ. 一.基本目标 网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环.如下图所示: 二.制作过程 1.首先你要到JQ官网中下载一个JQ支持文
-
JavaScript淡入淡出渐变简单实例
本文实例讲述了JavaScript淡入淡出渐变的实现方法.分享给大家供大家参考.具体如下: 这里介绍JavaScript淡入淡出的文字渐变例子,用js来控制div标签元素实现渐变显示,渐变隐藏,只要在那个标签里的内容,都可以淡入淡出,代码简单,便于修改完善,前端设计者必备的网页特效. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="
-
打造通用的匀速运动框架(实例讲解)
本文,是接着上 基于匀速运动的实例讲解(侧边栏,淡入淡出) 继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让他变得更加的通用和强大: 1,支持多个物体的运动 2,同时运动 3,顺序运动 这三种运动方式也是jquery中animate函数支持的 一.animate函数中怎么区分变化不同的样式? 上文中,侧边栏效果 用的animate函数 改变的是left值 function animate(obj, target, s
-
基于匀速运动的实例讲解(侧边栏,淡入淡出)
javascript中,如何让一个元素(比如div)运动起来呢? 设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 ); <style> div { width: 100px; height: 100px; background: red; position: absolute; left: 0px; } </style> 基本的结构: <input type="button" value="动起来&quo
-
js淡入淡出的图片轮播效果代码分享
本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播效果代码如下 <html> <head> <title>js图片轮播效果代码</title> <style type="text/css"> table i
-
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
本文实例讲述了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款核心基于jquery的多级导航菜单特效,横向向右依次展开菜单项,当然本菜单并不是完美的,因此没有怎么美化,另外包括子菜单的上级菜单中缺少一个菜单标记,这样用户有时候不知道哪个菜单中含有下级子菜单.不过添加这样一个标记似乎挺简单,你可以自己动手添加吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-show
-
基于Django的python验证码(实例讲解)
验证码 在用户注册.登录页面,为了防止暴力请求,可以加入验证码功能,如果验证码错误,则不需要继续处理,可以减轻一些服务器的压力 使用验证码也是一种有效的防止crsf的方法 验证码效果如下图: 验证码视图 新建viewsUtil.py,定义函数verifycode 此段代码用到了PIL中的Image.ImageDraw.ImageFont模块,需要先安装Pillow(3.4.1)包, 详细文档参考 http://pillow.readthedocs.io/en/3.4.x/ Image表示画布对象
-
基于vue.js路由参数的实例讲解——简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设
-
基于Vue过渡状态实例讲解
前面的话 Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢?包括数字和运算.颜色的显示.SVG 节点的位置.元素的大小和其他的属性等.所有的原始数字都被事先存储起来,可以直接转换到数字.做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态 状态动画 通过watcher,能监听到任何数值属性的数值更新 <div id="animated-number-demo"> <input v-
-
基于require.js的使用(实例讲解)
本篇文章总结下require.js使用方法. 1.为什么使用require.js? 使用之前,我的页面的js是这样的 <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script>
-
基于Bootstrap分页的实例讲解(必看篇)
前面的话 分页导航几乎在每个网站都可见,好的分页能给用户带来好的用户体验.本文将详细介绍Bootstrap分页 概述 在Bootstrap框架中提供了两种分页导航: ☑ 带页码的分页导航 ☑ 带翻页的分页导航 页码分页 带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式 [默认分页] 平时很多人喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签