<!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. 即将翻译 Building The New Financial Times Web App

    <金融时报>这份Web APP 经验的总结,写得非常详细,也提到Web APP制作中常遇到的问题.为么他们就没有点透Bug - -! Building The New Financial ...

  2. [设计模式] javascript 之 模板方法模式

    模板方法模式说明 定义:定义方法操作的骨架,把一些具体实现延伸到子类中去,使用得具体实现不会影响到骨架的行为步骤! 说明:模式方法模式是一个继承跟复用的典型模式,该模式定义了一个抽象类,Abstrac ...

  3. 【翻译】Tomcat 6.0 安装与启动

    本篇来自Tomcat6官方文档:运行手册running.txt 有很多以前都没注意的问题,这里正好学习下. 系列文章来自:<Tomcat官方文档翻译> Tomcat的安装 1 确认本机是否 ...

  4. CLGeocoder "Lost connection to geod" #error# when use geocodeAddressString:completionHandler

      I got this warning when I tried to get destination using CLGeoCoder and the warning is coming out ...

  5. codevs2574 波兰表达式

    题目描述 Description 对于 加.减.乘.除这种四则运算的表达式,我们使用的是先乘除.后加减的从左到右的顺序进行运算,如果要指定特定的顺序,就要增加括号进行表达,比如 (A+B)*C , A ...

  6. Mac OS 中的 Python（和 NumPy）开发环境设置

    http://www.python()tab.com/html/2013/pythonjichu_1010/582.html ()需要删除

  7. Laravel的生命周期

    当你使用一个工具的时候, 如果你对这个工具的内部原理和构造有所了解, 那么在使用这个工具的时候, 就会更加的有信心, 工具用起来也会更加的得心应手. 今天阅读了 Laravel 官方的生命周期文档.这 ...

  8. git 教程（4）--版本回退

    现在,你已经学会了修改文件,然后把修改提交到Git版本库,现在,再练习一次,修改readme.txt文件如下: Git is a distributed version control system. ...

  9. hibernate 学习知识总结

    1.最近用hibernate 学会很多知识,总结如下: (1)数据库表格已经设置默认值,在进行数据插入的时候,bean里面不赋值的话,插入之后该字段依旧是null 是因为hibernate默认插入和更 ...

  10. IC/RFID/NFC 关系与区别

    IC卡 (Integrated Circuit Card,集成电路卡) 有些国家和地区也称智能卡(smart card).智慧卡(intelligent card).微电路卡(microcircuit ...