Js 手风琴效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="width: 750px; height: 400px; position: relative; margin: 50px auto; overflow: hidden;">
<div id="dd1" style="background-image: url(img/1.jpg); background-size: contain; width: 600px; height: 100%; position:absolute; float: left; left: 0%;transition:1s;" onmouseover="bian(1)"></div>
<div id="dd2" style="background-image: url(img/2.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 30px;transition:1s;" onmouseover="bian(2)"></div>
<div id="dd3" style="background-image: url(img/3.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 60px;transition:1s;" onmouseover="bian(3)"></div>
<div id="dd4" style="background-image: url(img/4.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 90px;transition:1s;" onmouseover="bian(4)"></div>
<div id="dd5" style="background-image: url(img/5.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 120px;transition:1s;" onmouseover="bian(5)"></div>
<div id="dd6" style="background-image: url(img/6.jpg); background-size: contain; width: 600px; height: 100%; position: absolute; float: left; left: 150px;transition:1s;" onmouseover="bian(6)"></div>
</div> </body>
</html>
<script type="text/javascript">
dd1 = document.getElementById("dd1");
dd2 = document.getElementById("dd2");
dd3 = document.getElementById("dd3");
dd4 = document.getElementById("dd4");
dd5 = document.getElementById("dd5");
dd6 = document.getElementById("dd6");
function bian(n) {
if (n == )
{
dd1.style.left = "0px";
dd2.style.left = "600px";
dd3.style.left = "630px";
dd4.style.left = "660px";
dd5.style.left = "690px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "630px";
dd4.style.left = "660px";
dd5.style.left = "690px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "60px";
dd4.style.left = "660px";
dd5.style.left = "690px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "60px";
dd4.style.left = "90px";
dd5.style.left = "690px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "60px";
dd4.style.left = "90px";
dd5.style.left = "120px";
dd6.style.left = "720px";
}
if (n == ) {
dd1.style.left = "0px";
dd2.style.left = "30px";
dd3.style.left = "60px";
dd4.style.left = "90px";
dd5.style.left = "120px";
dd6.style.left = "150px";
}
}
</script>
Js 手风琴效果的更多相关文章
- 原生js手风琴效果
//js代码 //获取li var list = document.getElementsByTagName("li")[0]; //遍历 排他 for( var i=0;i&l ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- js实现手风琴效果
之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...
- js手风琴图片切换实现原理及函数分析
关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- 一步步教你css3手风琴效果的实现
什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...
- 超简单jQuary链式操作代码实现手风琴效果
超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...
- jQuery效果之简单的手风琴效果
实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...
随机推荐
- 如何使用OpenCart 2.x Event事件系统
如何使用OpenCart 2.x Event事件系统 OpenCart 2.x 包含很多新特性,其中之一就是专为开发者提供的事件系统,Event System.它允许你在不修改原有系统代码的基础上( ...
- 6.3 Controllers -- Managing Dependencies Between Controllers
1. 有时候,特别是当嵌套资源的时候,我们需要两个controllers之间的某种连接.让我们拿这个router当做例子: app/router.js var Router = Ember.Route ...
- 001-mybatis框架
架构分析: 1. 读SqlMapConfig.xml. 当调用与数据库有关的操作的时候,会读SqlMapConfig.xml文件中的信息,里面配置了Mybatis的运行环境信息,加载mapper.xm ...
- 20165207 实验一 Java开发环境的熟悉
20165207 实验一 Java开发环境的熟悉 一.实验报告封面 课程:Java程序设计 班级:1652 姓名:李天林 学号:20165207 实验日期:2018年4月2日 实验序号:一 实验名称: ...
- Vue学习笔记之Vue知识点补充
0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...
- 20145105 《Java程序设计》第5周学习总结
20145105 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 异常处理 一.语法与继承架构 (一)使用try.catch 执行流程 尝试执行try区块中程序代码 如果出现 ...
- 20145118 《Java程序设计》第5周学习总结 教材学习内容总结
20145118 <Java程序设计>第5周学习总结 教材学习内容总结 1.Java中所有错误都会被打包成对象,可以通过try.catch语法对错误对象作处理,先执行try,如果出错则跳出 ...
- 20155201 2016-2017-2 《Java程序设计》第二周学习总结
20155201 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 编译运行P55各种类型可储存的数值范围代码,截图: 常用格式控制符: 符号 说明 %% 表示 ...
- LA 4636 积木艺术
https://vjudge.net/problem/UVALive-4636 题意: 给出正视图和侧视图,判断最少要用多少个立方体. 思路: 首先正视图里出现的积木个数都是必须的,记录下每一列积木的 ...
- UVa 1210 连续素数之和
https://vjudge.net/problem/UVA-1210 题意: 输入整数n,有多少种方案可以把n写成若干个连续素数之和? 思路: 先素数打表,然后求个前缀和. #include< ...