分类 Web 下的文章

iframe 和 frame 的区别

1、frame 不能脱离 frameSet 单独使用,iframe 可以

2、frame 不能放在 body 中,否则不能正常显示

 frame 不能和 body 同时使用 iframe 可以和 body 同时使用

3、嵌套在frameSet中的iframe必需放在body中,不嵌套在frameSet中的iframe可以随意使用

4、frame的高度只能通过frameSet控制;iframe可以自己控制,不能通过frameSet控制

区别:
frame是整个页面的框架,iframe是内嵌的网页元素,也可以说是内嵌的框架,可以用它将一个HTML文档嵌入在另一个HTML中显示。最大区别是网页中嵌入 iframe 包含的内容与整个页面是一个整体,而 frame 包含的内容是独立的个体,是可以独立显示的。

另外,iframe 还可以在页面中多次显示同一内容,而不必重复这段内容的代码。

5、 iframe 可以放到表格里面。frame 则不行。

    <table> 
       <tr> 
        <td><iframe id="" src=""></iframe></td><td></td> 
       </tr> 
    </table> 

6、iframe 是活动帧, 而 frame 是非活动帧

iframe 用起来更灵活,不需要frame那么多讲究,而且放的位置也可以自己设。

iframe 是内嵌的,比较灵活,不过也有不好的地方,就是位置在不同的浏览器和分辨率下有可能不同,有时会把本来好好的页面搞得变形。

iframe 是一个网页中的子框架,两网页间是父子关系,

iframe 是一个浮动的框架,就是在你的页面里再加上一个页面。

frame 用来把页面横着或竖着切开,iframe 用来在页面中插入一个矩形的小窗口。

frame 是把网页分成多个页面的页面。它要有一个框架集页面 frameset。

转自: <iframe><frame> 区别 - ~永无止境~ - cnblogs

jquery 动态创建 form 并提交

有这样特别的需求,不需要使用 ajax,页面上也不存在这样的 form 表单,最好的方式就是通过 js 或者 jQuery 进行动态创建。

找到如下样例:

$(document).ready(function(){
    $("a.delete").click(function(event){
        action = this.getAttribute("action")
        form = $("<form></form>")
        form.attr('action',action)
        form.attr('method','post')
        input1 = $("<input type='hidden' name='input1' />")
        input1.attr('value','input1 value')
        input2 = $("<input type='text' name='textinput' value='text input' />")
        form.append(input1)
        form.append(input2)
        form.appendTo("body")
        form.css('display','none')
        form.submit()
    })
})

jquery $().each和$.each() 遍历

$().each

$().each 在 dom 处理上面用的较多。如果页面有多个 inpu 标签类型为 checkbox,对于这时用 $().each 来处理多个
checkbook,例如:

$("input[name='ch]").each(function(i){
    if($(this).attr("checked")==true)
    {
    //一些操作代码
    }
}
//回调函数是可以传递参数,i就为遍历的索引。

$.each()

遍历一个数组通常用$.each()来处理 例如:

$.each([{name:"JasonLi",email:"1207543053@qq.com"},{name:"hehe",email:"jasonli@seasidecrab,com"}],function(i,n)
{
    alert("索引:"+i+"对应值为:"+n.name);
});
//参数i为遍历索引值,n为当前的遍历对象.

实现原理

其实jQuery里的each方法是通过js里的call方法来实现的。

call 调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针

经典案例:

function add(a,b){
alert(a+b);}

function sub(a,b){
alert(a-b);}

add.call(sub,3,1);

jQuery each 源码

each: function( obj, callback ) {
        var length, i = 0;

        if ( isArrayLike( obj ) ) {
            length = obj.length;
            for ( ; i < length; i++ ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        }

        return obj;
    }

CSS实现图标闪烁效果【转】

不多说,直接上代码:

.outDiv{
  width:30px;
  height:30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outDiv .blingbling{
    border: 6px solid #73BF00;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    -webkit-animation: scaleout 2.5s infinite ease-in-out;
    animation: scaleout 2.5s infinite ease-in-out;
  }
  @-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(1.0) }
    100% {
      -webkit-transform: scale(1.1);
      opacity: 0;
    }
  }
  @keyframes scaleout {
    0% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    } 100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        opacity: 0;
      }
  }

只要把这个样式加到你的图标或<div>上,就有效果啦~

例如:

<div class="outDiv">
        <img src="../img/xinhao.png" />
        <div class="blingbling"></div>
      </div>

其中1.3s是闪烁的频率,宽高自己调整。

转自:: CSS实现图标闪烁效果 - 宁晓 - CSDN

web 视频画中画的探索 —— 【我在加班写前端】

前言

首页上要加一个公司介绍的视频,一开始打算采用将视频上传到优酷,然后获取地址,用 iframe 进行播放(可以直接在视频下方分享处获取到相关的 iframe 代码)。后来采取的方式是将视频放到阿里云的云存储 OSS 上,拿到视频地址,然后直接 h5 video 标签播放。

不得不说,付费的就是强,视频预加载后很快就能播放。相比之前的,直接播放放在自家服务器上的视频(小视频要等一会儿,大视频基本没戏),要顺畅好多。

<video src="https://lejiao1688.oss-cn-hangzhou.aliyuncs.com/xx.mp4" controls="controls" autoplay="autoplay" loop="loop" width="380" poster="images/video_poster.jpg">
    您的浏览器不支持 video 标签。
</video>

video 几个基本属性介绍一下:

  • controls
  • autoplay
  • loop
  • poster

controls 决定是否展示播放的按钮,autoplay 决定是否在加载后之后自动播放,loop 是否自动循环播放,poster 存放的是未播放时的视频海报,默认取视频第一帧作为海报。

问题

因为视频是固定在首页的靠上的部分,如果在播放过程中上划页面,那么视频就看不到了。想要实现的效果跟很多视频网站一样,播放页上划后,视频进入画中画模式,在桌面(注意,不是浏览器视口内部)右下角会出现一个新的播放页面。

- 阅读剩余部分 -

CSS适配多分辨率的情况 —— 【我在加班写前端】

前言

最近公司前端一直空缺,但项目还是得继续推进,没办法,我被顶包做了两天前端的工作。

可能在前端的心里,写页面比较简单,但对于我这一个半吊子的前端来说,是有些难点的。

碰到了非普通盒子布局的页面,就是内容溢出了盒子。还有菱形方块布局。这些都是之前没有想过的。

也接触了 flex 布局,以及 box-sizing 属性。菱形方块元素布局主要是通过 translate 实现。

这些以后再说,这次先聊多分辨率适配的问题。

问题

碰到一个按钮组相对于 banner 进行定位的情况,就是按钮得在 banner 内容的某一块上,不能覆盖内容或者离开特定的区域。

按钮组本身是我自己合的,要实现类似 switch 的效果的两个按钮组成的按钮组。实际效果如下:

微信图片_20190524184449.png

这个按钮组合我是这样搞的:父级相对定位,左边短按钮,右边长按钮。两个按钮绝对定位,调整连个按钮重合在一起,左边按钮文字居中,右侧靠右然后通过调整内距实现右侧按钮居中效果。并且如果左侧按钮被覆盖,可以设置 z-index 使其上浮展示。

按钮得在 banner 图上,且在图上文字的正下面,通过调整按钮组合的 topleft 实现。但是因为 banner 宽度设成了 100%,这样高度就会随着视口的宽度变化和变化。那么按钮组合的位置也会变动,甚至从 banner 区域消失。

解决方案

通过 media screen 匹配不同的宽度区间,分别设置样式。

看到之前的小伙伴已经做了两组适配

@media only screen and (min-width: 1600px) {
...
}

@media screen and (width:1920px){
...
}

之前在 bootstrap 源码中又看到类似的代码,主要功能是解决不通屏幕的适配问题的。大概意思也能看得懂,上面是屏幕宽度最小 1600px,下面是屏幕宽度等于 1920px。因为放在正常样式下面,所以如果条件符合,就能够覆盖基本样式,实现动态适配的效果。

因为按钮组合比较大,所以屏幕宽度的区间要设置的多一些,如 (min-width: 1920px)(min-width:1600px) and (max-width:1920px)。虽然在几个主要的区间里显示还好,但是随着视口宽度的变化,效果还是不够理想。主要因为没有设置按钮,按钮一直保持那么大,分辨率较低的情况下,很容易溢出或覆盖文字。

但总体效果还是实现了的,先这样吧,之后有更好的方案再替换。