<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{ margin:0px; padding:0px;}

</style>

</head>

<body>

<div style=" width:700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">

    <div id="d1" style="width:500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onMouseOver="bian(1)"><img src="路易十三/logo.png" ></div>

    <div id="d2" style="width:500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onMouseOver="bian(2)"></div>

    <div id="d3" style="width:500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onMouseOver="bian(3)"></div>

    <div id="d4" style="width:500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onMouseOver="bian(4)"></div>

    <div id="d5" style="width:500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onMouseOver="bian(5)"></div>

</div>

<br>

<div style=" width:700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">

    <div id="dd1" style="width:500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onClick="biann(1)"></div>

    <div id="dd2" style="width:500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onClick="biann(2)"></div>

    <div id="dd3" style="width:500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onClick="biann(3)"></div>

    <div id="dd4" style="width:500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onClick="biann(4)"></div>

    <div id="dd5" style="width:500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onClick="biann(5)"></div>

</div><br>

<div style=" width:2500px; height:300px; background-color:#111111; position:relative;"></div>

</body>

</html>

<script language="javascript1.1">

function bian(n)

{

    if(n==1){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="500px";

        document.getElementById("d3").style.left="550px";

        document.getElementById("d4").style.left="600px";

        document.getElementById("d5").style.left="650px";

    }

    else if(n==2){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="50px";

        document.getElementById("d3").style.left="550px";

        document.getElementById("d4").style.left="600px";

        document.getElementById("d5").style.left="650px";

        }

    else if(n==3){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="50px";

        document.getElementById("d3").style.left="100px";

        document.getElementById("d4").style.left="600px";

        document.getElementById("d5").style.left="650px";

        }

    else if(n==4){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="50px";

        document.getElementById("d3").style.left="100px";

        document.getElementById("d4").style.left="150px";

        document.getElementById("d5").style.left="650px";

        }

    else if(n==5){

        document.getElementById("d1").style.left="";

        document.getElementById("d2").style.left="50px";

        document.getElementById("d3").style.left="100px";

        document.getElementById("d4").style.left="150px";

        document.getElementById("d5").style.left="200px";

        }

}

function biann(n)

{

    if(n==1){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="500px";

        document.getElementById("dd3").style.left="550px";

        document.getElementById("dd4").style.left="600px";

        document.getElementById("dd5").style.left="650px";

    }

    else if(n==2){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="50px";

        document.getElementById("dd3").style.left="550px";

        document.getElementById("dd4").style.left="600px";

        document.getElementById("dd5").style.left="650px";

        }

    else if(n==3){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="50px";

        document.getElementById("dd3").style.left="100px";

        document.getElementById("dd4").style.left="600px";

        document.getElementById("dd5").style.left="650px";

        }

    else if(n==4){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="50px";

        document.getElementById("dd3").style.left="100px";

        document.getElementById("dd4").style.left="150px";

        document.getElementById("dd5").style.left="650px";

        }

    else if(n==5){

        document.getElementById("dd1").style.left="";

        document.getElementById("dd2").style.left="50px";

        document.getElementById("dd3").style.left="100px";

        document.getElementById("dd4").style.left="150px";

        document.getElementById("dd5").style.left="200px";

        }

}

</script>

手风琴特效 transition的更多相关文章

  1. 图片每天换及纯css3手风琴特效

    <a target="_blank" id="a"><img id="img" /></a> <s ...

  2. 一款点击图片进行无限循环的jquery手风琴特效

    一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...

  3. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  4. CSS实现的手风琴特效

    CSS样式: //图像个数 @imageN:5; //图像hover之前的总宽度 @w:800px; //图像hover之后的宽度 @imageL:640px; //图像hover之前的宽度 @ima ...

  5. 纯js代码实现手风琴特效

    我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型 ...

  6. 场景切换特效Transition——Cocos2d-x学习历程(十二)

    Transition 场景切换 在游戏中通常会用到一些场景的切换,比如从加载界面切换到欢迎界面.游戏中的所有场景存放在一个栈中,有且只有一个场景可以处于激活状态.直接replaceScene(即不适用 ...

  7. jQuery特效手风琴特效 手写手风琴网页特效

    今天写一个简单的手风琴效果,不用插件,利用强大的jQuery,写一个手风琴效果. 页面预览,请点击这里预览:  手风琴预览 案例分析: html结构 就是一个大盒子里面放着5个li,每个li的小小是2 ...

  8. JS手风琴特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. 推荐一款优雅的jquery手风琴特效

    推荐一款基于 jQuery和 CSS3实现的手风琴效果. 查看demo演示

随机推荐

  1. R-处理数据对象的实用函数

  2. Java-开启Java之路

    .NET还是我的最爱··· 准备学习下底层知识,为Java打打基础, 然后开始正式学习Java, 也算是曲线救国了, Go,Go,Go ... 二〇一六年十一月十日 18:09:54

  3. 在OS X中使用Homebrew

    Homebrew可以很方便的进行软件包管理,用官网的一句话来形容就是 Homebrew 使 OS X 更完整.用 gem 来安装您的 gems.用 brew 来搞定它们的依赖包. 安装Homebrew ...

  4. 调用shell脚本，IP处理

    //调用shell脚本,IP处理 package com.letv.sdns.web.utils; import org.slf4j.Logger; import org.slf4j.LoggerFa ...

  5. Linux 下新增虚拟内存

    问题描述,电脑内存1G.在启用elasticsearch的时候,报错 Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memor ...

  6. 汉字转拼音（pinyin4j）

    1.引入依赖 <dependency> <groupId>pinyin4j.sourceforge.net</groupId> <artifactId> ...

  7. 如何把你的图标转换成web字体

    在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...

  8. 《Lua程序设计 第二版》学习笔记一

    Lua简介 Lua是一种简单.可拓展.可移植及高效的脚本语言. 开始 Lua之间不需要分隔符 运行方式: Linux下: lua -i prog dofile("lib1.lua" ...

  9. HDU 5596（更新，两种方法）

    更新: 这是中文题目的链接: http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=659&pid=1001 ...

  10. Java 7 Concurrency Cookbook 翻译 第一章 线程管理之二

    三.中断一个线程 一个拥有多个线程的Java程序要结束,需要满足两个条件之一:一是所有的非后台线程都执行结束了:二是某个线程执行了 System.exit() 方法.当你想要终结一个运行中的Java程 ...