JavaScript >> Javascript 文檔 >  >> jQuery

jQuery PointPoint - 一個指向事物的插件

網頁設計師發現自己處於一個艱難的境地——他們必須同時構建直觀且可用的漂亮用戶界面。有時,儘管我們做出了認真的努力,但對於新手用戶來說,Web 應用程序可能會變得難以使用。一種解決方案是創建某種形式的應用程序功能導覽。另一種是在設計本身中加入視覺線索。

在本教程中,我們將編寫一個 jQuery 插件,幫助您將用戶的注意力吸引到頁面的特定部分,以顯示在鼠標光標旁邊的小箭頭的形式。這對於指向遺漏的表單字段、需要按下的按鈕或需要滾動到視圖中的驗證錯誤很有用。

工作原理

讓我們直接進入代碼 - 它大約有 100 行(帶有註釋),所以不難理解。

jquery.pointpoint.js

(function($){

    // Defining our jQuery plugin

    $.fn.pointPoint = function(prop){

        // Default parameters

        var options = $.extend({
            "class"     : "pointPointArrow",
            "distance"  : 30
        },prop);

        var pointers = [];

        // If CSS transforms are not supported, exit;

        if(!$.support.transform){
            this.destroyPointPoint = function(){};
            return this;
        }

        this.each(function(){

            var findMe = $(this),
                point = $('<div class="'+options['class']+'">').appendTo('body'),
                offset, center = {}, mouse = {}, props = {}, a, b, h, deg, op,
                pointHidden = true, rad_to_deg = 180/Math.PI;

            pointers.push(point);

            // Calculating the position of the pointer on mouse move

            $('html').bind('mousemove.pointPoint',function(e){

                if(pointHidden){
                    point.show();
                    pointHidden = false;
                }

                offset = findMe.offset();

                // The center of the element we are pointing at
                center.x = offset.left + findMe.outerWidth()/2;
                center.y = offset.top + findMe.outerHeight()/2;

                mouse.x = e.pageX;
                mouse.y = e.pageY;

                // We are treating the mouse position and center
                // point as the corners of a right triangle.
                // h is the hypotenuse, or distance between the two.

                a = mouse.y - center.y;
                b = center.x - mouse.x;
                h = Math.sqrt(a*a + b*b);

                // Calculating the degree (in radians),
                // the pointer should be rotated by:
                deg = Math.atan2(a,b);

                // Lowering the opacity of the pointer, depending
                // on the distance from the mouse pointer

                op = 1;
                if(h < 50){
                    op = 0;
                } else if(h < 160){
                    op = (h - 50) / 110;
                }

                // Moving and rotating the pointer

                props.marginTop  = mouse.y-options.distance*Math.sin(deg);
                props.marginLeft = mouse.x+options.distance*Math.cos(deg);
                props.transform  = 'rotate('+(-deg*rad_to_deg)+'deg)';
                props.opacity    = op;

                point.css(props);

            }).bind('mouseleave.pointPoint',function(){
                point.hide();
                pointHidden = true;
            });

        });

        this.destroyPointPoint = function(){

            // Unbind all the event handlers
            // and remove() the pointers 

            $('html').unbind('.pointPoint');

            $.each(pointers,function(){
                this.remove();
            });

        };

        return this;
    };

})(jQuery);

當你調用 pointPoint() ,它為 mousemove 事件創建一個事件偵聽器。在其中,插件使用三角函數計算箭頭的位置和旋轉。如果您想了解更多信息,請查看這篇 Wikipedia 文章。

我還在為 jQuery 使用 transform.js CSS 鉤子,它在支持它們的瀏覽器中支持 CSS3 旋轉(這意味著插件 在 IE678 中不起作用 )。

如何使用

包括 jQuery PointPoint 在您的網站中,您需要復制 jquery.pointpoint 文件夾(位於 /assets 在可下載的 zip 中)在您的目錄結構中。在此之後,您需要做的就是在您的頁面中包含兩個 js 文件和您在其中找到的樣式表。參考index.html 舉個例子。

該插件本身易於使用。你只需要在你需要指向的元素上調用它。當您移動鼠標時,插件會自動找到元素的位置並更新箭頭。您還可以傳遞具有兩個屬性的參數對象 - “class " 和 "距離 ”。

$('#pushButton').pointPoint();

/*
    // You can also pass arguments:
    $('#pushButton').pointPoint({
        "class":"myNewPointer",
        "distance":100
    });
*/

上面的代碼片段在鼠標光標旁邊添加了一個箭頭,它指向 id 為 "pushButton 的元素 "。第二個示例中的參數將在箭頭上設置一個自定義類(以防您要自定義樣式)並將其移動到遠離鼠標光標的位置。箭頭的默認樣式在 jquery.pointpoint.css .

當您調用插件時,它會返回一個 jQuery 對象,因此您可以在方法調用鏈中使用它。然而,有一個細微的差別 - 這個對像有一個額外的方法 - destroyPointPoint() , 可以用來取消插件:

var pp = $('#pushButton').pointPoint();

$('body').click(function(){
    pp.destroyPointPoint();
});

這將移除所有箭頭並銷毀鼠標移動事件的事件監聽器。

我們完成了!

我希望你發現這個插件很有用,並且只用它來做善事,而不是作惡。像往常一樣,在評論部分分享您的建議。


Tutorial JavaScript 教程
  1. 學習堆棧

  2. 鏈接縮短器(多用戶)- Firebase 和 React [9.5 小時 youtube 系列]

  3. 如何將對象序列化為 URL 查詢參數列表?

  4. 我無法在js中使用reduce獲取對象a的數組b

  5. iframe 微前端:使 React 應用程序正確的 iframe

  6. ReactJS 與 AngularJS

  7. Vue.Js 越來越受歡迎的原因

  1. 角模塊

  2. Kurt Kemple:我從幫助其他開發者取得成功中獲得了最大的快樂

  3. Next.js 的三個新特性以及如何使用它們

  4. React 站點上的良好安全實踐

  5. Javascript Set CSS:使用 javascript 設置 CSS 樣式

  6. NestJS 的傳輸 EventBus

  7. 使用 React、Strapi 和 GraphQL 構建博客 - 在前端創建帖子並顯示它

  1. 創建用於在反應中獲取數據的自定義鉤子

  2. 理解 NodeJs 中的事件循環阻塞並排除故障 [第 1 部分]

  3. 通過為待辦事項應用構建 API 來學習 Graphql。

  4. JavaScript 對象條目() |方法