整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
lt;marquee></marquee>文字滑動
<marquee behavior="slide"></marquee>滑動
<marquee behavior="scroll"></marquee>預設卷動
<marquee behavior="alternate"></marquee>來回卷動
<marquee direction="down"></marquee>向下卷動
<marquee direction="up"</marquee>向上卷動
<marquee direction="right"></marquee>向右卷動
<marquee direction="left"></marquee>向左卷動
<marquee loop="2"></marquee>循環(huán)次數(shù), 默認值為：-1, 表示一直滾動下去。
<marquee width="180"></marquee>設定寬度
<marquee height="30"></marquee>設定高度
<marquee bgcolor="#FF0000"></marquee>設定背景顏色
<marquee scrollamount="30"></marquee>設定卷動距離(px)
<marquee scrolldelay="300"></marquee>設定卷動時間(毫秒)
<marquee hspace="100"></marquee> hspace 水平頁邊距
<marquee vspace="80"></marquee> vspace 垂直頁邊距
<marquee direction="left" behavior="scroll" width="300" height="400" bgcolor="#ff0" scrollAmount="50" scrollDelay="1000">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
<li>BOOTSTRAP</li>
</ul>
</marquee>以上整數(shù)涉及的單位是像素px
<marquee>
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<img src="images/08.jpg" />
<img src="images/09.jpg" />
</marquee>marquee常用到的兩個事件：
onmouseout="this.start()" 當鼠標移出該區(qū)域時
onbmouseover="this.stop()" 當鼠標移入該區(qū)域時
當我們用鼠標點擊滑塊時就可以拖拽，當滑塊左外邊距超過背景開關(guān)寬度的一半時，燈泡亮起；小于一半時，燈泡熄滅。當我們中途鼠標按鍵抬起時，如果滑塊左外邊距超過背景開關(guān)寬度的一半，那么滑塊最終居右；反之，滑塊最終居左。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關(guān)</title>
<style>
div{
/*border: 1px solid red;*/
width: 140px;
height: 40px;
margin: auto;
background: url("./img/switch.png");
}
</style>
</head>
<body>
<center>
<img src="img/off.gif" id="light">
</center>
<div>
<img src="img/button.png" id="slideBtn">
</div>
</body>
</html>鼠標移動多大的距離(moveX-startX)，那么滑塊也移動多大的距離，要想讓滑塊移動，最簡單的做法可以直接修改滑塊的margin-left樣式值。如圖所示：
<script>
window.onload=function () {
//獲取滑塊按鈕元素對象
var slideBtn = document.getElementById("slideBtn");
//獲取背景開關(guān)div的寬度
var mWidth = document.getElementById("switchBg").offsetWidth;
//獲取燈泡圖片元素
var light=document.getElementById("light");
//定義一個變量表示是否按下鼠標
var isDown=false;//默認沒有按下
var startX;//按下點X軸坐標
var marginLeft=0;//默認左外邊距是0
var flag=false;//默認燈泡沒有亮
//綁定鼠標按下事件
slideBtn.onmousedown=function () {
//表示已經(jīng)按下了
isDown=true;
//保存按下的點X坐標值
startX=event.screenX;
return false;
}
//綁定鼠標移動事件
slideBtn.onmousemove=function () {
if(isDown){//按下了之后才執(zhí)行拖拽操作
//獲取移動的坐標x
var moveX = event.screenX;
//計算查找，也就是移動的距離
var dx=moveX-startX;
startX=moveX;
//讓滑塊按鈕左外邊距移動dx像素
marginLeft+=dx;
//marginLeft不能大于mWidth/2，不能小于0
marginLeft=marginLeft>=mWidth/2?mWidth/2:marginLeft;
marginLeft=marginLeft<=0?0:marginLeft;
//設置滑塊按鈕的左外邊距
slideBtn.style.marginLeft=marginLeft+"px";
//如果左外邊距>mWidth/4 px，那么燈泡就亮
if(marginLeft>=mWidth/4 && !flag){
light.src="img/on.gif"
flag=!flag
}else if (marginLeft<=mWidth/4 && flag){
light.src="img/off.gif"
flag=!flag
}
}
return false;
}
//綁定鼠標按鍵抬起事件
slideBtn.onmouseup=function () {
//最終按鈕要復位，左外邊距<mWidth/4就回到最左邊，否則回到最右邊
slideBtn.style.marginLeft=(marginLeft>=mWidth/4)?mWidth/2+"px":"0px"
isDown=false;//鼠標按鍵抬起了
}
//鼠標移出事件
slideBtn.onmouseout=function () {
isDown=false;//鼠標按鍵抬起了,否則下次在移入到滑塊身上，isDown還是true，會導致我們沒有按下鼠標就能拖動滑塊
}
}
</script>
這是一個比較簡單的小動畫，當然我們不使用margin-left也能完成。比如使用定位，我們可以使用相對定位來個開關(guān)和背景布局，修改開關(guān)的left值也是一樣的。但是涉及到的事件依然是鼠標的按下、移動、抬起、移除事件。
輯導語：產(chǎn)品中我們經(jīng)常會遇到上下滑動的頁面，比如我們在進行預覽頁面時，需要上下滑動進行查看；本文作者分享了關(guān)于實現(xiàn)移動端頁面上下滑動效果的Axure教程，我們一起來了解一下。
案例展示：https://ctm29p.axshare.com/#id=1btojr
工具：Axure RP9
本文章會介紹2種實現(xiàn)頁面上下滑動效果的方法（學會這兩種方法就夠用了）。
這個方法重點是利用了“動態(tài)面板”的“滾動條”垂直滾動的功能是實現(xiàn)內(nèi)容上下滑動的效果。
設計思路如下：
如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個矩形（375*50），中間1個動態(tài)面板（375*567）。
1）填充滾動預覽的內(nèi)容：雙擊【動態(tài)面板】，進入state1，然后再里面那個框框里填東西，使勁填，至少要填超過動態(tài)面板的高度。
2）實現(xiàn)內(nèi)容滾動：關(guān)閉state1，然后選中【動態(tài)面板】右擊選中【滾動條】選擇【垂直滾動】。
或者如下圖操作：
點擊“預覽”，上下滑動的效果就實現(xiàn)了，so easy！但是你會發(fā)現(xiàn)中有一條滾動條在右邊好抓狂，影響美觀。
3）隱藏滾動條：我們可以用一個矩形這個滾動條給遮擋起來（魔高一尺道高一丈，(￣▽￣)／嘚瑟）如下圖：
點擊預覽，完美。
這個方法比方法一稍微難理解一丟丟，可以跟著下面的操作步驟一邊操作一邊理解額。
這個方法是在于對動態(tài)面板2的內(nèi)容會跟隨操作動態(tài)面板1的滾動而移動，并對滑動界限設置。
設計思路如下：
gif動態(tài)來源于：http://www.woshipm.com/rp/420885.html
一如既往先畫個模型，如下圖：基于（375*667）iPhone8的寬高，頂部和底部2個矩形（375*50），中間1個動態(tài)面板1（375*567），再在動態(tài)面板1的state1中添加一個動態(tài)面板2（375*567）。
1）在動態(tài)面板2的state1中填充內(nèi)容；使勁填充內(nèi)容，至少要填超過動態(tài)面板1的高度，完成后才能看到滑動效果。
2）拖動 動態(tài)面板1 時，動態(tài)面板2跟隨垂直拖動而移動；選中【動態(tài)面板1】點擊【新建交互】選中【拖動時】-【移動】目標選擇“動態(tài)面板2”，移動選擇“跟隨垂直拖動”點擊“完成”，如圖下設置：
3）拖動結(jié)束 動態(tài)面板1時，如果動態(tài)面板2未接觸到頂部矩形時，移動動態(tài)面板2開頭回到頂部。
4）拖動結(jié)束 動態(tài)面板1時，如果動態(tài)面板2未接觸到底部矩形時，移動動態(tài)面板2結(jié)尾回到底部；操作步驟和（3）基本一致。
點擊預覽，完美。
終于寫完了o(╥﹏╥)o，希望也能幫到有緣的你們額。
本文由 @人事匆匆 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
