css js鼠标经过图片放大功能代码
本帖最后由 webmaster 于 2019-5-8 13:36 编辑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代码
<img src="https://www.sssi.cn/template/sssi_2016/images/logo.png" width="20" height="20"/>请在图片标签中加入onmouseenter="imgBig(this)"和onmouseleave="imgSmall(this)"
js代码
<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>
页:
[1]