css js鼠标经过图片放大功能代码

css代码

[CSS] 纯文本查看 复制代码

/***图片放大缩小 - 开始***/
.imgBig{
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 1000;
        box-shadow: 0 0 10px #888;
        -webkit-box-shadow: 0 0 10px #888;
        -moz-box-shadow: 0 0 10px #888;
        -o-box-shadow: 0 0 10px #888;
}
.imgSmall{
        position: static;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -o-box-shadow: none;
}
/***图片放大缩小 - 结束***/

html代码

[HTML] 纯文本查看 复制代码

<img src="https://www.sssi.cn/template/sssi_2016/images/logo.png" width="20" height="20"/>

请在图片标签中加入onmouseenter="imgBig(this)"和onmouseleave="imgSmall(this)"

js代码

[JavaScript] 纯文本查看 复制代码

<script type="text/javascript">
function imgBig(_this){
    _this.className = "imgBig";
    _this.width = "200";
    _this.height = "200";
}
function imgSmall(_this){
    _this.className = "imgSmall";
    _this.width = "20";
    _this.height = "20";
}
</script>