JS控制DIV全屏化问题

小飛不想飛 2012-11-19 01:57:04

我现在的页面有一个DIV，DIV里面有张图片，这个图片是从数据库读取的，然后图片上面有很多小的红点（就是很多坐标），这些坐标也是从数据库读取的，我现在有一个按钮，想实现点击按钮让这个DIV全屏化，里面的数据不会变动。求大神解惑！！！

...全文

720 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

p2227 2012-11-20

打赏
举报

引用 2 楼 xp447196763 的回复:

引用 1 楼 p2227 的回复:你的“全屏化”是指什么，平铺？拉伸？还是只把边框变大就像你全屏看视频那样

那是要有算法的，用JS实现这个算法就省省吧……

叫我三三 2012-11-20

打赏
举报

别停LS的各位胡说，全屏的只需掉用F11快捷键就可以了，目前主流浏览器支持F11全屏

Go 旅城通票 2012-11-19

打赏
举报

全屏显示不行，除非用flash实现，js实现不了，不用弄了，鉴定完毕。。

fwwdn 2012-11-19

打赏
举报

嗯，HTML5的fullscreen可以实现，但要浏览器支持.......

吉普赛的歌社区高级成员 T9 2012-11-19

打赏
举报

引用 8 楼 xp447196763 的回复:

引用 7 楼 huangminyanghe 的回复:图片大小不需要变，或者说居中就可以吧！div全屏可以这样子，简单的办法是，增加一个class，前提这个class加上之后的优先级要高于别的。样式{position:fixed,width:100%},height一般通过js获取屏幕显示区域的高度($(window).height(),需要考虑div的margin) 为…… 为什么要增加一个class,我直接调整这个DIV的样式不行吗？还有你说的class的优先级怎么调？

楼主：８楼说的，其实跟我的差不多，　也只是能占浏览器所在页面的宽度100%。想要全屏，没门！你要想全屏呀，哥告诉你个办法，不过你得请哥呷饭。

找一个比较精通flash的人，这个flash可以全屏，视频播放器一般也就是flash做的。然后这个falsh可以传参数（图片地址），行了吧！

小飛不想飛 2012-11-19

打赏
举报

引用 7 楼 huangminyanghe 的回复:

图片大小不需要变，或者说居中就可以吧！div全屏可以这样子，简单的办法是，增加一个class，前提这个class加上之后的优先级要高于别的。样式{position:fixed,width:100%},height一般通过js获取屏幕显示区域的高度($(window).height(),需要考虑div的margin)

为什么要增加一个class,我直接调整这个DIV的样式不行吗？还有你说的class的优先级怎么调？

huangminyanghe 2012-11-19

打赏
举报

图片大小不需要变，或者说居中就可以吧！div全屏可以这样子，简单的办法是，增加一个class，前提这个class加上之后的优先级要高于别的。样式{position:fixed,width:100%},height一般通过js获取屏幕显示区域的高度($(window).height(),需要考虑div的margin)

001007009 2012-11-19

打赏
举报

html、js、css、是在浏览器上运行的（暂不说nodejs），浏览器没这功能就不行，如果有这功能，也需要为js提供接口，很显然，现在不能实现这个功能

小飛不想飛 2012-11-19

打赏
举报

引用 3 楼 calmcrime 的回复:

既然是图片，直接更改img的width height 不行？

引用 4 楼 yenange 的回复:

JavaScript code?123456789101112131415161718192021222324252627<!DOCTYPE html><html><head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" ty……

你们这样不管设多高，图片总是在浏览器里面，我想要像看视频点击全屏那样的效果，让DIV把整个屏幕占满。

吉普赛的歌社区高级成员 T9 2012-11-19

打赏
举报

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        function scale(obj){
            if($(obj).attr("max")==0){
                $(obj).attr("max","1");
                $("#div1").css("width","100%");
                $("#img1").width($("#div1").width()-15);
            }else{
                $(obj).attr("max","0");
                $("#div1").css("width","110px");
                $("#img1").width($("#div1").width()-15);
            }
        }
    </script>
</head>
<body>
<input type="button" onclick="scale(this)" max="0" value="缩放" />
<div id="div1" style="border:solid 1px red;width:110px;" >
    <img id="img1" alt="" src="http://avatar.profile.csdn.net/8/A/4/1_wbb123yu.jpg" />
</div>

</body>
</html>

001007009 2012-11-19