有个客户要求用swf文件做页面背景,但是弄上去之后发现swf文件的宽度高度自适应这块很不好控制,如果直接设置宽度和高度为100%是不起作用的。
折腾了一番最后终于解决,分享下解决办法。
首先将swf文件调用放到一个div包裹起来,代码大概是这样:
<div class="swf-box"><embed id="movie" src="swf文件地址" wmode="transparent" width="100%" height="100%"></div>
然后设置外部div的宽度为100%;高度也是100%;position: absolute;上左距离为0;z-index的值设置小一点,然后页面正文内容部分的z-index设置大一点,这样将这个div设置成了一个背景。
再来解决swf文件的自适应宽高度问题,首先要确定你的swf默认宽高度是多少,然后算一个宽高度比例。例如宽度是1000px,高度是500px,那么宽高比就是50%。
得到这个比例后,写以下js代码:
<script type="text/javascript">document.getElementById("movie").style.height = document.getElementById("movie").scrollWidth*0.5+"px"</script>
用js强行给swf文件设置一个高度,这个高度就是宽度的50%。这样就完成了swf文件宽高度自适应了。
ps:现在很多浏览器都默认关闭了flash插件。所以用swf文件做背景天兴工作室是不太推荐的。
相关推荐
- 支付宝支付后异步通知页面提示”支付签名校验失败,请联系管理员!“的原因和解决方法05-08
- zblog登录后台一直提示验证码错误的原因和解决方法03-01
- zblog使用api提交post数据提示419错误的原因和解决方法02-23
- vue3项目引入vant报错的错误原因和解决办法03-12
- zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 微信支付JSPAI调起支付后提示“该订单已过期,请重新下单”的解决办法06-11
- 宝塔一键迁移提示“连接服务器失败”的原因和解决办法05-16
- 微信小程序报错:operateWXDataForAd:fail的原因和解决办法05-14
- php保存添加bom头的txt文件和读取时去除txt的bom头05-02
- 小程序使用mp-html组件后输出空白的原因和解决办法04-08
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室多语言翻译插件 自动翻译多达12种语言 适合外贸站点06-23
- 2有道云翻译获取appid和seckey的详细步骤和截图06-22
- 3支付宝支付后异步通知页面提示”支付签名校验失败,请联系管理员!“的原因和解决方法05-08
- 4阿里云oss配置项获取步骤截图,包含ID和Secret、区域节点Endpoint、存储空间Bucket和资源访问域名04-14
- 5zblog登录后台一直提示验证码错误的原因和解决方法03-01
- 6zblog使用api提交post数据提示419错误的原因和解决方法02-23
- 7天兴工作室2025年春节放假公告01-25
- 8天兴用户中心插件“微信通知”功能设置教程11-09
- 9阿里云2024双11活动推荐 通过本站链接参与另外赠送本站代金券11-05
- 标签聚合
- ×1服务器×1emlog判断页面×1zblog分类列表×1七牛×1蓝色简洁模板×1emlog模板制作×1腾讯视频×1jsapi接口×1自由列表×1zblog暗黑模式×1idc×1煎蛋主题×1加载失败×1云锁×1商户私钥×1腾讯云活动×1pc端×1购买zblog主题×1zblog个人模板×1zblog时间戳
最新评论
-
访客111
总之不是免费的午餐,不走某Z模式,难发展 评论于:关于zblog版权的说明
-
天兴工作室
并没有任何限制 -
访客
请问 zblog淘客主题 对使用者的要求是必须是企业吧? -
阿浩
大佬们,丢几个除了作者以外的演示站,我想看看大家的布局设置 -
有趣生活
一直想开发zblog的功能,zblog的敷在不知道够够不够