HTML 文字滑动(marquee)

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()" 当鼠标移入该区域时

.动画效果描述

当我们用鼠标点击滑块时就可以拖拽，当滑块左外边距超过背景开关宽度的一半时，灯泡亮起；小于一半时，灯泡熄灭。当我们中途鼠标按键抬起时，如果滑块左外边距超过背景开关宽度的一半，那么滑块最终居右；反之，滑块最终居左。

2. html代码准备

<!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>

3. 拖拽分析

鼠标移动多大的距离(moveX-startX)，那么滑块也移动多大的距离，要想让滑块移动，最简单的做法可以直接修改滑块的margin-left样式值。如图所示：

4. JavaScript代码实现动画

<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>

5. 总结：

这是一个比较简单的小动画，当然我们不使用margin-left也能完成。比如使用定位，我们可以使用相对定位来个开关和背景布局，修改开关的left值也是一样的。但是涉及到的事件依然是鼠标的按下、移动、抬起、移除事件。

用JavaScript实现页面滑动到指定位置加载动画。

若页面滚动到class名为group-pic的元素的位置时开始加载

$(document).ready(function(){
var a,b,c;
a = $(window).height(); //浏览器窗口高度
var group = $(".group-pic");
$(window).scroll(function(){
b = $(this).scrollTop(); //页面滚动的高度
c = group.offset().top; //元素距离文档（document）顶部的高度
if(a+b>c){
...
}else{
...
}
});
});

原理： 1.获取浏览器窗口的高度；

2.获取页面滚动的高度；

3.获取页面距离文档（document）顶部的高度

offset().top具体指的是距哪里的高度呢？

一些获宽高度的属性：

网页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;

网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

1.offsetTop : 当前对象到其上级层顶部的距离.

不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft : 当前对象到其上级层左边的距离.

不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth : 当前对象的宽度.

与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

在线咨询

上一篇：HTML <legend> 标签
下一篇：JavaScript浏览器对象

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。