jquery,scss實現簡單的手風琴效果

2021-07-24 18:53:18 字數 2447 閱讀 2419

首先頁面引用jquery,基本的css,之後開始對頁面進行整體的布局,首先乙個大的div作為容器並且設定容器的大小,之後採用ul li的形式並且要設定為浮動float:left,裡面巢狀a標籤為了跳轉頁面;具體如下方:

html>之後開始寫css,要想要裡面的在還未全部顯示的時候怎麼辦,這個時候就要設定包含的容器也就是.box-img要設定為絕對定位,預設都是0,滑鼠移動到當前的li上面lef變成該div的四分一,這樣就能保證預設是劇中的,具體css看下方**

.clearfix

.clearfix

:before, .clearfix

:after

.clearfix

:after

.accordion-warp

.boxrecommend

.boxrecommend

li.boxrecommend

li.last

.boxrecommend

li.box-item

.boxrecommend

li.box-img

.boxrecommend

li.box-img

img

接下來配合jquery就大功告成啦!

$(function

()).removeclass("on").children(".box-img").css("left","-115px");

//滑鼠移動到當前位置當寬度達到460時候停止動畫效果,並且新增class為on的標識,是left為0

b.stop().animate().addclass("on").children(".box-img").css("left",0)

}), $(window).resize(function

() )

});

以下為scss

@charset

"utf-8";

.clearfix

&:after

}.accordion-warp

.boxrecommend

&.box-item

& .box-img

}}}

執行緒的簡單實現

public class threadsample public static class thread1 implements runnable catch interruptedexception e public static class thread2 extends thread catc...

AutoPager的簡單實現

展開後如下所示 這個功能雖然比較小,但是實現起來是非常有意思的事情,我們可以選擇多種方法達到目的。下面我介紹一種簡單的實現方式。1 首先移動滾動條會觸發window.onscroll事件。2 我們可以根據滾動條滾動時螢幕位置和頁面底部的距離來判斷是否需要翻頁。需要用到三個函式 1 pageheigh...

棧的簡單實現

設棧採用順序儲存結構 用動態陣列 請編寫棧的各種基本操作的實現函式 棧的動態陣列順序儲存結構可定義如下 struct stack 棧的基本操作可包括 void initstack stack s 構造乙個空棧 s int emptystack stack s 若棧s 為空棧返回 1,否則返回0 vo...