摘要:最近做一個循環(huán)滾動展示抽獎結(jié)果的功能,示例如下代碼抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆代碼代碼
最近做一個循環(huán)滾動展示抽獎結(jié)果的功能,示例如下
html代碼
</>復(fù)制代碼
- 1111抽中了2222顆云豆
- 2222抽中了2222顆云豆
- 3333抽中了2222顆云豆
- 4444抽中了2222顆云豆
- 5555抽中了2222顆云豆
- 6666抽中了2222顆云豆
- 7777抽中了2222顆云豆
- 8888抽中了2222顆云豆
- 9999抽中了2222顆云豆
- 6666抽中了2222顆云豆
- 7777抽中了2222顆云豆
- 8888抽中了2222顆云豆
- 9999抽中了2222顆云豆
js代碼
</>復(fù)制代碼
$(function(){
var list1 = $("#list1"),
list2 = $("#list2"),
list_wrap = $(".list-wrap"),
speed = 40;
list2.html(list1.html());
function scroll(){
if(list2.offset().top-list_wrap.scrollTop()<=0){
console.log(list_wrap.scrollTop() - list1.get(0).offsetHeight);
list_wrap.scrollTop(list_wrap.scrollTop() - list1.get(0).offsetHeight);
}else{
list_wrap.scrollTop(list_wrap.scrollTop() + 1);
}
}
var list_scroll=setInterval(scroll,speed);
list_wrap.hover(function(){
clearInterval(list_scroll)
},function(){
clearInterval(list_scroll),
list_scroll = setInterval(scroll,speed)
});
});
css代碼
</>復(fù)制代碼
.list{width:280px;height:300px;}
.list .list-wrap {overflow:hidden;width:280px;height:300px;}
.list .list-wrap ul{margin:0;padding: 0;}
.list .list-wrap ul li{margin:0;padding:0;line-height:30px;list-style-type: none;}
.list .list-wrap ul li .name{display:inline-block;width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
.list .list-wrap ul li .bean{color:#ff5152;}
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/49803.html
摘要:最近做一個循環(huán)滾動展示抽獎結(jié)果的功能,示例如下代碼抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆代碼代碼 最近做一個循環(huán)滾動展示抽獎結(jié)果的功能,示例如下showImg(https://segmentfault.com/img/bVtInA);html代碼 ...
摘要:最近做一個循環(huán)滾動展示抽獎結(jié)果的功能,示例如下代碼抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆抽中了顆云豆代碼代碼 最近做一個循環(huán)滾動展示抽獎結(jié)果的功能,示例如下showImg(https://segmentfault.com/img/bVtInA);html代碼 ...
摘要:無非就是獲取用戶輸入的獲取圖片信息組裝填充頁面數(shù)據(jù)瀑布流布局處理在頁面滾動時判斷最后一張圖片是否可見,如果是則重復(fù)以上內(nèi)容查看源碼 開始 做一個小項目,算是對js和jQuery的一次練習(xí)吧。 圖片資源來自這個網(wǎng)站(上面有很多高清圖片關(guān)鍵還是免費下載的):https://unsplash.com/ 項目具體效果可以點這里:https://bjw1234.github.io/ima......
摘要:大潮來襲前端開發(fā)能做些什么去年谷歌和火狐針對提出了的標準,顧名思義,即的體驗方式,我們可以戴著頭顯享受沉浸式的網(wǎng)頁,新的標準讓我們可以使用語言來開發(fā)。 VR 大潮來襲 --- 前端開發(fā)能做些什么 去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準,顧名思義,WebVR 即 web + VR 的體驗方式,我們可以戴著頭顯享受沉浸式的網(wǎng)頁,新的 API 標準讓我們可以使用 ...
摘要:寫在前面無限滾動又叫做無限下拉技術(shù)被廣泛應(yīng)用于新聞類,圖片預(yù)覽類網(wǎng)站。因此,繼列表組件之后,為提升用戶體驗,開發(fā)了無限滾動組件。屬性非必選項與模板對應(yīng),用來標識所采用的模板,默認取組件子節(jié)點中的模板。 寫在前面 無限滾動(又叫做無限下拉)技術(shù)被廣泛應(yīng)用于新聞類,圖片預(yù)覽類網(wǎng)站。對用戶來講,使用無限滾動的頁面有源源不斷的信息可以預(yù)覽,增加用戶在頁面的停留時長。技術(shù)上原理也很簡單,在頁面加...
閱讀 888·2021-10-13 09:39
閱讀 3541·2021-09-26 10:16
閱讀 2893·2019-08-30 15:54
閱讀 1053·2019-08-30 14:22
閱讀 2897·2019-08-29 15:39
閱讀 3266·2019-08-27 10:52
閱讀 819·2019-08-26 13:59
閱讀 1719·2019-08-26 12:20
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要