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" ...
随机推荐
- 排序问题Java
package zhuzhuangtu; import java.util.*; import java.io.*; public class Main{ public static void mai ...
- 2017年浙江中医药大学程序设计竞赛 Solution
训练地址 A: 树剖板子题 求最小值的时候要注意值是不是有负数,如果有,初值要置为$-INF$ #include <bits/stdc++.h> using namespace std; ...
- FCKeditor配置与使用
fckeditor - (1)资料介绍与安装 fckeditor介绍 FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器. 1.fckeditor官网:http://ww ...
- 《Java入门第二季》第三章 继承
Java 中的继承1.作用:代码复用. 2.语法:extends关键字. 3.注意点:私有(private)财产(methods.fields)不可继承. Java 中的方法重写 Java 中的继承初 ...
- mysql中生成列与JSON类型的索引
MySQL中支持生成列,生成列的值是根据列定义中包含的表达式计算的. 一个简单的例子来认识生成列! CREATE TABLE triangle( sidea DOUBLE, sideb DOUBLE, ...
- 20162314 《Program Design & Data Structures》Learning Summary Of The Eleventh Week
20162314 2017-2018-1 <Program Design & Data Structures>Learning Summary Of The Eleventh We ...
- CSS3动画库——animate.css
初见animate.css的时候,感觉很棒,基本上很多常用的CSS3动画效果都帮我们写好了,所以想要哪一种效果直接就可以拿过来用,甚是方便: 效果展示官网:http://daneden.github. ...
- ERROR: cannot launch node of type [robot_pose_publisher/robot_pose_publisher]: robot_pose_publisher
sudo apt-get install ros-indigo-robot-pose-publisher
- 递归--练习11--noi9273 PKU2506Tiling
递归--练习11--noi9273 PKU2506Tiling 一.心得 25 a[i]%=10;(高精度时) 26 这里错了,花了好久改好 27 28 29 int* f(int n){ 30 if ...
- Python环境管理--virtualenvwrapper
遇到问题: 当最近的开发和部署过程中,多个服务器部署的时候发现对于库和包的管理非常混乱,主要有俩个版本问题: 因为业务需要,代码得分别部署在不同的服务器上面,每次部署的时候都得重复的安装包而且不能确定 ...