整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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>循环次数, 默认值为：-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>以上整数涉及的单位是像素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()" 当鼠标移出该区域时
onbmouseover="this.stop()" 当鼠标移入该区域时
当我们用鼠标点击滑块时就可以拖拽，当滑块左外边距超过背景开关宽度的一半时，灯泡亮起；小于一半时，灯泡熄灭。当我们中途鼠标按键抬起时，如果滑块左外边距超过背景开关宽度的一半，那么滑块最终居右；反之，滑块最终居左。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</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");
//获取背景开关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 () {
//表示已经按下了
isDown=true;
//保存按下的点X坐标值
startX=event.screenX;
return false;
}
//绑定鼠标移动事件
slideBtn.onmousemove=function () {
if(isDown){//按下了之后才执行拖拽操作
//获取移动的坐标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也能完成。比如使用定位，我们可以使用相对定位来个开关和背景布局，修改开关的left值也是一样的。但是涉及到的事件依然是鼠标的按下、移动、抬起、移除事件。
辑导语：产品中我们经常会遇到上下滑动的页面，比如我们在进行预览页面时，需要上下滑动进行查看；本文作者分享了关于实现移动端页面上下滑动效果的Axure教程，我们一起来了解一下。
案例展示：https://ctm29p.axshare.com/#id=1btojr
工具：Axure RP9
本文章会介绍2种实现页面上下滑动效果的方法（学会这两种方法就够用了）。
这个方法重点是利用了“动态面板”的“滚动条”垂直滚动的功能是实现内容上下滑动的效果。
设计思路如下：
如下图：基于（375*667）iPhone8的宽高，顶部和底部2个矩形（375*50），中间1个动态面板（375*567）。
1）填充滚动预览的内容：双击【动态面板】，进入state1，然后再里面那个框框里填东西，使劲填，至少要填超过动态面板的高度。
2）实现内容滚动：关闭state1，然后选中【动态面板】右击选中【滚动条】选择【垂直滚动】。
或者如下图操作：
点击“预览”，上下滑动的效果就实现了，so easy！但是你会发现中有一条滚动条在右边好抓狂，影响美观。
3）隐藏滚动条：我们可以用一个矩形这个滚动条给遮挡起来（魔高一尺道高一丈，(￣▽￣)／嘚瑟）如下图：
点击预览，完美。
这个方法比方法一稍微难理解一丢丢，可以跟着下面的操作步骤一边操作一边理解额。
这个方法是在于对动态面板2的内容会跟随操作动态面板1的滚动而移动，并对滑动界限设置。
设计思路如下：
gif动态来源于：http://www.woshipm.com/rp/420885.html
一如既往先画个模型，如下图：基于（375*667）iPhone8的宽高，顶部和底部2个矩形（375*50），中间1个动态面板1（375*567），再在动态面板1的state1中添加一个动态面板2（375*567）。
1）在动态面板2的state1中填充内容；使劲填充内容，至少要填超过动态面板1的高度，完成后才能看到滑动效果。
2）拖动 动态面板1 时，动态面板2跟随垂直拖动而移动；选中【动态面板1】点击【新建交互】选中【拖动时】-【移动】目标选择“动态面板2”，移动选择“跟随垂直拖动”点击“完成”，如图下设置：
3）拖动结束 动态面板1时，如果动态面板2未接触到顶部矩形时，移动动态面板2开头回到顶部。
4）拖动结束 动态面板1时，如果动态面板2未接触到底部矩形时，移动动态面板2结尾回到底部；操作步骤和（3）基本一致。
点击预览，完美。
终于写完了o(╥﹏╥)o，希望也能帮到有缘的你们额。
本文由 @人事匆匆 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
*请认真填写需求信息，我们会在24小时内与您取得联系。
