效果截图:

HTML代码:

  1. <div id="container">
  2. <img src="data:images/photo01.jpg" alt="">
  3. <img src="data:images/photo02.jpg" alt="">
  4. <img src="data:images/photo03.jpg" alt="">
  5. <img src="data:images/photo04.jpg" alt="">
  6. </div>

CSS样式:

  1. *{
  2. margin:; padding:;
  3. }
  4. #container{
  5. margin: 30px auto; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 420px; overflow: hidden;
  6. font-size:; position: relative;
  7. }
  8. #container img{
  9. display: block;width: 420px; height: 420px; position: absolute; left:; top:; border-top: 1px solid #ccc;
  10. border-left: 1px solid #ccc;
  11. -webkit-transition: all 1s;
  12. -moz-transition: all 1s;
  13. -ms-transition: all 1s;
  14. -o-transition: all 1s;
  15. }

JS代码:

  1. window.onload=function(){
  2. //获取图片容器
  3. var oBox=document.getElementById('container');
  4.  
  5. //获取图片
  6. var aImgs=document.getElementsByTagName('img');
  7.  
  8. //获取单张图片宽度
  9. var oImgWidth=aImgs[0].offsetWidth;
  10.  
  11. //定义显露宽度
  12. var oInitWidth=160;
  13.  
  14. //设置图片容器宽度
  15. oBox.style.width=oImgWidth + oInitWidth*(aImgs.length-1)+'px';
  16.  
  17. //初始化图片位置
  18. function initImgPos(){
  19. for(var i = 1; i < aImgs.length; i++){ //由于第一张图片不需要设置,i从1开始
  20. aImgs[i].style.left=oImgWidth + oInitWidth*(i-1) + 'px';
  21. }
  22. }
  23. //初始化执行一次
  24. initImgPos()
  25.  
  26. //定义鼠标滑过每个图片应移动的距离
  27. var translate=oImgWidth - oInitWidth;
  28.  
  29. //鼠标滑动效果
  30. for (var i = 0; i < aImgs.length; i++) {
  31. // 使用立即执行函数,获得不同i的值
  32. (function(i){
  33. aImgs[i].onmouseover=function(){
  34. // 复位
  35. initImgPos();
  36.  
  37. //重新计算位置
  38. for(var j = 1; j <= i; j++){
  39. aImgs[j].style.left=parseInt(aImgs[j].style.left,10) - translate + 'px';
  40. }
  41. }
  42. })(i)
  43. }
  44.  
  45. }

笔记来源:慕课网:DOM探索之基础详解篇

Js+CSS3实现手风琴效果的更多相关文章

  1. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  2. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  3. js css3实现钟表效果

    原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: <div class=&quo ...

  4. js的轮播效果

    图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...

  5. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  6. tiltShift.js - CSS3 滤镜实现移轴镜头效果

    tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...

  7. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  8. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  9. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

随机推荐

  1. 新版IdFTP解决中文乱码问题

    用XE10后开发FTP客户端,发现有中文乱码问题.这里也主要是编码的问题,在connect链接后,需要设置编码方可. 注意:  IndyTextEncoding_OSDefault;   该代码可能需 ...

  2. LeetCode:24. Swap Nodes in Pairs(Medium)

    1. 原题链接 https://leetcode.com/problems/swap-nodes-in-pairs/description/ 2. 题目要求 给定一个链表,交换相邻的两个结点.已经交换 ...

  3. 「个人训练」Copying Books(UVa714)

    好久不更新主要是怠惰了....还要加强训练. 题意分析与思路 注意到这样一句话: our goal is to minimize the maximum number of pages assigne ...

  4. Qt Creater 制作汽车仪表盘

    最近项目用到了模拟仪表,网上下载大神编写的按个仪表Meter没有成功 转战 QWt 编译后,在creater中仍然无法使用,只可以在代码中使用 百度说是我编译的版本不对 扔到 开始做自己的 这个用到了 ...

  5. ipfs02

    IPFS-day02 其他常用操作 添加文件并用文件夹包裹 ipfs add xxx -w 把內容快取到本地,并提供给他人.官网文档 ipfs pin add QmT7TX5vGmFz86V8cDkP ...

  6. BZOJ 2756 SCOI2012 奇怪的游戏 最大流

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2756 Description Blinker最近喜欢上一个奇怪的游戏. 这个游戏在一个 N ...

  7. DFS做题小结

    一.深入理解DFS 采用递归写法 深度优先,思路就是沿着一条路一直走,直到走到死胡同,原路返回,返回到有多条道路的地方换其他路走.直到这条支路全部都访问过了,按照原路返回,回到起点,如果起点还有别的支 ...

  8. Bitcoin-NG

    Bitcoin-NG,一个新的可扩展的区块链协议 Bitcoin-NG仅受限于网络的传输延时,它的带宽仅受限于个人节点的处理能力.通过将比特币的区块链操作分解为两部分来实现这个性能改善:首领选择(le ...

  9. Uva 12627 Erratic Expansion(递归)

    这道题大体意思是利用一种递归规则生成不同的气球,问在某两行之间有多少个红气球. 我拿到这个题,一开始想的是递归求解,但在如何递归求解的思路上我的方法是错误的.在研读了例题上给出的提示后豁然开朗(顺便吐 ...

  10. 前端将markdown转换成html

    实现过程: 1. npm引入:npm install marked --save 2.在需要的文件(.ts)里import Marked from "marked";   如果.j ...