摘要:模擬返回頂部功能,添加在一定高度內隱藏功能。涵蓋的內容主要前端樣式排版,展示效果動畫,以及展示效果腳本的編寫編寫仿返回頂部留言客服頂部需要根據自己的背景圖,修改背景位置。返回頂部添加顯示隱藏功能,可根據需求更改顯示隱藏效果。
模擬JD返回頂部功能,添加在一定高度內隱藏功能。
返回頂部的前端實現。涵蓋的內容主要: 前端樣式(html排版),展示效果(CSS3 動畫),以及展示效果腳本的編寫(javascript編寫)
HTML
仿JD返回頂部
CSS
需要根據自己的背景圖,修改背景位置。
@charset "utf-8"; /********************** *CSS Animations by: * JD側邊欄 * ljc ***********************/ body { margin: 0; padding: 0; height: 2000px; } i, em { font-style: normal; } .jd-disno{ display: none ; } .jd-toolbar-wrap { position: fixed; top: 0; right: 0; z-index: 9990; width: 0; height: 100%; } .jd-toolbar-tabs { position: absolute; top: 82%; left: -35px; width: 35px; margin-top: -61px; } .jd-toolbar-tab { position: relative; width: 35px; height: 35px; margin-bottom: 1px; cursor: pointer; background-color: #7a6e6e; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .jd-toolbar-tab .tab-ico { width: 34px; height: 35px; margin-left: 1px; position: relative; z-index: 2; background-color: #7a6e6e; _display: block; } .jd-toolbar-tab .tab-ico { display: inline-block; background-image: url("../img/toolbars1.png"); background-repeat: no-repeat; } .jd-toolbar-tab .tab-text { width: 62px; height: 35px; line-height: 35px; color: rgb(255, 255, 255); text-align: center; font-family: "微軟雅黑"; position: absolute; z-index: 1; left: 35px; top: 0px; background-color: rgb(122, 110, 110); border-radius: 3px 0px 0px 3px; /*移出動畫效果*/ transition: left 0.3s ease-in-out 0.1s; } .jd-toolbar-tab-hover { background-color: #c81623; } .jd-toolbar-tab-hover .tab-ico { background-color: #c81623; } .jd-toolbar-tab-hover .tab-text { left: -60px; background: #c81623; } .jd-toolbar-tab-hover .tab-texts { left: -108px; background: #c81623; } /* 根據自己的背景圖,修改背景位置。*/ .jd-tab-vip .tab-ico { background-position: -2px -45px; } .jd-tab-follow .tab-ico { background-position: -3px -86px; } .jd-tab-top .tab-ico { background-position: -4px -170px; } .jd-tab-vip img { margin-top: 1px; }
JS
返回頂部添加顯示隱藏功能,可根據需求更改顯示隱藏效果。
$(function(){ //右側固定欄 var $jdToolbar = $(".jd-global-toolbar .jd-toolbar-tab"); $jdToolbar.hover(function(){ //鼠標移入添加class $(this).addClass("jd-toolbar-tab-hover"); },function(){ //鼠標移除如果含有class,則移除 if($(this).hasClass("jd-toolbar-tab-hover")){ $(this).removeClass("jd-toolbar-tab-hover"); } }); //返回頂部在一定高度內隱藏 $(window).scroll(function(){ var docHe= $(window).scrollTop(); var hideH = 600; if (docHe < hideH){ $("#returnTop").slideUp(1000); }else{ $("#returnTop").slideDown(1000); } }) //右側固定欄,返回頂部 $("#returnTop").click(function () { var speed=200;//滑動的速度 //添加返回頂部的動畫效果 $("body,html").animate({ scrollTop: 0 }, speed); return false; }); })
如有問題,歡迎大家交流指正。QQ:1357912285
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94356.html
摘要:模擬返回頂部功能,添加在一定高度內隱藏功能。涵蓋的內容主要前端樣式排版,展示效果動畫,以及展示效果腳本的編寫編寫仿返回頂部留言客服頂部需要根據自己的背景圖,修改背景位置。返回頂部添加顯示隱藏功能,可根據需求更改顯示隱藏效果。 模擬JD返回頂部功能,添加在一定高度內隱藏功能。 showImg(https://segmentfault.com/img/bV8M9m?w=1366&h=736...
摘要:實現根據上面的分析我們只需要通過代碼發送一個請求,并且帶上相對應的參數就可以實現登錄了。請輸入驗證碼登錄功能正在趕來的路上,敬請期待。。。加入購物車成功請輸入京東賬號請輸入京東密碼登錄成功登錄失敗項目地址模擬京東登錄吐槽群 Python模擬京東登錄 分析登錄的網絡請求 打開https://passport.jd.com/new/login.aspx,打開瀏覽器的調試面板,然后,輸入賬號...
摘要:項目地址求個在現在,商家一年不賣貨,雙賣出一年的貨是大家都知道的事實了,總得來說調一調蚊子腿的價格,聊勝于無,但是也會有些神價格會出現,這時候買到就是賺到本來是想趁著雙組臺電腦,買個的板套裝,沒想到京東的一直是無貨的狀態,這幾天有貨了,價格 項目地址 求個 star 在現在,商家一年不賣貨,雙11賣出一年的貨是大家都知道的事實了,總得來說調一調蚊子腿的價格,聊勝于無,但是也會有些神價格...
摘要:京東券電影票淘寶券代碼如下按照概率抽取一個獎品返回獎品所有獎品的概率總和應該為總概率基數方式二該方式如果直接看代碼比較難理解。 首發于 樊浩柏科學院 需求:首先用戶通過以一定方式(好友點贊等)開啟抽獎資格,然后按照用戶 100% 中獎概率進行抽獎,且系統的發放獎品需要按照各個獎品整體的期望中獎比例來進行分布,最后用戶抽中獎品調用第三方發放接口發放獎品并記錄保存,另有些獎品存在發放數量...
閱讀 3617·2023-04-25 23:32
閱讀 2039·2019-08-30 15:55
閱讀 2651·2019-08-30 15:52
閱讀 3110·2019-08-30 10:54
閱讀 839·2019-08-29 16:16
閱讀 647·2019-08-29 15:09
閱讀 3647·2019-08-26 14:05
閱讀 1632·2019-08-26 13:22