整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
用css3寫(xiě)了個(gè)滾動(dòng)特效，可以向左滾動(dòng)、向右滾動(dòng)，方向自由控制，沒(méi)用JavaScript或者jQuery純css3寫(xiě)的，鼠標(biāo)懸停在上面時(shí)可以終止動(dòng)畫(huà)，純css3滾動(dòng)特效和JavaScript或者jQuery寫(xiě)的效果一樣。熟悉css3的animation動(dòng)畫(huà)屬性一下就很好理解原理，具體的請(qǐng)看效果和代碼吧！點(diǎn)擊我看演示（地址：http://tangjiusheng.com/e/demo/css3-rolled）
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta name="baidu-site-verification" content="ZP6BgXCtjB" />
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta name="applicable-device" content="pc">
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>純css3滾動(dòng)特效代碼</title>
<style type="text/css">
.rolled{
position:fixed;bottom:20%;z-index:9999999;
-webkit-animation:rolled 50s .2s ease both infinite;
-moz-animation:rolled 50s .2s ease both infinite;
-o-animation:rolled 50s .2s ease both infinite;
-ms-animation:rolled 50s .2s ease both infinite;
}
.rolled:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
-ms-animation-play-state:paused;
}
/*滾動(dòng)動(dòng)畫(huà)*/
@-webkit-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@-moz-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@-o-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@-ms-keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
@keyframes rolled{
0%{right:-14%;}
50%{right:36%;}
80%{right:66%;}
100%{right:100%;}
}
</style>
</head>
<body>
<!--向左重復(fù)滾動(dòng)動(dòng)畫(huà)-->
<div class="rolled">
<a href="#"><img src="images/rolled.png"></a>
</div>
</body>
</html>
除注明外的文章,均為來(lái)源:湯久生博客,轉(zhuǎn)載請(qǐng)保留本文地址！
原文地址：http://tangjiusheng.com/css3/101.html
tml頁(yè)面設(shè)置動(dòng)態(tài)金額滾動(dòng)效果！
一開(kāi)始加載頁(yè)面，數(shù)字都會(huì)過(guò)渡滾動(dòng)到具體數(shù)字上！
代碼：
html:
css:
js:
者 | 大澈
大家好，我是大澈！
又是好久沒(méi)更文了，前陣子駕著新車回了趟老家，很“幸運(yùn)”的經(jīng)歷了平原縣地震的余波。
回想當(dāng)時(shí)，半夜凌晨，房屋晃動(dòng)，如同身處過(guò)山車，一切都很不真實(shí)。雖然震感時(shí)間很短暫，但是現(xiàn)在依舊讓我記憶猶新，人類在大自然面前真的是太渺小了，很多時(shí)候真的是力不從心。
所以，真心想和大家說(shuō)一句，生活不易，及時(shí)行樂(lè)，珍惜身邊人，且行且珍惜。
ONE
需求分析，問(wèn)題描述
一、需求
一個(gè)可以滾動(dòng)的菜單，為它添加一個(gè)可以下拉滾動(dòng)的提示。要求滾動(dòng)到菜單最底部時(shí)，隱藏下拉滾動(dòng)的提示，否則讓其一直顯示。
二、問(wèn)題
1、如何實(shí)現(xiàn)滾動(dòng)條效果？
2、如何判斷是否滾動(dòng)到底部？
TWO
解決問(wèn)題，答案速覽
實(shí)現(xiàn)代碼如下，復(fù)制粘貼即可直接使用。
代碼中滾動(dòng)條的實(shí)現(xiàn)使用了element的el-scrollbar組件。組件中包裹的第一個(gè)div，指的是需要滾動(dòng)的視圖。組件中包裹的第二個(gè)div，指的是下拉滾動(dòng)提示的圖標(biāo)，這里根據(jù)需求進(jìn)行設(shè)置，可以更換靜態(tài)的或者那種閃爍跳躍的動(dòng)態(tài)提示圖標(biāo)。
// 1、模版
<el-scrollbar max-height="calc(100vh - 84px)" @scroll="handleScroll" ref="myScrollbar">
<div class="sideBarIn"></div>
<div class="pcSign pcIcon" v-if="isShowIcon">
<img class="iconImg" src="../assets/images/common/xiaGery.png"></div>
</el-scrollbar>
// 2、邏輯
// 滾動(dòng)條事件
const handleScroll=(val)=> {
// 防止Scrollbar實(shí)例為空
if (!myScrollbar.value) {
return
}
// 判斷是否滾動(dòng)到底部
let isScrollToEnd=Number(myScrollbar.value.wrapRef.scrollTop.toFixed(0))
+ Number(myScrollbar.value.wrapRef.clientHeight.toFixed(0))===Number(myScrollbar.value.wrapRef.scrollHeight.toFixed(0));
if (isScrollToEnd) {
// 滾動(dòng)到底部的處理邏輯
isShowIcon.value=false
} else {
// 非滾動(dòng)到底部的處理邏輯
isShowIcon.value=true
}
}
// 3、樣式
.pcIcon {
width:100%;
height: 100px;
position: absolute;
bottom: -4px;
left: 0;
text-align: center;
line-height: 130px;
background: linear-gradient(to bottom, rgba(234, 234, 234, 0.5), rgba(234, 234, 234, 1));
.iconImg {
width: 20px;
height: 20px;
}
}
.pcSign{
display: block;
}THREE
問(wèn)題解析，知識(shí)總結(jié)
一、如何實(shí)現(xiàn)滾動(dòng)條效果？
實(shí)現(xiàn)滾動(dòng)條效果有兩種實(shí)現(xiàn)方式：利用css的overflow: scroll屬性、利用element的el-scrollbar組件。
1、overflow: scroll屬性
在div元素上添加 overflow-y: scroll; css屬性，就能顯示出一個(gè)滾動(dòng)條，如果不指定是x或y軸，則水平和垂直都會(huì)出現(xiàn)滾動(dòng)條。
當(dāng)然，前提是你需要指定div元素的高度或者最大高度。
2、el-scrollbar組件
一般在vue項(xiàng)目中，我們可直接使用element的el-scrollbar組件，因?yàn)楣俜綖槲覀兲峁┝嗽S多API，以及各種適配優(yōu)化。
el-scrollbar組件的屬性如下：
el-scrollbar組件的事件如下：
el-scrollbar組件的實(shí)例屬性如下：
二、如何判斷是否滾動(dòng)到底部？
這里判斷是否滾動(dòng)到底部的關(guān)鍵在于scrollTop+clientHeight是否等于scrollHeight的值。只有當(dāng)滾動(dòng)的距離+可視區(qū)域的高度，與scrollHeight相等時(shí)，才證明滾動(dòng)條滾動(dòng)到了底部。
同樣的，如果scrollHeight與可視區(qū)域的高度直接就相等時(shí)，又說(shuō)明元素不可以滾動(dòng)，也就沒(méi)有滾動(dòng)條。這一點(diǎn)在有此需求時(shí)，可以進(jìn)行實(shí)用。
元素的幾個(gè)寬高屬性釋義如下：
- END -
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
