之前在研究如何在鼠标放置于图片上时,对图片进行缩放,鼠标离开后恢复图片大小。
一开始用的是修改图片的width和height值,我用bootstrap的栅栏放置的图片,结果出现了排版错误,效果很不理想。
于是想用边框属性来进行放置鼠标的互动,无意间发现,增加边框时图片会进行缩放!
边框设置为10px时
边框设置为50px时。
那么,只要我把边框设置成白色(或者背景的颜色),不就实现了缩放效果了么???
上代码!
<img class="col-md-6" src="img/最新资讯1.jpg" id="zuixinzixun">
这个是图片地址,class是bootstrap的栅栏,id为zuixinzixun(请别吐槽我的拼音命名法,做来交作业的,所以不严谨)
<script>$(function() {$("#zuixinzixun").mouseover(function() {$(this).css("border", "solid 10px white");});$("#zuixinzixun").mouseleave(function() {$(this).css("border", "solid 0px");})})</script>
这段jquery代码的意思是,当鼠标移动到id为zuixinzixun的图片上时(mouseover),增加一个为10px的白色边框(我的背景色是白色的,所以用白色的边框就相当于隐形了,你们也可以根据背景色设置)。
当鼠标移出(mouseleave)时,将边框设置为0px。
效果: