繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CMS技巧 > LBS功能:图片的自适应实现代码
- CMS技巧
- Zblog帮助:模板文件与模板标签
- Joomla教程:模板覆盖方式修改系统输出
- Joomla教程:为Joomla插件创建语言包
- Joomla教程:文章页面中显示指定的模块
- Joomla教程:控制Section中的分类列表页面的显示方式
- Joomla教程:mod-rewrite是否真的被开启
- 在Joomla自定义HTML模块组合使用Google小工具
- Joomla教程:本地搭建的Joomla站点发送邮件
- Joomla教程:在Who is online模块中显示用户名
- dedecms教程:栏目页面转换为单独页面
- CMS可用性测评:帮助找到适合自己的内容管理系统
- Joomla中文教程:构建多重站点
- Joomla教程:在templateDetails.xml中添加语言文件声明
- Joomla教程:为页面和模块添加独立的自定义Class
- Joomla教程:为“read more”链接添加对应的文章标题
- Joomla教程:查看并修改模板的CSS
- Joomla中文教程:创建并使用插件对文章内容进行修改
- Joomla教程:网站首页第一次加载时播放一次Flash动画
- Joomla教程:禁止未分类文章被站内搜索
- Joomla教程:去掉分类文章列表中的文章序号
CMS技巧 中的 LBS功能:图片的自适应实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-03 浏览: 40 ::
收藏到网摘: n/a
增加图片自适应屏幕的方法
找到Common.js，添加
function DrawImage(ImgD){
var iWidth = screen.width * 0.5;
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width>=iWidth){
ImgD.width=iWidth;
ImgD.height=(image.height*iWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
var iWidth = screen.width * 0.5;
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width>=iWidth){
ImgD.width=iWidth;
ImgD.height=(image.height*iWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
这里var iWidth = screen.width * 0.5;是调整图象的最大输出宽度为屏幕分辨率的多少倍.
更新 ubbcode.asp
找到第149行左右
var newStr='<div style="width: 100%;overflow-x : auto;"><a href="'+strURL+'" target="_blank"><img src="'+strURL+'" alt="'+strURL+'" \" /></a></div>';
改为1、有图片连接方式
var newStr='<a href="'+strURL+'" target="_blank"><img src="'+strURL+'" alt="'+strURL+'" onload=\"javascript:DrawImage(this);\" /></a>';
2、无图片连接方式
var newStr='<img src="'+strURL+'" alt="'+strURL+'" onload=\"javascript:DrawImage(this);\" />';
我选的是第二种无图片的连接方式.
为了实现一叶千鸟的那种图片显示效果(图片自动添加边框，无链接效果).我在img标签里写了一些CSS属性.
var newStr='<img style="border:1px solid #333333" src="'+strURL+'" alt="'+strURL+'" onload=\"javascript:DrawImage(this);\" />';
红色部分就是添加的CSS.
评论 (0) All
