一、導航底部邊框滑動效果

阿新 • • 發佈：2019-01-28

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>滑動導航欄</title>
    <script scr=""></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" 
 />
    <style type="text/css">
        body,div,p{
            margin:0;
            padding:0;
        }
        .nav{
            background-color:black;
            position:fixed;
            left:0px;
            right:0px;
            width:80%;
            margin:10px auto;
            text-align 
:center;
            height:37px;
        }
        .nav a{
            padding:10px;
            color:white;
            line-height:30px;
            text-decoration:none;
            height:37px;
        }
        #navslip{
            height:2px;
            background-color:#8f919e;
            position 
:absolute;
            bottom:7px;
            width:0px;
            left:0px;
            display:none;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="http://baidu.com" target="_black" >百度</a>
        <a href="http://sina.com" target="_black" >新浪</a>
        <a href="http://58.com" target="_black" >58同城</a>
        <a href="http://sentsin.com/message/" target="_black" title="留言">致時光</a>
        <a href="http://sentsin.com/daohang/" target="_black">前端圈</a>
        <i id="navslip"></i>
    </div>
    <script>
        $(function (){
            setSlip();
        });
        var setSlip = function(){
            var slip = $('#navslip');
            var a = $('.nav a:first');
            //初始化滑塊
            slip.css({
                'width':a.width()+10,
                'left' :parseInt(a.position().left) + 5 +'px'
            });
            $('.nav a').mouseenter(function(){
                //顯示滑塊
                if(slip.css('display') == 'none'){
                    slip.show();
                };
                //移動滑塊
                slip.stop().animate({
                    width: $(this).width()+10,
                    left:  parseInt($(this).position().left) + 5 +'px'
                },300);
            });
        };
    </script>
</body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Time of new life</title>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <style>

    * {
    padding: 0px;
    margin: 0px;
}
body{
    min-width: 1280px;
}
.header {
    height: 56px;
    width: 100%;
    border: 1px solid gray;
}
div.logo {
    float: left;
    margin: 10px 50px;
}

div.logo span {
    font-size: 23px;
    display: block;
    float: right;
}
ul {
    list-style-type: none;
    padding: 0px;
    float: right;
    position: relative;/*子元素absol*/
}
ul img{
    position: relative;
    top: 3px;
}
ul li {
    width: 110px;
    height: 56px;
    text-align: center;
    float: left;
}
ul li a {
    color: #848789;
    text-decoration: none;
    line-height: 56px;
}
ul a:hover{
    color: red;
}
.move{
    height: 4px;
    width: 110px;
    border-top: 4px solid red;/*只需要將上邊顯示出來*/
    position: absolute;
    left: 0;
    top: 52px;
    transition: left .2s ease-in-out 0s;/*包含四個過度屬性：執行變換屬性、執行時間、速率、延遲*/
    -webkit-transition: left .2s ease-in-out 0s;/*chrome和safari*/
    -moz-transition: left .2s ease-in-out 0s;/*firefox*/
    -o-transition: left .2s ease-in-out 0s;/*opera*/
}
li:nth-child(1):hover~ .move{    /*li元素的父元素的第一個子元素，當滑鼠停留其上時，move元素的left屬性改變*/
    left: 0px;
}
li:nth-child(2):hover~ .move{
    left: 110px;
}
li:nth-child(3):hover~ .move{
    left: 220px;
}
li:nth-child(4):hover~ .move{
    left: 330px;
}
li:nth-child(5):hover~ .move{
    left: 440px;
}
li:nth-child(6):hover~ .move{
    left: 550px;
}


    </style>
    <body>
        <div class="header">
            <div class="logo">
                <img src="(編組)3.png" alt="ico">
                <span> 新世界</span>
            </div>
                <ul>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">最新活動</a></li>
                    <li><a href="#">專案介紹</a></li>
                    <li><a href="#">愛心社群</a></li>
                    <li><a href="#">關於我們</a></li>
                    <li><a href="#" style="color:red;"><img src="2.png" alt="set in"> 登入</a></li>
                    <li class="move"> </li>
                </ul>
        </div>
    </body>
</html>

一、導航底部邊框滑動效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <

swift 導航條分段+滑動效果用第三方PageTitleView

private lazy var pageTitleView: MFPageTitleView = { let config = MFPageTitleViewConfig() config.titleColor = colorWithRGB(r: 43,

Android ViewPager和Fragment實現仿微信導航介面及滑動效果

1 先看看實現的效果： ps：上面每一幀Fragment中，包含是來自網路的圖片；實現ViewPager+Fragment的頁面滑動和底部導航原理主佈局檔案如下： <?xml version="1.0" encoding="utf-8"?> <L

安卓專案實戰之ByeBurger一句程式碼實現標題欄、導航欄滑動隱藏

簡介效果圖內容View可為：ViewPager中巢狀RecycleView 內容View可為：NestedScrollView包裹TextView 內容View可為：NestedScrollView包裹WebView 如何使用 1.在project的

Android 應用開發----7. ViewPager+Fragment一步步打造頂部導航介面滑動效果

ViewPager+Fragment一步步打造頂部導航介面滑動效果在許多應用中，我們常常用到這麼一個效果：可以看到，由於現在的應用資料經常需要涉及到多個模組，所以常常需要使用滑動標籤在多個頁面之間跳轉，實現這樣的效果有很多種方式（比如系統自帶的tabhost控

Android ViewPager和Fragment實現頂部導航介面滑動效果、標籤下的tab位置

在專案中，我們常常需要實現介面滑動切換的效果。例如，微信介面的左右滑動切換效果。那這種效果是怎麼實現的？今天我就帶大家簡單瞭解ViewPager，並通過例項來實現該效果。一. ViewP

教你如何使用ViewPager+Fragment一步步打造頂部導航介面滑動效果

最近在整理以前的知識點，重新碰到了以前專案中的一個滑動分頁的效果，就打算寫這麼一篇文章分享一下ViewPager的經典使用在許多應用中，我們常常用到這麼一個效果：可以看到，由於現在的應用資料經常需要涉及到多個模組，所以常常需要使用滑動標籤在多個頁面之間跳轉，實現這樣

學習筆記一、UITableView上下滾動導航欄漸變隱藏和顯示效果

大體思路：定義一個UINavigationBar的Category,在NavigationBar頂層增加一個檢視overlay。滾動時通過設定overlay檢視的背景色和透明度來達到隱藏和顯示導航欄效果。程式碼如下： #import <UIKit/UIKit.h&g

一、jQuery小程式之jQuery效果顯示和隱藏 fading方法滑動方法 animate()動畫方法 chaining

隱藏和顯示： <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="htt

使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)

pla 手指測試距離 ack cti 時間 .proto start PC 移動端兼容 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 慣性助動，滑動回彈門面模式 window.onload = function() { /*測試

一階段項目開始的第一天所遇到的問題和解決（瀏覽器滾動條的變相隱藏，div的邊框陰影效果，圖片的色彩漸變）

影響 -c sed gpo 含義 hide eight 設置技術滾動條的隱藏： 1. 把body的橫向，縱向的超出部分隱藏，寬設置100%；高設置100%。就沒有body的滾動條了， 2. 然後把最外層的div的寬設置的比body的寬寬一點，把div的滾動條擠出去，

Android 滑動效果入門篇（一）—— ViewFlipper

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

使用Flex 彈性佈局來實現手機端頂部，底部固定，中間滑動效果

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, max

底部導航欄中間凸出效果

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

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

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

微信小程式實現slideUp、slideDown滑動效果及點選空白隱藏功能示例

本文例項講述了微信小程式實現slideUp、slideDown滑動效果及點選空白隱藏功能。分享給大家供大家參考，具體如下：怎樣實現jq中的slideUp或者slideDown這種動畫效果呢，我的思路是用css3的transform: translateY() 屬性，給需要動畫的元素新增上一個動畫

一、Android 實現兩個TextView跑馬燈效果

超長的文字在有限的佈局中，實現一行迴圈顯示？如果是隻有一個TextView實現跑馬燈效果可以簡單使用以下方式來實現： <TextView android:layout_width="wrap_content" android:layout

帶滑動條的導航欄(中)---jQuery實現滑動效果

前言本節利用jQuery實現最終的滑動效果。文件示例程式碼下面有下載連結。網頁程式碼 navigator2.html <!DOCTYPE html> <html> <head> <meta charset="u

android-仿美麗說有滑動效果的導航欄

如果大家想要簡單點的，也可以參考：http://blog.csdn.net/jdsjlzx/article/details/51560133效果圖：這兩天看到“美麗說”首頁的底部導航欄有一個可以滑動的小紅塊，覺得很有趣味。於是做了一個具有類似效果的元件RollNavigati

table表格的相關設定（邊框合併、隔行變色、新增內邊框、單獨設定某一列）

1、為table表格設定邊框合併 table{ border-collapse:collapse; border-spacing:0; } 2、隔行變色和新增內邊框 function addColor() { var tbodyTrList = $(

一、導航底部邊框滑動效果

相關推薦