快捷導(dǎo)航

js實(shí)現(xiàn)簡單手風(fēng)琴效果

更新時(shí)間：2021年09月26日 09:01:39 作者：段嘉許..！

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)手風(fēng)琴效果的具體代碼，供大家參考，具體內(nèi)容如下

效果：

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   *{
    margin:0;
    padding:0;
   }
   ul,li{
    list-style:none;
   }
   .box{
    width:1200px;
    height:260px;
    margin:50px auto 0;
    overflow: hidden;
   }
   .list{
    width:2000px;
    height:260px;
   }
   .list>li{
    width:200px;
    height:260px;
    float:left;
    background-image:url(images/1.jpg);
    background-position:center center;
    background-repeat:no-repeat;
   }
   .list>li:nth-child(2){
    background-image:url(images/2.jpg);
   }
   .list>li:nth-child(3){
    background-image:url(images/3.jpg);
   }
   .list>li:nth-child(4){
    background-image:url(images/4.jpg);
   }
   .list>li:nth-child(5){
    background-image:url(images/5.jpg);
   }
   .list>li:nth-child(6){
    background-image:url(images/6.jpg);
   }
  </style>
 </head>
 <body>
  
  <div class="box">
   <ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
  
  <script src="js/startmove.js"></script>
  <script>
   
   var oLis = document.getElementsByClassName("list")[0].children;
   
   for(var i = 0; i < oLis.length; i++){
    oLis[i].onmouseover = function(){
     for(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       width:160
      },50)
     }
     startMove(this,{
      width:400
     },50)
    }
    oLis[i].onmouseout = function(){
     
     for(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       width:200
      },10)
     }
    }
   }
   
   
  </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

判斷window.onload是否多次使用的方法
window.onload想必大家都有使用過吧，在窗口加載時(shí)執(zhí)行，如果多次使用window.onload該如何判斷呢？下面與大家分享個(gè)方法
2014-09-09
談?wù)劦谌紸pp接入微信登錄解讀
本篇文章主要介紹了談?wù)劦谌紸pp接入微信登錄解讀，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧。
2016-12-12
值得分享的JavaScript實(shí)現(xiàn)圖片輪播組件
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片輪播組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
javascript簡單實(shí)現(xiàn)等比例縮小圖片的方法
這篇文章主要介紹了javascript簡單實(shí)現(xiàn)等比例縮小圖片的方法,涉及javascript針對(duì)頁面元素屬性的讀取、運(yùn)算及設(shè)置相關(guān)技巧,需要的朋友可以參考下
2016-07-07
javascript 必知必會(huì)之closure
本系列博文主要談一些在 javascript 使用中經(jīng)常會(huì)混淆的高級(jí)應(yīng)用,包括: prototype, closure, scope, this關(guān)鍵字. 對(duì)于一個(gè)需要提高自己javascript水平的程序員,這些都是必須要掌握的.
2009-09-09
js實(shí)現(xiàn)數(shù)組去重方法及效率對(duì)比
本文主要介紹了js實(shí)現(xiàn)數(shù)組去重方法及效率對(duì)比。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
獲取本機(jī)IP地址的實(shí)例(JavaScript / Node.js)
下面小編就為大家分享一篇使用JavaScript和Node.js獲取本機(jī)IP地址的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助
2017-11-11
使用JavaScript平移和縮放圖像的示例代碼
平移和縮放是查看圖像時(shí)常用的功能,我們可以放大圖像以查看更多細(xì)節(jié),進(jìn)行圖像編輯,Dynamsoft Document Viewer是一個(gè)用于此目的的SDK,它為文檔圖像提供了一組查看器,在本文中,我們將演示如何使用它來平移和縮放圖像,需要的朋友可以參考下
2024-08-08
javascript內(nèi)嵌式與外鏈?zhǔn)降幕緫?yīng)用方式
這篇文章主要介紹了javascript內(nèi)嵌式與外鏈?zhǔn)降幕緫?yīng)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-12-12
詳解axios跨端架構(gòu)是如何實(shí)現(xiàn)的
我們都知道,axios 是是一個(gè)跨平臺(tái)請(qǐng)求方案,在瀏覽器端采用 XMLHttpRequest API 進(jìn)行封裝,而在 Node.js 端則采用 http/https 模塊進(jìn)行封裝,那么本文,我們將來探討這個(gè)話題：axios 的跨端架構(gòu)是如何實(shí)現(xiàn)的,需要的朋友可以參考下
2024-04-04