js鼠标放到图片上放大

方法1：

js:

<script type="text/javascript">
        function BigImg(x) {
            x.style.height = "100%";
            x.style.width = "100%";
        }
        function NormalImg(x) {
            x.style.height = "30px";
            x.style.width = "50px";
        }
</script>

html:

 

效果：原位置放大

 

方法2：

css：

      /*图片放大*/
        img{border:none;}
        #tooltip
        {
            position: absolute;
            padding: 2px;
            display: none;
            color: #fff;
        }

html：

Js：

方法1：

 $(function () {
            var x = 10;
            var y = 20;
            $("a.tooltip").mouseover(function (e) {
                this.myTitle = this.title;
                this.title = "";
                var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
                var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='预览图' width='85%' height='85%'/>" + imgTitle + "<\/div>"; //创建 div 元素
                $("body").append(tooltip); //把它追加到文档中      
                $("#tooltip")
   .css({
       "top": (e.pageY + y) + "px",
       "left": (e.pageX + x) + "px"
   }).show("fast");   //设置x坐标和y坐标，并且显示
            }).mouseout(function () {
                this.title = this.myTitle;
                $("#tooltip").remove();  //移除
            }).mousemove(function (e) {
                $("#tooltip")
   .css({
       "top": (e.pageY + y) + "px",
       "left": (e.pageX + x) + "px"
   });
            });
        });

 

方法2：

        var x = 80;
        var y = 20;
        function BigImg(x) {
            x.myTitle = x.title;
            x.title = "";
            var imgTitle = x.myTitle ? "<br/>" + x.myTitle : "";
            var tooltip = "<div id='tooltip'><img src='" + x.href + "' alt='预览图' width='85%' height='85%'/>" + imgTitle + "<\/div>"; //创建 div 元素
            $("body").append(tooltip); //把它追加到文档中
            $("#tooltip").css({
                "top": (x.offsetTop + y) + "px",
                "left": (x.offsetLeft + x) + "px"
            });
            $("a.tooltip").show("fast");
            $("#tooltip").show("fast");
        }
        function NomalImg(x) {
            x.title = x.myTitle;
            $("#tooltip").remove();  //移除
        }

 

效果：