首頁 JS特效 回到頂部 jQuery右側邊欄二維碼QQ客服回傳頂部程式碼

jQuery右側邊欄二維碼QQ客服回傳頂部程式碼

jQuery右側邊欄二維碼QQ客服回傳頂部程式碼

jQuery右側邊欄二維碼QQ客服回傳頂部程式碼

基於jquery.1.11.1.min.js製作的簡潔jQuery右側欄客服代碼,有微信二維碼、QQ、電話顯示及返回頂部功能,網頁右側懸浮層,滑鼠移動上去有效果。

js程式碼

        <script type="text/javascript">
            $(function() {
                $("#service a").hover(function() {
                    if ($(this).prop("className") == "weixin_area") {
                        $(this).children("img.hides").show();
                    } else {
                        $(this).children("div.hides").show();
                        $(this).children("img.shows").hide();
                        $(this).children("div.hides").animate({marginRight: '0px'}, '0');
                    }
                }, function() {
                    if ($(this).prop("className") == "weixin_area") {
                        $(this).children("img.hides").hide();
                    } else {
                        $(this).children("div.hides").animate({marginRight: '-163px'}, 0, function() {
                            $(this).hide();
                            $(this).next("img.shows").show();
                        });
                    }
                });

                $("#top_btn").click(function() {
                    $("html,body").animate({scrollTop: 0}, 600);
                });

                //右侧导航 - 二维码
                $(".weixin_area").hover(function() {
                    $(this).children(".weixin").show();
                },function(){
                    $(this).children(".weixin").hide();
                })
            });
        </script>

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

Mip中快速回頂組件怎麼用 Mip中快速回頂組件怎麼用

05 Nov 2018

這篇文章主要跟大家介紹MIP中快速回到頂部組件的使用,MIP中快速回到頂部組件也就是mip-gototop 快速回頂,添加快速回頂按鈕,點擊回到頁面頂部。

javascript實作回到頂部特效_javascript技巧 javascript實作回到頂部特效_javascript技巧

16 May 2016

當頁面特別長的時候,用戶想回到頁面頂部,必須要滾動好幾次滾動鍵才能回到頂部,如果在頁面右下角有一個「返回頂部」的按鈕,用戶點擊一下,就可以回到頂部,對使用者來說,是比較好的體驗。

如何用jQuery實現頁面返回頂部的效果(附程式碼) 如何用jQuery實現頁面返回頂部的效果(附程式碼)

18 Oct 2018

大家在瀏覽網站時有沒有發現,往下滑動頁面會出現一個回到頂部的按鈕,點擊就能回到頂部,那你知道HTML頁面回到頂部怎麼實現的嗎?這篇文章就跟大家分享最簡單的HTML頁面回傳頂部的jQuery程式碼,有興趣的朋友可以參考一下。

回到頂部總結 回到頂部總結

08 Oct 2016

回到頂部總結

回到頂部總結 回到頂部總結

08 Oct 2016

回到頂部總結

回到頂部總結 回到頂部總結

08 Oct 2016

網站中的回到頂部功能有益於增強用戶體驗,當一個頁面很長很長時,回到頂部是必不可少的。 回到頂部按鈕,可以使用圖片,背景圖,向量字體圖標,也可以使用代碼 css 產生。這裡使用 css 產生的方法。

仿新浪微博回頂端的jquery實作碼_jquery 仿新浪微博回頂端的jquery實作碼_jquery

16 May 2016

在web頁面中,如果頁面較高,為了方便使用者快速地回到頂部,都會新增一個返回頂部按鈕

js+css實作回到頂部按鈕(back to top)_javascript技巧 js+css實作回到頂部按鈕(back to top)_javascript技巧

16 May 2016

這篇文章主要為大家詳細介紹了js+css實現回到頂部按鈕back to top回到頂部按鈕,有興趣的小夥伴們可以參考一下

jQuery實作回到頂部功能 jQuery實作回到頂部功能

19 Apr 2018

這次帶給大家jQuery實現回到頂部功能,jQuery實現回到頂部功能的注意事項有哪些,下面就是實戰案例,一起來看一下。

See all articles See all articles