JS运动框架之分享侧边栏动画实例
本文实例讲述了JS运动框架之分享侧边栏动画实现方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#div1{
width:319px;
height: 340px;
border: 1px solid #FFF;
position: absolute;
top:100px;
left:-320px;
background-image: url(images/1.png);
background-repeat:no-repeat ;
}
#div1 span{
width:30px;
height: 130px;
border: 1px solid blue;
position: absolute;
right:-23px;
top:95px;
background: red;
font-family: "微软雅黑";
color: #FFFFFF;
text-align: center;
line-height: 40px;
border-radius: 0px 200px 200px 0px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oSpan=oDiv.getElementsByTagName('span')[0];
var time=null;
var speed=8;
oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft>=0){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},1);
}
oDiv.onmouseout=function(){//这里给整个div加鼠标移出事件
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft<=-320){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft-speed+'px';
}
},1);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
优化后的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#div1{
width:319px;
height: 340px;
border: 1px solid #FFF;
position: absolute;
top:100px;
left:-320px;
background-image: url(images/1.png);
background-repeat:no-repeat ;
}
#div1 span{
width:30px;
height: 130px;
border: 1px solid blue;
position: absolute;
right:-23px;
top:95px;
background: red;
font-family: "微软雅黑";
color: #FFFFFF;
text-align: center;
line-height: 40px;
border-radius: 0px 200px 200px 0px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oSpan=oDiv.getElementsByTagName('span')[0];
var time=null;
var spe=8;
var speed=null;
function move(bord){
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft>bord){speed=-spe;}
else{speed=spe;}
if(oDiv.offsetLeft==bord){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},1);
}
oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件
move(0);
}
oDiv.onmouseout=function(){//这里给整个div加鼠标移出事件
move(-320);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
基于匀速运动的实例讲解(侧边栏,淡入淡出)
javascript中,如何让一个元素(比如div)运动起来呢? 设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 ); <style> div { width: 100px; height: 100px; background: red; position: absolute; left: 0px; } </style> 基本的结构: <input type="button" value="动起来&quo
-
打造通用的匀速运动框架(实例讲解)
本文,是接着上 基于匀速运动的实例讲解(侧边栏,淡入淡出) 继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让他变得更加的通用和强大: 1,支持多个物体的运动 2,同时运动 3,顺序运动 这三种运动方式也是jquery中animate函数支持的 一.animate函数中怎么区分变化不同的样式? 上文中,侧边栏效果 用的animate函数 改变的是left值 function animate(obj, target, s
-
基于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="
-
JS运动框架之分享侧边栏动画实例
本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">
-
js运动框架_包括图片的淡入淡出效果
复制代码 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><font face="Verdana, Geneva, sans-serif"></font>&l
-
JS运动特效之完美运动框架实例分析
本文实例讲述了JS运动特效之运动框架.分享给大家供大家参考,具体如下: 在前面一篇的<js运动特效之同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () { //startMove(oDiv,{width:300,height:300,opacity:30}); startMove(oDiv,{width:204,height:300,opacity:30}); } 在鼠标移入的时候,我们让w
-
JS运动特效之链式运动分析
本文实例讲述了JS运动特效之链式运动.分享给大家供大家参考,具体如下: 接着前面一篇<JS运动特效之任意值添加运动的方法>继续折腾 链式运动:一个运动接着一个运动.比如:鼠标移入div先让宽变大,接着在让高变大,接着在让透明度变化等等一系列运动连着做.废话不多说,上栗子!! 当鼠标移入div的时候,div先变宽,在变高,然后改变透明度:移出又逐次恢复到原样: 实现链式运动,需要对上一篇中的startMove() 函数继续做改进 function startMove(obj,attr,iTarg
-
JS运动特效之任意值添加运动的方法分析
本文实例讲述了JS运动特效之任意值添加运动的方法.分享给大家供大家参考,具体如下: 回顾一下上个例子JS实现多物体运动的方法: <script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 给每个li都添加一个timer liTags[i].onmouseov
-
浅析JS运动
物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法: 1.运动的物体使用绝对定位 2.通过改变定位物体的属性(left.right.top.bottom)值来使物体移动.例如向右或左移动可以使用offsetLeft(offsetRight)来控制左右移动. 步骤: 1.开始运动前,先清除已有定时器 (因为:是连续点击按钮,物体会运动越来越快,造成运动混乱) 2.开
-
原生JS封装animate运动框架的实例
如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; b
-
JS运动基础框架实例分析
本文实例讲述了JS运动基础框架.分享给大家供大家参考.具体分析如下: 这里需要注意: 1. 在开始运动时关闭已有的定时器 2. 把运动和停止隔开 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="te
-
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//为了获取IE下的属性值 }else{ return window.getComputedStyle(obj,null)[at
-
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
在这篇文章打造通用的匀速运动框架(实例讲解)中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右). 缓冲运动通常有两种常见的表现:比如让一个div从0运动到500,一种是事件触发的时候,速度很快, 一种是事件触发的时候慢,然后慢慢加快.我们来实现先块后慢的,常见的就是开车,比如刚从高速路上下来的车,就是120km/小时,然后进入匝道,变成40km/时. 或者40km/小时进入小区,最后停车,变成0km/小时. 从120km/小时->40k