LBS功能:图片的自适应实现代码


增加图片自适应屏幕的方法

找到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;是调整图象的最大输出宽度为屏幕分辨率的多少倍.

更新 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.



相关阅读:
删除XP SP2中的无线设备支持
巧用find命令管理文件名为乱码的文件
artDialog:轻巧且高度兼容的javascript对话框组件
AlternatingItemTemplate类似于 ItemTemplate 元素
CSS expression在Chrome的问题
Vista下通过蓝牙手机控制计算机
ASP.NET生成eurl.axd Http异常错误的处理方法
Ajax并不神秘:揭下各种Ajax控件和类库的小裤衩
Windows Vista 共享文件夹
实现发送多个Ajax请求
Jquery 1.42 checkbox 全选和反选代码
css li 去掉点的样式写法
php文件上传的实现
MySQL中文参考手册--获得数据库和表的信息
快速导航

Copyright © 2016 phpStudy |