jquery加CSS3實現導航跟隨滑鼠移動

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

經常看到有的網頁導航選單下有個底部邊框跟隨滑鼠移動到的位置而移動

仔細想了下，如果只用jquery來實現發現會變得複雜，那麼我們知道CSS3裡有過度屬性transition

一.transition屬性的使用方法：
- 要實現這一點，必須規定兩項內容：
1.規定您希望把效果新增到哪個 CSS 屬性上
2.規定效果的時長

例：
div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* 當滑鼠移動到divs上時，div的寬度會逐漸增加到300px */
}
div:hover {width:300px;}

二、demo程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slide</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul, li {
            list-style: none;
        }

        .main 
 {
            margin: 0 auto;
            height: 50px;
            width: 900px;
            position: relative;
        }

        .moveul li {
            font-size: 16px;;
            width: 150px;
            height: 50px;
            line-height: 50px;
            color:#ffffff;
            background-color 
: #FFCCCC;
            text-align: center;
            float: left;
            cursor: pointer;
        }

        #slidebar {
            height: 2px;
            width: 150px;
            background: #993300;
            position: absolute;
            left: 0px;
            bottom: 0px;
            transition: all .5s;//設定過度時間為0.5秒，all是設定所有的過度屬性，如果只想讓width有過度效果，只需要transition: width .5s;
        }

        .animatemove {
            left: 150px;

        }
    </style>

    <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $(".moveul li").mouseover(function () {
                var con = $(this).index();
                $("#slidebar").css({
                    left: 150 * con + "px"
                });
            });
            $(".moveul li").mouseleave(function () {
                $("#slidebar").css({
                    left: "0px"
                })
            })
        })
    </script>
</head>
<body>
<div class="main">
    <ul class="moveul">
        <li>首頁</li>
        <li>新聞</li>
        <li>體育</li>
        <li>財經</li>
        <li>NBA</li>
    </ul>
    <div id="slidebar">
    </div>
</div>
</body>
</html>

效果圖：
這裡寫圖片描述

jquery加CSS3實現導航跟隨滑鼠移動

經常看到有的網頁導航選單下有個底部邊框跟隨滑鼠移動到的位置而移動仔細想了下，如果只用jquery來實現發現會變得複雜，那麼我們知道CSS3裡有過度屬性transition 一.transition屬性的使用方法： - 要實現這一點，必須規定兩項內容：

33個jQuery與CSS3實現的絢麗滑鼠懸停效果

只要你有創意，完全可以使用CSS3來實現漂亮的動效，當然如果配合jQuery，這樣會更加強大，實現更多高階絢麗的動畫效果。滑鼠hover效果是很常用的，雖然很細微的東西，但網站的細節註定的網站的體驗，所以也不要忽視這些小細節。今天設計達人網整理了33個使用jQuery

實現div在固定區域跟隨滑鼠移動點選拖動而產生的變化

一、思路 1.在外層增加一個 DIV 容器，並設定好容器的大小。（即：寬和高）當容器存在邊框的時候，由於這裡還沒找到獲取的方法，所以，在容器邊框大於 0 的時候，獲得的容器的限制區域的座標會有誤差。為了避免這情況，可以在多加一次容器，有邊框樣式的在外層，無邊框樣子的在內層。例： <

jquery和css3實現滑動導航選單

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="ht

圓點自動跟隨滑鼠移動

思路：在畫布上繪製一個圓點，在移動滑鼠時用背景圖覆蓋上一次的圖片，然後再在這張背景圖上繪製一個原點，利用定時器每隔10ms進行一次重新整理<!doctype html><html><head> <title>test</title> &l

UGUI跟隨滑鼠移動

using UnityEngine; using UnityEngine.EventSystems; public class DragUIMove : MonoBehaviour, IPointer

簡單的跟隨滑鼠移動

html <!DOCTYPE><html> <head> <link href="css/lianxi.css" type="text/css" rel="stylesheet"> <script type="text/javascrip

div跟隨滑鼠移動+上浮定位+移動放置新增與刪除

html程式碼 <html lang="zh-CN"> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <meta charset="utf-8

UGUI實現介面隨滑鼠移動效果

void Start () { BG = GameObject.Find("BackGround"); UIBG = BG.GetComponent<RectTr

[Unity][UGUI]獲得滑鼠對應螢幕的座標，圖片跟隨滑鼠移動

Input.mousePositionusing System.Collections; using System.Collections.Generic; using UnityEngine; public class Test_Mouse : MonoBehaviour

JS 事件基礎跟隨滑鼠移動

做一個div跟隨滑鼠移動注意事項：但凡利用到clientX和clientY，一定要加scrollTop和scrollLeft，因為clientX和clientY都是網頁可視區座標，沒有加被滾動區間的座標 <style> #d

標籤在滑鼠按下後跟隨滑鼠移動,相容低版本IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

物體跟隨滑鼠移動

Debug.Log("x="+Input.mousePosition.x);表示在螢幕的x Debug.Log("y=" + Input.mousePosition.y);表示在螢幕的y Debug.Log("height" + S

jq實現跟隨滑鼠點選移動的下劃線效果

效果如下： 1.html程式碼： 1 <div class="center-left-tap"> 2 <a href="javascript:void (0)" style="color: #1c1c1c;" class="current" oncli

CSS3實現滑鼠移動到圖片上圖片變大（緩慢變大，有過渡效果，放大的過程是有動畫過渡的，這個過渡的時間可以自定義）

CSS3的transform:scale()可以實現按比例放大或者縮小功能。 CSS3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對

超慢速移動動畫使用CSS3實現流暢效果

clas net 獲得 linear term 表示 ext eas == 三角碎片以很緩慢的速度旋轉移動。假設使用JS實現會出現一像素一像素移動的卡頓使用CSS3會獲得很理想的效果 transform: translate3d(80px, 150px, 0px)

使用css3實現小菊花加載效果

常見 ani frame 嘗試 linear key 利用 del 做成使用css3實現小菊花加載效果　　最常見的就是我們用到的加載動畫。加載動畫的效果處理的好，會給頁面帶來畫龍點睛的作用，而使用戶願意去等待。而頁面中最常用的做法是把動畫做成gif格式，當做背景圖或是i

css3 實現可以中英切換的導航條

images spl round img auto oat :hover sha test html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &

JQuery代碼實現上拉加載

spl json index nbsp left pict display 底部高度 1 $(window).scroll(function () { 2 //已經滾動到上面的頁面高度 3 var sl_top = $(this).scrollTop(); 4

jQuery實現導航欄

導航欄 adding spl PE char span function nav ack <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

jquery加CSS3實現導航跟隨滑鼠移動

相關推薦