zoukankan      html  css  js  c++  java
  • 图片缩放效果IE和火狐兼容模式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
     <meta http-equiv = "Content-Type" content="text/html;charset=gb2312"/>
      <title> 图片放大缩小</title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
    <style>
      .one{90px;height:100px}
      </style>
    <script language="javascript">
    window.onload=function(){
    	var img1 = document.getElementsByTagName("img")[0];
    	//火狐和IE兼容的获得元素属性
    	/*function getsize(obj,att){
    		if(document.all){
    			return obj.currentStyle[att];
    		}
    		else{
    			return getComputedStyle(obj,att)[att];
    		}
    	}
    	alert(getsize(img1,"width"));
    	*/
    	//火狐和IE兼容的获得鼠标滚轮信息
    if(img1.addEventListener){
    	img1.onmousewheel = scrollfun;
    	img1.addEventListener("DOMMouseScroll",scrollfun,false);
    	}
    	function scrollfun (e){
    		var ev= e || window.event;//兼容分别为IE和火狐
    		var num=ev.wheelDelta||ev.detail;//兼容分别为IE和火狐
    		//alert(num);
    		if((num== -3 || num ==120) && img1.offsetWidth < 900){
    			img1.style.width = (img1.offsetWidth)*1.2 +"px";
    			img1.style.height = (img1.offsetHeight)*1.2 +"px";
    		}
    		else if((num ==3 || num ==-120) && img1.offsetWidth >60){
    			img1.style.width =(img1.offsetWidth)/1.2 + "px";
    			img1.style.height = (img1.offsetHeight)/1.2+ "px";
    		}
    		}
    }
    
    </script>
     </head>
    <!--"D:/Myfile/图片/1.jpg"-->
     <body>
      <img src="file:///D|/1.jpg" class="one"/>
     </body>
    </html>
    

      

  • 相关阅读:
    linux less命令用法
    Spark-RDD 模型 以及运行原理
    Spark 架构原理介绍 以及 job、task、stag 概念
    Kafka 基本概念以及框架介绍
    负载均衡- TCP/ IP 基础知识
    JAVA多线程和并发基础面试题
    Java并发使用--线程池
    Java基础--并发编程
    事务实现原则(一) 事务的改变以及JDBC事务的设计
    Spark RDD Transformation和Action
  • 原文地址:https://www.cnblogs.com/hsqdboke/p/2725750.html
Copyright © 2011-2022 走看看