会网页制作的求教,鼠标移到图片,使图片抖动,怎么弄

会网页制作的求教,鼠标移到图片,使图片抖动,怎么弄,第1张

JS的 HTML DOM 事件

给你个鼠标移动到图片的事件例子:

<!DOCTYPE html>

<html>

<body>

<div

onmouseover="mOver(this)"

onmouseout="mOut(this)"

style="background-color:#D94A38width:200pxheight:50pxpadding-top:25pxtext-align:center">

Mouse Over Me

</div>

<script>

function mOver(obj)

{

obj.innerHTML="鼠标移到DIV"

}

function mOut(obj)

{

obj.innerHTML="鼠标离开DIV"

}

</script>

</body>

</html>

上面只是设置了移到改变文本 ,你可以利用本事件设置鼠标移到和离开时目标div的CSS实现效果!或者追问详细说明要什么样的效果,我帮你做!

经测试,采用Firefox 45.0.1存在闪烁问题,并发现以下浏览器的某个版本:微信内置浏览器、QQ浏览器、Safari手机浏览器及早期的Chrome可能存在类似情况,包括载入闪动,悬停后闪动。分析:Blink对transition中,属性transform的动画渲染存在差异,而Chrome中的最新版本,已经不存在此情况。解决方法:<style>.outter { height: 375px margin: 10px auto width: 500px }.inner{}img:hover { width:110% margin-left:-5% margin-top:-5%}img{width:100% transition:0.4s ease-in-out}</style>复制代码以上CSS,在IE10、IE11、Chrome及Firefox 45.0.1中调试通过:首次载入,及Ctrl+F5刷新,均不会有闪动情况


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5915026.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-08
下一篇 2023-03-08

发表评论

登录后才能评论

评论列表(0条)

保存