手风琴特效 transition

<!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的更多相关文章

图片每天换及纯css3手风琴特效
<a target="_blank" id="a"><img id="img" /></a> <s ...
一款点击图片进行无限循环的jquery手风琴特效
一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...
动漫网站基于jquery的横向手风琴特效
今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
CSS实现的手风琴特效
CSS样式: //图像个数 @imageN:5; //图像hover之前的总宽度 @w:800px; //图像hover之后的宽度 @imageL:640px; //图像hover之前的宽度 @ima ...
纯js代码实现手风琴特效
我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型 ...
场景切换特效Transition——Cocos2d-x学习历程(十二)
Transition 场景切换在游戏中通常会用到一些场景的切换,比如从加载界面切换到欢迎界面.游戏中的所有场景存放在一个栈中,有且只有一个场景可以处于激活状态.直接replaceScene(即不适用 ...
jQuery特效手风琴特效手写手风琴网页特效
今天写一个简单的手风琴效果,不用插件,利用强大的jQuery,写一个手风琴效果. 页面预览,请点击这里预览: 手风琴预览案例分析: html结构就是一个大盒子里面放着5个li,每个li的小小是2 ...
JS手风琴特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
推荐一款优雅的jquery手风琴特效
推荐一款基于 jQuery和 CSS3实现的手风琴效果. 查看demo演示

随机推荐

jQuery源码-class操作
写在前面本文写作基于jQuery 1.9.1版本,源码分析系列目录:http://www.cnblogs.com/chyingp/archive/2013/06/03/jquery-souce-co ...
Git基本常用命令
Git基本常用命令如下: mkdir: XX (创建一个空目录 XX指目录名) pwd: 显示当前目录的路径. git init 把当前的目录变成可以管理的git仓库,生成隐藏.git文件. git ...
Stm32 debug停留在"BKPT 0xAB"或者"SWI 0xAB"的解决办法。
一..背景: 曾经在工作中接触过STM32一段时间,但没有深入的去学习,只是用前辈搭建好的模型来实现一些功能罢了,俗话说的好,大树底下好乘凉,开发确实轻松了,可是不深究点,又觉着心里不踏实,然而也一直 ...
Hdu.1325.Is It A Tree?(并查集）
Is It A Tree? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
第二天 django apache
1. 475 brew tap homebrew/apache 476 brew install mod_wsgi 477 ls /usr/local/Cellar/mod_wsgi/4.5.7 ...
mysql解决自动断开8小时未曾用过的链接
今天有运维的同事反映,发布关键词不太稳定,点了没反应.就去线上看了一下日志,发现数据库没有链接,就查了一下问题关于mysql自动断开的问题研究结果如下,在mysql中有相关参数设定,当数据库连接空闲 ...
mysql python image
连接mysql数据库: cnx = mysql.connector.connect(user='joe', database='test') Connector/Python参数列表 Argument ...
HDU 5651 计算回文串个数问题(有重复的全排列、乘法逆元、费马小定理)
原题: http://acm.hdu.edu.cn/showproblem.php?pid=5651 很容易看出来的是,如果一个字符串中,多于一个字母出现奇数次,则该字符串无法形成回文串,因为不能删减 ...
实操UNITY3D接入91SDK安卓版
原地址:http://bbs.18183.com/thread-149758-1-1.html 本文内容为创建UNITY3D接入91SDK的DEMO的具体操作过程.本人水平有限,UNITY3D与And ...
Linux之Shell的算术运算
在Bash的算术运算中有以下几种方法:名称语法范例算术扩展 $((算术式)) r ...

手风琴特效 transition

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

随机推荐

热门专题