日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

滑动门效果

發布時間：2023/12/31 38 豆豆
生活随笔 收集整理的這篇文章主要介紹了 滑动门效果 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

滑動門效果

滑動門效果簡言之就是當鼠標放在折疊的圖片上時，圖片顯示全部。本著能用代碼表達的想法堅決不用文字，哈哈，我們一起來看看如何用代碼實現吧！

  • 框架，HTML代碼
    • <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>滑動門效果</title><link rel="stylesheet" href="styles/reset.css" /><link rel="stylesheet" href="styles/slidingdoors.css" /><script type="text/javascript" src="scripts/slidingdoors.js"></script></head><body><div id="container"> <img src="images/ty1.png" alt="1080p神器" title="1080p神器" /> //圖片路徑要寫對<img src="images/ty2.png" alt="1080p神器" title="1080p神器" /><img src="images/ty3.png" alt="1080p神器" title="1080p神器" /><img src="images/ty4.png" alt="1080p神器" </html>

    2.樣式，CSS代碼
    這是reset.css.可以直接在網上下載，目的是重置頁面所

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: '';content: none; } table {border-collapse:rder-spacing: 0; }border-collapse: collspac }

    例體CSS樣式，如下:

    3.行為，JS代碼

    window.onload=function(){//容器對象var box=document.getElementById('container');//獲取圖片的list集合var imgs=box.getElementsByTagName('img');//獲取圖片的寬度var imgWidth=imgs[0].offsetWidth;alert("imgWidth");//設置掩藏們體露出的寬度var exposeWidth=60;//設置容器總寬度var boxWidth=imgWidth+(imgs.length-1)*exposeWidth;box.style.width=boxWidth+'px';//設置每道門的初始位置function setImgsPos(){for(var i=1,len=imgs.length;i<len;i++){imgs[i].style.left=imgWidth+exposeWidth*(i-1)+'px';}}setImgsPos();//計算每道門打開時應移動的距離var translate=imgWidth-exposeWidth;//為每道門綁定事件for(var i=0,len=imgs.length;i<len;i++){//使用立即調用那個的函數表達式，為了獲得不同的i值(function(i){imgs[i].onmouseover=function(){//先捋每道門復位setImgsPos();//打開門for( var j=1;j<=i;j++){imgs[j].style.lft=parseInt(imgs[j].style.left,10)-tra` ` ` ` `sla'px';}};})(i);} };

    總結

    以上是生活随笔為你收集整理的滑动门效果的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。