珠海响应式网站制作,如何制作个人网页文档,wordpress 访客,百度搜索推广流程实现效果#xff0c;如上图。 首先#xff0c;实现手机页面在PC端预览#xff0c; 则先在网上找到一个手机的背景图片#xff0c;算好大概内间距#xff0c;用来放预览的页面#xff0c;我这里是给手机预览页面的尺寸按iphone5的尺寸来的#xff1b;
一个手机页面在这里…
实现效果如上图。 首先实现手机页面在PC端预览 则先在网上找到一个手机的背景图片算好大概内间距用来放预览的页面我这里是给手机预览页面的尺寸按iphone5的尺寸来的
一个手机页面在这里预览要通过iframe标签左边选择不同的select选项通过监听select选项的值在js中动态改变iframe的src来实现
因为要实现横屏和竖屏的预览切记千万不能在点击横屏的时候把竖屏的页面旋转90度这样是没有效果的因为预览页面的本身还是竖屏的只是页面跟着一起旋转了90度要单独另外写一个横屏的box宽度大于高度的这样当预览页面识别到宽度大于高度即按横屏的效果展示
我这里实现思路是把横屏的div默认display:none;默认选择竖屏的时候就直接把竖屏的box下的iframe的url和横屏模式下的iframe的url一起改变了当选择横屏的时候展示横屏的box隐藏竖屏的box但是事实是横屏的此时不会展示页面而是空白而在默认选择了横屏的情况下去切换其他页面的时候其他横屏可以正常展示我想原因是box从display:none到展示出来iframe没有识别到应该有的横屏的宽度所以最后改为了默认把横屏的opacity的透明度设为0,则切换的时候通过切换透明度来进行展示让默认直接把iframe的url可以渲染到对应宽度的盒子中。横屏与竖屏通过定位放在同一个位置即可。
更多专业前端知识请上
【猿2048】www.mk2048.com
