JavaScript 处理图片相关操作
来源:互联网 发布:淘宝三国杀主播店 编辑:程序博客网 时间:2024/06/05 03:23
- 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;
- }
- 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)"/>