当前位置: 代码迷 >> JavaScript >> 图片自动缩放的解决方案
  详细解决方案

图片自动缩放的解决方案

热度:207   发布时间:2012-02-29 16:44:11.0
图片自动缩放的
问题是这样的:

假设$str中存储着用户通过fckeditor提交上来的HTML内容,确定$str中存储有图片路径,形式如 <img   src= ' '> </img> ,但是不知道是几张图片,现在有一段JS代码可以使图片达到自适应的效果,但是必须   写入到 <img> 标签内,怎样能把$str中所有的图片提取出来,然后再把调用JS的函数   写进去?或者直接在文本输出的DIV上用CSS控制?

------解决方案--------------------
两个方法
1.正则替换:
var eventStr = "onload=\ "loadEvent()\ " ";//eventStr存放的是你的自适应的代码,我这里给个例子,应该和这个类似

$str = $str.replace(new new RegExp( " <img src=(.+?) </img> ", "ig "), " <img "+ eventStr + " src=$1 </img> ");

2.显示的时候处理:
给给我用的,不知道看不看得懂
//图片缩放
function imgzoom(o){
if(event.ctrlKey) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom -= event.wheelDelta / 12;
if(zoom > 0) {
o.style.zoom = zoom + '% ';
}
return false;
} else {
return true;
}
}

function bbimg(o){
var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom> 0) o.style.zoom=zoom+ '% ';
return false;
}

/***********/
function checkimg(obj,width)
{
var OW = obj.clientWidth;
var OH = obj.clientHeight;
if (OW > width)
{
obj.style.width = width;
obj.style.height = (width * OH)/OW;
}
obj.style.cursor = 'pointer ';
if(obj.alt == ' ')
{
obj.alt = '点击看原图,滚动鼠标滚轮放大和缩小 ';
}
obj.attachEvent( "onclick ",function(){window.open(obj.src)},false);
obj.attachEvent( "onmousewheel ",function(){return bbimg(obj)},false);
}

function checkImages(width,className)
{
var Arr1 = new Array();
Arr1 = document.getElementsByClassName(className);
for(var ii = 0;ii < Arr1.length;ii++)
{
if(document.getElementById){
var imagesArr = new Array();
imagesArr = Arr1[ii].getElementsByTagName( "img ");
for(var i=0; i <imagesArr.length; i++)
{
var img = imagesArr[i];
img.onload=function(){checkimg(this,width)};
img.onerror=function()
{
this.alt = "The address is not exists ";
this.src = "common/images/error.gif ";
};
}
}
}
}

checkImages( "500 ", "content ");//content是className,当图片宽度超过500时则自动缩小(把这句放在页面底部)

比如 <div class= "content "> </div> 内的图片都受控制

演示可以到我的BLOG看:http://yangmingsheng.cn
------解决方案--------------------
/**
* 图片自适应函数
*/
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.height/image.width <480/630){

if(image.width> 630){
ImgD.width=630;
ImgD.height=(image.height*630)/image.width;
ImgD.alt= "点击查看原图 ";
ImgD.style.cursor= "hand ";
ImgD.onclick=new Function( "window.open( ' "+ImgD.src+ " '); ");
}else{
//
}
}
else{
if(image.height> 480){
ImgD.height=480;
ImgD.width=(image.width*480)/image.height;
ImgD.alt= "点击查看原图 ";
ImgD.style.cursor= "hand ";
ImgD.onclick=new Function( "window.open( ' "+ImgD.src+ " '); ");
}else{
//
}
}
}
请你参考下这个!!
  相关解决方案