您的位置：首页 > Web前端 > JavaScript

JavaScript 处理图片相关操作

2008-10-07 16:53 239 查看

1.去掉热点地图上的区域线框与超链接的线框:

<a href="#" onfocus="this.blur()"><img src="Images/aaa.jpg" border="0"></a>

2.去除当鼠标放到图片上时出现快捷工具（打印、邮寄、另存等）

<img src="Images/aaa.jpg" galleryImg="no" border="0">

3.动态改变照片的亮度(透明度)

<img id="imgInfo" src="Images/Train.jpg" style="filter: alpha(opacity=50)"/>

<input id="Button1" type="button" value="亮度+" onclick="rdl_change(1)" />

<input id="Button2" type="button" value="亮度-" onclick="rdl_change(0)"/>

<script>

function rdl_change(m)

{

var oDiv=document.getElementById("imgInfo");

switch(m)

{

case 0 :

//照片变透明

oDiv.filters.alpha.opacity=oDiv.filters.alpha.opacity-10;

break;

case 1 :

//照片变亮

oDiv.filters.alpha.opacity=oDiv.filters.alpha.opacity+10;

break;

default: break;

}

}

</script>

4.放上鼠标显示原照片移开鼠标让照片半透明

<img src="Images/aaa.jpg" id="content"

onMouseOver="runtimeStyle.filter='alpha(opacity=100)'"

onMouseOut="runtimeStyle.filter='alpha(opacity=40)'">

5.页面加载图片渐渐显示

<body onLoad="fade()">

<img src="Images/Train.jpg" name="img" border="0" alt="Image" style="filter:alpha(opacity=0)" width="330" height="400">

<script type="text/javascript">

var b = 1;

var c = true;

function fade()

{

if(document.all);

if(c == true)

{

b++;

}

if(b==100)

{

b--;

c = false

}

if(b==10)

{

b++;

c = true;

}

// if(c == false)

// {

// b--;

// }

img.filters.alpha.opacity=0 + b;

setTimeout("fade()",50);

}

</script>

</body>

6.图片随鼠标滚轴移动而变化大小：

function ZoomImg(img)

{

var zoom = parseInt(img.style.zoom, 10) || 100;

zoom += event.wheelDelta / 12;

if(zoom > 0)

img.style.zoom = zoom + '%';

return false;

}

<img src="人民的壁纸.bmp" border="0" id="chen" runat="server" galleryImg="no"

onmousewheel="return ZoomImg(this)"/>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航