手工SEO

手工SEO首頁 帝國教程 正文

用LiftEffect.js快速實現樓層點亮的一個案例

手工SEO 2019-12-01 10:38:31 帝國教程 57℃ 手工SEO

LiftEffect.js下載地址:

要求頭部卷去時導航欄固定,點擊不同導航到達不同樓層,樓層變化時導航欄變化。

最終效果大致如下圖:

用LiftEffect.js快速實現樓層點亮的一個案例


1、HTML使用演示:

    <div class="ttt">
    <div class="shop-left-tt" id="shopnav">
        <span class="lift_item hoverqq">點我到第一層</span>
        <span class="lift_item">點我到第二層</span>
        <span class="lift_item">點我到第三層</span>
        <span class="lift_item">點我到第四層</span>
        <span class="lift_item">點我到第五層</span>
    </div>
    </div>
     
     
    <div class="f1">
    第一層的內容
    <div class="f2">
    第二層的內容
    <div class="f3">
    第三層的內容
    <div class="f4">
    第四層的內容
    <div class="f5">
    第五層的內容

2、JS調用:
 <script type="text/javascript">
        $(function(){
            LiftEffect({
                "control1": ".ttt",                           //側欄電梯的容器
                "control2": ".shop-left-tt",                           //需要遍歷的電梯的父元素
                "target": [".f1",".f2",".f3",".f4",".f5"], //監聽的內容,注意一定要從小到大輸入
                "current": "hoverqq"                           //選中的樣式
            });
        })
    </script>

 

上一篇:網頁廣告在線制作——Banner maker

下一篇:設置鏈接在新窗口中打開

相關文章

網站分類
標簽列表
在农村投资什么项目赚钱