Javascript全屏模式的切换

务8：全屏模式的切换。

这张就是第八，第八小姐就是讲关于全屏模式的切换。回到页面，希望有个按钮，一点全屏娱乐模式，这一点就切换回来。可能我个人不太喜欢这种模式，但有的人会用，还是把它设计进去。

然后就在这个地方加一个图标，有空再找一下。找了一个图标，就找这个。jump through screen one，这有了吗？有了，还挺好。然后就稍小了一点，再给它大一点，size，就不要说是二十，可以。点它，现在没效果，来做这个效果。

首先给它定一个变量叫is war screen，是不是全屏的？它肯定是响应数据了，i e f，它不是默认，当然响应数据这边可以给它添类型，比如它是birch，填birch。如果它不是，还找一个相对的，跟它相反的按钮，收回来的按钮，就用这个。

off for screen one，就这个，给它来复制一下，把它放松，就是衣服regan in the first three，如果它真的，就显示上面的，否则就显示下面的。来看一下，这边有一个方法，就这样可以，可能还做其他的，记得就给它定一个top切换螺丝功能，它是一个，然后再调整这个方法就行了。

就要投screen，点，没效果，为啥没效果？是不是点错了？这边点这上面，再说下面一个，放到枪上，点，看有切换效果了。怎么样给它切换？这个是节食里面固定的方法，如果它的值，直接给它切换，就是document，the element，点a request，press greet plug，就是全屏切换。

这里切换了，这点没效果只按a xe，所以这边也不对，所以希望它变成这个时候就把它缩回来，这边就要做一个判断了，就是来判断它是不是已经缩放了，如果它已经是展开了，就把它缩回来，也是，这个就退出，否则就把它删远，就简单的删远，删除就可以了。

试一下，点，点，回来了，点，点，再配合原来的一点，就全屏显示了，舒服了，点回来。这一章就讲完了，就把页面布局都弄好了，包括动态生成菜单页，浏览历史页，面包穴导航，把整个布局就全做好了。

下一张开始做具体业务了，首先叫做用户的登录，注册新用户，还有一个重置密码。这节课就讲到这里，拜拜。

了点时间写的，蛮长时间了。个人很喜欢，一段很简单的代码，却能够实现很多功能。（因为代码文字呈现没有格式，难以阅读，以后小编提供的代码都以截图方式呈现，底部有源码链接）。

到底多简单，先来看代码

基于jQuery

基于jQuery

拖拽实例图：

拖拽实例图

将代码剥离，只要写5行就可以实现拖拽了，是不是很简单：

调用方式

放大、缩小

我们给拖拽增加点功能，支持放大、缩小，先看实例图:

放大、缩小

将代码剥离，原先的代码保留不变，增加一个绑定事件：

放大、缩小

这样来实现放大、缩小、拖拽是不是很简单，还能实现很多其他效果，大家慢慢领悟。

原理分析：

放大、缩小、拖拽都离不开在网页上拖动鼠标，对于前端来说就是 document 的 mousemove，当鼠标在网页上移动的时候，无时无刻不在触发 mousemove 事件，当鼠标触发事件时，什么时候需要执行我们特定的操作，这就是我们要做的了。我在 mousemove 中增加了几个对象来判定是否进行操作：

move：是否执行触发操作
move_target：操作的元素对象
move_target.posix：操作对象的坐标
call_down：mousemove的时候的回调函数，传回来的this指向document
call_up：当鼠标弹起的时候执行的回调函数，传回来的this指向document

小提示：

简单的操作，只需要设定 move_target 对象，设置 move_target 的时候不要忘记了 move_target.posix 哦；
复杂的操作可以通过call_down、call_up进行回调操作，这个时候是可以不用设置 move_target 对象的

深入研究

拖拽和放大、缩小实现了，但是有个问题，当我们鼠标点击并滑动的时候，是会选中文本的，为了避免这个问题，大家可以自行百度

css 阻止文本选中

css 阻止文本选中

网页的放大、缩小、拖拽事件就研究到这里了，小编不再对如何拓展进行深入讲解，一切靠大家自行研究，权当课后作业了。～～

源码链接地址：

http://orzcss.com/posts/d554a392/

本文内容均属个人原创作品，转载此文章须附上出处及原文链接。

加关注，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

在越来越多用到HTML5,用HTML做的页面很炫，有些功能也很容易实现了。比如HTML5实现视频音频播放。

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML5的新特性:

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

视频格式

当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

实例源码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

</video>

</div>

var myVideo=document.getElementById("video1");

//播放暂停

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

//视频放大

function makeBig()

{

myVideo.width=560;

}

//视频中等

function makeSmall()

{

myVideo.width=320;

}

//视频缩小

function makeNormal()

{

myVideo.width=420;

}

</script>

</body>

</html>

实现的效果：

PS:注意一下那个src地址：一定得是在项目里，如果是电脑里的绝对路径是不行的。

新手上路，希望大家多多支持，多多关注，希望能够在头条的路上越走越远。

在线咨询

上一篇：面试官：windows服务器如何实现数据文件备份到另外一台服务器？
下一篇：怎么把一篇文章制作成一个二维码？

您的项目需求

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

整合营销服务商