01-前端基础知识点（iframe、marquee）

最新推荐文章于 2024-08-05 22:43:05 发布

快秃头的老阿姨

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量93

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2201_75866478/article/details/132360969

版权

iframe

iframe作用：

嵌入其他网页：通过指定 src 属性，可以将其他网页嵌入到当前页面中。
显示多个来源：可以在一个页面中同时显示来自不同源的内容。
分割页面：可以将一个页面分割成多个区域，每个区域显示不同的内容。

Example：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe</title>
    <style>
        body {
            text-align: center;
        }

        iframe {
            width: 1000px;
            height: 500px;
        }
    </style>
</head>

<body>
        <iframe src="http://www.bilibili.com" frameborder="0" title="bilibili"></iframe>
</body>

</html>

运行结果

iframe优点:

1. 页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用

2. 可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息

3. 重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度.

4. iframe可以解决第三方内容加载缓慢的问题.

iframe缺点:

1. 会产生很多页面，不容易管理

2. iframe框架的内容无法被搜索引擎捕获, 所以iframe不适用于首页

3. iframe兼容性较差

4. iframe有一定的安全风险

5. iframe会阻塞主页面的Onload事件

iframe阻塞window.onload_iframe window.onload_小爱丨同学的博客-CSDN博客

marquee

marquee(已弃用）：不在推荐使用该特性。虽然有的浏览器任然支持它，但是它不是必须的，也许已经从相关的web标准中移除，也许已经移除或出于兼容性任然保留，所以请尽量不要使用该特性，并且更新现有的代码。

属性：

behavior：设置文本如何滚动。属性值有3种：
scroll - 循环滚动。默认值。
slide - 滚动一次。
alternate - 两端来回滚动。

direction：设置文本滚动的方向。属性值有4种：
left - 从右向左。默认值。
right - 从左向右。
Example - 向上。
down - 向下。

loop：设置滚动的次数。默认值-1，无限次循环。

scrollamount：设置每次滚动时移动的长度（以像素为单位），也就是滚动速度。默认值为6 。
值越大，滚动速度越快，一般5-10比较适合查看消息。

scrolldelay：设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。
值越大，滚动速度越慢，通常不设置。
注意：除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。

truespeed：默认情况下，会忽略小于60的scrolldelay值。如果存在truespeed，那些值不会被忽略。
bgcolor：通过颜色名称或十六进制值设置背景颜色。
vspace：以像素或百分比值设置垂直边距。
width：以像素或百分比值设置宽度。
height：以像素或百分比值设置高度。
hspace：设置水平边距

Example：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <marquee behavior="slide" direction="left">白云千载空悠悠</marquee>
    <marquee behavior="slide" direction="left" loop="-1" scrollamount="4">孤帆远影碧空尽，唯见长江天际流</marquee>
    <marquee behavior="slide" direction="right">抬头望明月，低头思故乡</marquee>
    <marquee behavior="slide" direction="right" loop="3">芳草萋萋鹦鹉洲</marquee>
</body>

</html>

实现鼠标悬停文字即停效果

onmouseover="this.stop();"

实现鼠标离开即走效果

onmouseout="this.start();"

一般两个要结合使用：

<marquee onmouseover="this.stop();" onmouseout="this.start();">
        555555555555555
</marquee>

事件回调

onbounce：当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。
onfinish：当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。
onstart：当 marquee 开始滚动时触发。

<marquee behavior="alternate" loop="2" onstart="alert(99)" onbounce="MaqueeBounceFun();"
        onfinish="finishMaqueeFun();">
        系统通知：1.xxxxxx; 2.xxxxxxx.
    </marquee>
    <script type="text/javascript">
        function MaqueeBounceFun() {
            alert("我滚到结尾啦！");
        }
        function finishMaqueeFun() {
            alert("滚动结束啦，可以休息啦！");
        }
        function startMaqueeFun() {
            alert("我要开始滚动了哦，眼睛不要眨哦！");
        }
    </script>

快秃头的老阿姨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
01-前端基础知识点（iframe、marquee）

不在推荐使用该特性。虽然有的浏览器任然支持它，但是它不是必须的，也许已经从相关的web标准中移除，也许已经移除或出于兼容性任然保留，所以请尽量不要使用该特性，并且更新现有的代码。：当 marquee 完成 loop 属性设置的值时触发。2. 可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息。注意：除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。：设置每次滚动时移动的长度（以像素为单位），也就是滚动速度。：设置文本滚动的方向。
复制链接

扫一扫