<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>颗粒翻转</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        div{

            width: 700px;

            height: 400px;

            background: url("images/img_tabs/1.jpg");

            margin: 50px auto;

            position: relative;

        }

    </style>

    <script src="move.js"></script>

    <script>

        window.onload=function(){

            var oDiv=document.getElementById('box');

            var oInp=document.getElementById('btn1');

            var C=8; //列数

            var R=5; //行数

            var W=oDiv.offsetWidth/C;  //每个span的宽度

            var H=oDiv.offsetHeight/R; //每个span的高度

            //创建span

            for(var i=0;i<R;i++){       //循环所有行

                for(var j=0;j<C;j++){  //循环每一行中的每一个

                    var oSpan=document.createElement('span');

                    oSpan.style.width=W+'px';

                    oSpan.style.height=H+'px';

                    oSpan.style.position='absolute';

                    oSpan.style.top=i*H+'px';

                    oSpan.style.left=j*W+'px';

                    oSpan.style.backgroundImage='url("images/img_tabs/0.jpg")';

                    oSpan.style.backgroundPosition=-j*W+'px -'+i*H+'px';

                    oSpan.c=j;

                    oSpan.r=i;

                    oDiv.appendChild(oSpan);

                }

            }

            var iNow=0;

            oInp.onclick=function() {

                iNow++;

                var aSpan = oDiv.children;

                if(iNow%3==0){

                        oDiv.style.backgroundImage='url("images/img_tabs/2.jpg")';

                    }else{

                        oDiv.style.backgroundImage='url("images/img_tabs/'+(iNow%3-1)+'.jpg")';

                }

                for(var i=0;i<aSpan.length;i++){

                    (function(index){

                        setTimeout(function(){

                            aSpan[index].style.backgroundImage='url("images/img_tabs/'+iNow%3+'.jpg")';

                            aSpan[index].style.opacity=0;

                            move(aSpan[index],{'opacity':1});

                        },(aSpan[index].c+aSpan[index].r)*200);

                    })(i);

                }

            }

        };

    </script>

</head>

<body>

    <input type="button" value="换图" id="btn1"/>

    <div id="box">

    </div>

</body>

</html>

　　

原生js颗粒页换图效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  4. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  5. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  6. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  7. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  8. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 原生js实现雪花飘落效果

    雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;marg ...

随机推荐

  1. es配置说明

    cluster代表一个集群,集群中有多个节点,其中有一个为主节点,这个主节点是可以通过选举产生的,主从节点是对于集群内部来说的.es的一个概念就是去中心化,字面上理解就是无中心节点,这是对于集群外部来 ...

  2. React入门--------JSX

    React学习网站 React官方英文网站:http://reactjs.cn/react/docs/top-level-api.html React官方中文网站:http://www.css88.c ...

  3. 选择Web API还是WCF

    ASP.NET WCF是.NET平台服务开发的一站式框架,那么为什么还要有ASP.NET Web API呢?简单来说,ASP.NET Web API的设计和构建只考虑了一件事情,那就是HTTP,而WC ...

  4. SharePoint 2013 内容部署功能简介

    在之前的项目中,当客户有新的需求的时候,我们通常在测试环境上开发或者实施,然后手动在生产环境再弄一次.当发现内容部署这个东西,才知道这样是多么不合理的.我们可以创建两个网站集,一个用来修改,然后通过计 ...

  5. 聊聊GISer的职业发展

    一.前言 去年写了一篇名为<GISer们还有机会屌丝逆袭吗?>的博文,希望能和广大GISer一起探讨地理信息产业留给小团队和个人的机会.文章发布后,很多GISer通过网络和我进行了交流,其 ...

  6. 安卓开发_慕课网_ViewPager实现Tab(App主界面)

    学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法 这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout <Linear ...

  7. Python基础（9）--正则表达式

    正则表达式是一个很有用的工具,可处理复杂的字符匹配和替换工作.在Python中内置了一个re模块以支持正则表达式. 正则表达式有两种基本的操作,分别是匹配和替换. 匹配就是在一个文本字符串中搜索匹配一 ...

  8. 【读书笔记】iOS-装箱

    通常将一个基本类型的数据包装成对象叫做装箱,从对象中提取基本类型的数据叫做取消装箱.有些语言有自动装箱功能,它可以自动包装基本基础类型的数据,也可以自动从包装后的对象中提取基础数据.Objective ...

  9. UI交互设计的网站

    1.http://www.xueui.cn/other-tutorials/ui-interaction-design.html 2.http://www.3lian.com/edu/2015/12- ...

  10. iOS本地数据存储（转载）

    看到一篇不错的文章,推荐给大家!!! 应用沙盒 1)每个iOS应用都有自己的应用沙盒(应用沙盒就是文件系统目录),与其他文件系统隔离.应用必须待在自己的沙盒里,其他应用不能访问该沙盒 2)应用沙盒的文 ...