2. 程式人生 > >導航欄之抖動效果

導航欄之抖動效果

阿新 • • 發佈：2017-07-08
this element strong 產品 z-index get 效果圖 position str 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>17-4-2</title>
 6     <style>
 7         *{padding: 0; margin: 0;}
 8         li{list-style: none;}
 9 
10         ul{width: 400px; height: 30px; position: relative; margin
 
: 100px auto;}
11         li{float: left; width: 98px; height: 28px; line-height: 28px; border: 1px solid black; text-align: center; z-index: 2; position: relative; cursor: pointer;}
12         .bg{width: 100px; height: 5px; overflow: hidden; background: crimson; border: none;position: absolute; top: 24px
 
; left: 0; z-index: 1;}
13     </style>
14     <script>
15         window.onload=function () {
16             var oUl=document.getElementById(‘ul1‘);
17             var aLi=oUl.getElementsByTagName(‘li‘);
18             var oBg=aLi[aLi.length-1];
19             var iSpeed=0;
20             
21
 
             for(var i=0;i<aLi.length-1;i++){
22                 aLi[i].onmouseover=function () {
23                     startMove(oBg,this.offsetLeft);
24                 }
25             }
26             
27             function startMove(obj,iTarget) {
28                 clearInterval(obj.timer);
29                 obj.timer=setInterval(function () {
30                     iSpeed+=(iTarget-obj.offsetLeft)/5;  //5決定抖動幅度。
31                     iSpeed*=0.7;  //不斷變化，直至為0。
32 
33                     obj.style.left=obj.offsetLeft+iSpeed+‘px‘;
34                 },30)
35 
36             }
37         }
38     </script>
39 </head>
40 <body>
41 <ul id="ul1">
42     <li>首頁</li>
43     <li>關於我們</li>
44     <li>產品</li>
45     <li>聯系方式</li>
46     <li class="bg"></li>
47 </ul>
48 </body>
49 </html>

效果圖：

技術分享

導航欄之抖動效果

相關推薦

導航欄之抖動效果

this element strong 產品 z-index get 效果圖 position str 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c

iOS - 設置導航欄之標題欄居中、標題欄的背景顏色

nor right rect set line cati int tail 自定義 本章實現效果: Untitled.gif 前言: 項目中很多需求是要求自定義標題欄居中的,本人最近就遇到這中需求,如果用系統自帶的titleView設置的話,不會居中,經過嘗試，

底部導航欄中間凸出效果

xml根部局 加 android:clipChildren="false"， 以我這個導航欄為例， 設定radiogroup高度為50，裡面中間的買家秀radiobutton高度為80，重要的一點是要設定radiobutton的android:layout_gravity="

Kotlin實現仿知乎底部導航欄顯示隱藏效果Behavior

        最開始遇見這個問題我的第一想法是給recyclerview新增滑動監聽，然後再給底部導航新增顯示隱藏動畫，可是這麼做很不優雅，一旦recyclerview不止一個就需要給每個都新增一遍監聽（雖然同樣的程式碼cv就行了），這絕不是一個優秀程式設計師的追求。所以就

Android仿小米商城底部導航欄之二（BottomNavigationBar、ViewPager和Fragment的聯動使用）

簡介 在前文《Android仿小米商城底部導航欄（基於BottomNavigationBar）》我們使用BottomNavigationBar控制元件模仿實現了小米商城底部導航欄效果。接下來更進一步的，我們將通過BottomNavigationBar控制元件和

Android專案導航欄之仿微信底部導航欄TabLayout+ViewPager+Fragment

一、實現效果： 二、依賴jar包： compile 'com.android.support:design:24+'三、專案工程結構： 四、XML佈局 activity_main.xml佈局： <?xml version="1.0" encoding="u

Android之官方導航欄之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_wid

Vue 事件監聽實現導航欄吸頂效果（頁面滾動後定位）

所說的吸頂效果就是在頁面沒有滑動之前，導航欄的效果如下圖所示：當頁面向上滑動之後，導航欄始終固定在頁面的上方。具體程式碼：寫入事件監聽，監聽滾動條。mounted () { // 事件監聽滾動條 window.addEventListener('scroll', this.watchS

iOS開發實現導航欄透明度漸變效果

最近做專案實現新的需求，初始狀態導航欄透明，隨著滑動的過程中，改變導航欄的透明度，逐漸顏色加深。 網上找到了兩種解決方案。 第一種，通過研究導航欄的結構圖，找出影響背景顏色的控制元件，對其進行控制改變。 NavigationBar背後有一張型別_

iOS開發技巧：設定導航欄全透明效果

前言 本篇是iOS開發技巧系列部落格的第五篇，本篇主要和大家一起分享如何設定導航欄全透明效果。在實際開發中也經常會有這樣的需求，比如iPhone版本的QQ音樂，其播放音樂介面的導航欄就是透明的，如下所示： 實現 為簡化操作，這裡我們使用 storybo

jquery實現導航欄吸頂效果（簡潔版）

憋說話，直接上程式碼，先是最最重要的js：   $(function(){     var a = $('#course-tab'),       b =a.offset();//返回或設定導航欄相

Android之仿今日頭條頂部導航欄效果

隨著時間的推移現在的軟體要求顯示的內容越來越多，所以要在小的螢幕上能夠更好的顯示更多的內容，首先我們會想到底部選單欄，但是有時候像今日頭條新聞客戶端要顯示的內容太多，而且又想在主介面全部顯示出來，所以有加了頂部導航欄。 今日頭條頂部導航欄區域的主要部分是一個導航選單。導航選

微信小程序開發之tab導航欄

pos eight 數字 this -a fun index ice ive 實現功能： 點擊不同的tab導航，篩選數據 UI: js： data：{ navbar: [‘半月維保‘, ‘季度維保‘, ‘半年維保‘,"年度維保"], //count:[0,2,3

MUI底部導航欄切換效果

自定義事件 home nvi tlist -a person def fault nis 首先是html代碼： <nav class="mui-bar mui-bar-tab"> <a href="view

【前端】javascript實現導航欄筋鬥雲效果特效

超時 out die ron 滑動 scrip mouseover none point 實現效果： 　　實現效果如下圖所示 實現原理： 什麽是筋鬥雲效果： 這個效果很簡單,就是鼠標移到其他導航目錄時會有背景圖片跟著鼠標滑動到當前的目錄。 實現思路： 鼠標經過的時候

phpcms之調用導航欄

url log left _parentid else lis listorder head ont 首頁： {pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorde

Framework7學習筆記之導航欄與工具欄的布局類型

class 文件中 div 工具 gpo 導航 log 不同的 布局 一：布局類型 導航欄、工具欄 有多種布局類型，他們分別有不同的表現效果，主要有：靜態布局、固定布局、穿透布局。 二：靜態布局（少用） 靜態布局的導航欄、工具欄，是寫死在頁面文件中的，

Framework7學習筆記之 導航欄

link lock pos strong ont 設定 ref data- body 一：導航欄的布局 導航欄按“左 中 右”用三個div進行布局，中部寬度優先級最低，兩邊內容較多時會把中部用 ... 縮起來。 <div class="navbar"&g

導航欄效果

over delay col AC idt pos point translate active <ul> <li>不可思議的CSS</li> <li>導航欄</li&

奇妙的CSS3—導航欄下劃線跟隨效果

效果 active 結構 mage 這就是 來看 back -h ace 先來看一下效果： 1、基本效果就是這樣的 ，鼠標懸停，下劃線劃入。鼠標離開，下劃線劃出 2、下劃線的劃入是有方向的，從左側劃入懸停，下劃線由左向右伸長。從右側劃入，下劃線由又往左伸長 實