使用原生JS实现一个风箱式的demo,并封装了一个运动框架

声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构。话不多说,现在开始改demo的制作。

首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架。

 1 function getStyle(obj,attr) {
 2     if(obj.currentStyle){
 3         return obj.currentStyle[attr];//为了获取IE下的属性值
 4     }else{
 5         return window.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值
 6     }
 7 }
 8
 9 function animate(obj,json){
10     clearInterval(obj.timer);
11     obj.timer = setInterval(function () {
12         var flag = true;
13         var current = 0;
14         for(var attr in json){
15             if(attr == ‘opacity‘){
16                 current = parseInt(getStyle(obj,attr)*100);
17             }else{
18                 current = parseInt(getStyle(obj,attr));
19             };
20
21             var step = (json[attr] - current) / 10;
22             step = step > 0 ? Math.ceil(step) : Math.floor(step);
23             //先判断属性是否为透明度
24             if(attr == ‘opacity‘){
25                 //首先判断浏览器是否支持opacity
26                 if(‘opacity‘ in obj.style){
27                     obj.style.opacity = (current + step) / 100;
28                 }else{
29                     obj.style.filter = ‘alpha(opacity = ‘ + (current + step) + ‘)‘;
30                 }
31             //再判断属性是否为z-index
32             }else if(attr == ‘zIndex‘){
33                 obj.style.zIndex = json[attr];
34             //最后再判断
35             }else{
36                 obj.style[attr] = current + step + ‘px‘;
37             }
38
39             if(current != json[attr]){
40                 flag = false;
41             }
42         }
43
44         if(flag){
45             clearInterval(obj.timer);
46         }
47     },5);
48 }

在该框架中兼容了不同的浏览器,并且允许传入opacity和z-index这样的属性,当然,像width,height,left,right这样常见的属性是必不可少的。利用该框架,可以实现非常棒的效果。所以现在开始正式做该DEMO。

首先是index.html的制作。

1 <div id="box">
2     <ul>
3         <li></li>
4         <li></li>
5         <li></li>
6         <li></li>
7         <li></li>
8     </ul>
9 </div>

index.html的制作非常的简单,我们会将图片作为li的背景图片在javascript中进行插入。之后,我们进行CSS样式的调节。

 1 *{
 2         margin:0px;
 3         padding:0px;
 4     }
 5     #box{
 6         width:1300px;
 7         height:400px;
 8         margin:100px auto;
 9         overflow: hidden;
10     }
11     #box ul{
12         height:400px;
13         width:1300px;
14     }
15     #box ul li{
16         width:240px;
17         height:400px;
18         float:left;
19         overflow: hidden;
20     }

javascript的代码如下:

 1 window.onload = function () {
 2         var box = document.getElementById(‘box‘);
 3         var aLi = box.children[0].children;
 4         for(var i=0;i<aLi.length;i++){
 5             aLi[i].style.backgroundImage = ‘url(‘ + ‘images/‘ + (i + 1) + ‘.jpg‘;
 6             aLi[i].onmouseover = function(){
 7                 for(var i=0;i<aLi.length;i++){
 8                     animate(aLi[i],{width:100});
 9                 }
10                 animate(this,{width:800});
11             };
12             aLi[i].onmouseout = function(){
13                 for(var i=0;i<aLi.length;i++){
14                     animate(aLi[i],{width:240});
15                 }
16             }
17         }
18     }

这样使用原生JS实现的风箱效果demo就实现了,当然,还可以利用封装好的animate框架实现类似网易的轮播图效果。

时间: 2024-10-19 17:08:49

使用原生JS实现一个风箱式的demo,并封装了一个运动框架的相关文章

使用原生js的scrollTop,刷新进入页面定位到某一个dom元素

原生js的scrollTop即可,与jquery方法的区别是jquery做了兼容封装.我想要实现的功能是时间定位,根据当前时间定位到滚动区的时间位置.页面为移动端页面,上下固定位置,中部为1小时4格的选择区域,从0点到24点. 开始我想发出现了偏差,总想定位到某个dom,这样使得scrollTop一直是0,怎么设置都不行,后来仔细分析才发现要设置在超出当前可视区域的dom上才可以. 所以设置在外层overflow-x:scroll;的dom上即可,根据时间匹配dom位置,根据索引及每格的高度计算

【前端性能】必须要掌握的原生JS实现JQuery

很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗. 当然,我不是提倡写代码纯用原生JS实现,我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”. 一些感(fei)想(hua): 1.原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 1 var defaultPra = { 2 mainMenuId: "ArcMenu",//主菜单id 3 menuBoxId:"menuBox",//菜单包裹id 4 position: "",//弧形菜单 5 customPosition:"0

一个简单用原生js实现的小游戏----FlappyBird

这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="game"> <div id="b

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

一个比较靠谱的原生js导航悬浮

我不太会写js,但是今天看了我上一篇文章的代码里以后也写了一个原生js,没想到z哎我这里显得比那个好用,你们知道那种感觉么,感觉自己一下子就有如神助一样. 感谢覃烁弟弟,我这人生低谷给我写了一封信.还推荐给我一个群,这个群里果然都不是水啊,天天都在讨论技术,就算我不懂,但这里氛围也是极好的! 哈哈哈哈 不说废话了,好好学习 贴代码 我的js水平连幼儿园小朋友都可以看得懂 大家就当入门吧 js: window.onload=function(){    var nav=document.getEl

原生js做一个简单的进度条

用原生js做进度条,布局非常简单,一个盒子里放一个span标签,让它的宽度为0,并且转成块元素. 主要用定时器动态增加span的宽度,并且当它的宽度大于父级盒子的宽度的时候停止 效果如下: 一 css如下: *{ margin: 0; padding: 0; } #box{ width: 500px; height: 30px; margin: 50px auto; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 15px;

原生js实现一个DIV的碰撞反弹运动

 原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;width:100px;back

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left