Js+CSS3实现手风琴效果
效果截图:
HTML代码:
- <div id="container">
- <img src="data:images/photo01.jpg" alt="">
- <img src="data:images/photo02.jpg" alt="">
- <img src="data:images/photo03.jpg" alt="">
- <img src="data:images/photo04.jpg" alt="">
- </div>
CSS样式:
- *{
- margin:; padding:;
- }
- #container{
- margin: 30px auto; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 420px; overflow: hidden;
- font-size:; position: relative;
- }
- #container img{
- display: block;width: 420px; height: 420px; position: absolute; left:; top:; border-top: 1px solid #ccc;
- border-left: 1px solid #ccc;
- -webkit-transition: all 1s;
- -moz-transition: all 1s;
- -ms-transition: all 1s;
- -o-transition: all 1s;
- }
JS代码:
- window.onload=function(){
- //获取图片容器
- var oBox=document.getElementById('container');
- //获取图片
- var aImgs=document.getElementsByTagName('img');
- //获取单张图片宽度
- var oImgWidth=aImgs[0].offsetWidth;
- //定义显露宽度
- var oInitWidth=160;
- //设置图片容器宽度
- oBox.style.width=oImgWidth + oInitWidth*(aImgs.length-1)+'px';
- //初始化图片位置
- function initImgPos(){
- for(var i = 1; i < aImgs.length; i++){ //由于第一张图片不需要设置,i从1开始
- aImgs[i].style.left=oImgWidth + oInitWidth*(i-1) + 'px';
- }
- }
- //初始化执行一次
- initImgPos()
- //定义鼠标滑过每个图片应移动的距离
- var translate=oImgWidth - oInitWidth;
- //鼠标滑动效果
- for (var i = 0; i < aImgs.length; i++) {
- // 使用立即执行函数,获得不同i的值
- (function(i){
- aImgs[i].onmouseover=function(){
- // 复位
- initImgPos();
- //重新计算位置
- for(var j = 1; j <= i; j++){
- aImgs[j].style.left=parseInt(aImgs[j].style.left,10) - translate + 'px';
- }
- }
- })(i)
- }
- }
笔记来源:慕课网:DOM探索之基础详解篇
Js+CSS3实现手风琴效果的更多相关文章
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
- 史上最简单的js+css3实现时钟效果
今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...
- js css3实现钟表效果
原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: <div class=&quo ...
- js的轮播效果
图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...
- 一步步教你css3手风琴效果的实现
什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...
- tiltShift.js - CSS3 滤镜实现移轴镜头效果
tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
随机推荐
- 新版IdFTP解决中文乱码问题
用XE10后开发FTP客户端,发现有中文乱码问题.这里也主要是编码的问题,在connect链接后,需要设置编码方可. 注意: IndyTextEncoding_OSDefault; 该代码可能需 ...
- LeetCode:24. Swap Nodes in Pairs(Medium)
1. 原题链接 https://leetcode.com/problems/swap-nodes-in-pairs/description/ 2. 题目要求 给定一个链表,交换相邻的两个结点.已经交换 ...
- 「个人训练」Copying Books(UVa714)
好久不更新主要是怠惰了....还要加强训练. 题意分析与思路 注意到这样一句话: our goal is to minimize the maximum number of pages assigne ...
- Qt Creater 制作汽车仪表盘
最近项目用到了模拟仪表,网上下载大神编写的按个仪表Meter没有成功 转战 QWt 编译后,在creater中仍然无法使用,只可以在代码中使用 百度说是我编译的版本不对 扔到 开始做自己的 这个用到了 ...
- ipfs02
IPFS-day02 其他常用操作 添加文件并用文件夹包裹 ipfs add xxx -w 把內容快取到本地,并提供给他人.官网文档 ipfs pin add QmT7TX5vGmFz86V8cDkP ...
- BZOJ 2756 SCOI2012 奇怪的游戏 最大流
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2756 Description Blinker最近喜欢上一个奇怪的游戏. 这个游戏在一个 N ...
- DFS做题小结
一.深入理解DFS 采用递归写法 深度优先,思路就是沿着一条路一直走,直到走到死胡同,原路返回,返回到有多条道路的地方换其他路走.直到这条支路全部都访问过了,按照原路返回,回到起点,如果起点还有别的支 ...
- Bitcoin-NG
Bitcoin-NG,一个新的可扩展的区块链协议 Bitcoin-NG仅受限于网络的传输延时,它的带宽仅受限于个人节点的处理能力.通过将比特币的区块链操作分解为两部分来实现这个性能改善:首领选择(le ...
- Uva 12627 Erratic Expansion(递归)
这道题大体意思是利用一种递归规则生成不同的气球,问在某两行之间有多少个红气球. 我拿到这个题,一开始想的是递归求解,但在如何递归求解的思路上我的方法是错误的.在研读了例题上给出的提示后豁然开朗(顺便吐 ...
- 前端将markdown转换成html
实现过程: 1. npm引入:npm install marked --save 2.在需要的文件(.ts)里import Marked from "marked"; 如果.j ...