介绍 & lt; p>
& lt; i> & lt;/i>
& lt;/p> & lt; style>
p {
保证金:0;
位置:相对;
填充:60 px 30 px;
背景颜色:橙色;
颜色:# fff;
宽度:200 px;
溢出:隐藏;
text-align:中心;
边界:20 px固体# 000;
}
我{
位置:绝对的;
宽度:520 px;
身高:520 px;
这个特性:50%;
}
& lt;/style> & lt;脚本https://www.yisu.com/zixun/src=" http://code.jquery.com/jquery-1.11.3.min.js ">
<>脚本
(函数(){
var关键=true;
美元(p) .click(函数(事件){
var e=事件| | window.event;
如果(关键){
键=false;
var规模=0;
var=0.8;
var计时器=setInterval(函数(){
如果(>=1 | | <=0){
规模=0;
一个=0.8;
clearInterval(计时器);
键=true;
}
$("我"). css ({
“左”:e。pageX - 8 - 20,
“顶级”:e。pageY - 8 - 20,
“转换”:“翻译(-50%,-50%)(“规模+ +”)”,
“背景颜色”:“rgba(225225225年,“+ +”)”
});
规模+=0.01;
-=0.008;
},10)
}
})
}())
这篇文章主要介绍了js点击时出现波纹效果的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
先看看效果图:
html代码:
css代码:
js代码:
感谢你能够认真阅读完这篇文章,希望小编分享js点击时出现波纹效果的方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
