真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

css3如何利用transform變形結(jié)合事件完成扇形導(dǎo)航-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)css3如何利用transform變形結(jié)合事件完成扇形導(dǎo)航的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)建站專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站重做改版、克東網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為克東等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

這個(gè)案例因?yàn)閷?xiě)錯(cuò)了一個(gè)transition的單詞，害得我花了一個(gè)下午的時(shí)間，真的眼睛都瞎了，以后不要再犯這種低級(jí)錯(cuò)誤 >_<

css3如何利用transform變形結(jié)合事件完成扇形導(dǎo)航

一、知識(shí)點(diǎn)分析

1、APDiv定位布局

2、點(diǎn)擊事件下的transition和transform的效果。

3、每個(gè)小圖標(biāo)的left和top值的計(jì)算。

4、點(diǎn)擊小圖標(biāo)后圖標(biāo)的transition事件偵聽(tīng)。

二、HTML源代碼

三、CSS樣式

body { margin: 0; } body{ background-color:#eee;} #stage { width: 300px; height: 300px; position: relative; top: 150px; margin: 0 auto; } #nav { position: absolute; width: 120px; height: 107px; left: 50%; margin-left: -60px; top: 50%; margin-top: -53px; } #nav img { width: 100%; position: absolute; left: 0; top: 0; cursor: pointer; } #home { position: absolute; width: 150px; height: 134px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; cursor: pointer; transition: 0.5s ease-in-out; } #home img { width: 100%; }

四、JavaScript源代碼

window.onload=function(){ var oHome=document.getElementById("home"); var oNav=document.getElementById("nav"); var aImg=oNav.getElementsByTagName("img"); var imgLen=aImg.length; var onOff=true; var iR=-260; //鼠標(biāo)點(diǎn)擊每個(gè)小圖標(biāo)的時(shí)候 for(var i=0;i

完整頁(yè)面代碼





環(huán)形導(dǎo)航

感謝各位的閱讀！關(guān)于“css3如何利用transform變形結(jié)合事件完成扇形導(dǎo)航”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：css3如何利用transform變形結(jié)合事件完成扇形導(dǎo)航-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/dosdhe.html