点击按钮触发 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 等比例缩放。