JS 实现全屏效果

JavaScript029

JS 实现全屏效果,第1张

点击按钮触发 requestFullscreen() 函数打开全屏

点击按钮触发 exitFullScreen() 函数关闭全屏

如果需要监听全屏状态变换,可以监听 fullscreenchange 时间

https://github.com/gywgithub/vue-d3-examples

https://github.com/gywgithub/vue-d3-examples/blob/master/src/views/Examples.vue#L263

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide

<div id="img" style="position:absolute">

<a href="#" target="_blank">

<img src="test.gif" >

</a>

</div>

<SCRIPT LANGUAGE="JavaScript1.2">

<!-- Begin

var xPos = 20

var yPos = document.body.clientHeight

var step = 1

var delay = 30

var height = 0

var Hoffset = 0

var Woffset = 0

var yon = 0

var xon = 0

var pause = true

var interval

img.style.top = yPos

function changePos() {

width = document.body.clientWidth

height = document.body.clientHeight

Hoffset = img.offsetHeight

Woffset = img.offsetWidth

img.style.left = xPos + document.body.scrollLeft

img.style.top = yPos + document.body.scrollTop

if (yon) {

yPos = yPos + step

}

else {

yPos = yPos - step

}

if (yPos <0) {

yon = 1

yPos = 0

}

if (yPos >= (height - Hoffset)) {

yon = 0

yPos = (height - Hoffset)

}

if (xon) {

xPos = xPos + step

}

else {

xPos = xPos - step

}

if (xPos <0) {

xon = 1

xPos = 0

}

if (xPos >= (width - Woffset)) {

xon = 0

xPos = (width - Woffset)

}

}

function start() {

img.visibility = "visible"

interval = setInterval(�0�7changePos()�0�7, delay)

}

start()

// End -- >

</script >

设置图片自适应。

首先设置一个div 用来装 img ,div 的宽 为图片的宽,一般使用百分百就可以了,例如

width:100%不要设置高度,让图片自动撑开高度。

然后设置 img 的 width:100%display:block将标签 img 设置为块级元素。

这样不管 div 的宽为多大,图片都是根据 div 等比例缩放。