技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

不同浏览器分辨率显示不同尺寸的对联广告【JS代码实现】

作者:admin    时间:2015-6-23 17:2:58    浏览:

对联广告的设计,跟嵌入网页内的广告设计有点不同,为了不影响用户体验,对联广告需要在尺寸上根据访客浏览器分辨率的不同而有所改变,以便对联不遮住网页内容,不影响用户的正常浏览网页内容。考虑到这一点,百度联盟就有一个规定,使用对联广告要设置仅当分辨率大于1024才显示。那么,要怎样设计不同浏览器分辨率显示不同尺寸的对联广告呢?代码要怎样写呢?这是本文要解决的问题。

对联设计思路

其实,思路很简单,就是事先设计两套对联图片,一套是浏览器分辨率大于1024时显示,另一套是浏览器分辨率小于1024时显示。为什么要以1024为分界点呢?因为以前的网页多数是以宽度为1024来设计的,在分辨率1024的情况下,网页宽度刚好跟屏幕宽度一样,当分辨率大于1024时,网页宽度到屏幕两侧会有一段间距,这段间距刚好适合放一个对联。看看如下两张截图就明白了。

分辨率1024x768

分辨率1024x768

分辨率1440x900

分辨率1440x900

上面两图来自卡卡网www.webkaka.com,卡卡网的对联设计便是采用了这种方式,事先设计两套对联图片,一套是浏览器分辨率大于1024时显示,另一套是浏览器分辨率小于1024时显示。

对联实现代码

其实,实现起来是很容易的,我们无非就是要先判断一下浏览器的分辨率,用一段JS代码就能轻松实现。

代码如下:

var iScreenWidth = window.screen.width; //获得浏览器分辨率
if(iScreenWidth <= 1024){
//显示分辨率小于等于1024的对联
...
}
else{
//显示分辨率大于1024的对联
...
}

您可能对如下文章也感兴趣

纯CSS(非JS)代码实现固定对联的方法 超短超实用!

标签: 对联  
  • IT热文
  • 站长推荐