HTML+CSS+jquery代码实例:水波纹效果与纯HTML CSS和jquery(拿来就能用)
2023-09-14 09:04:06 时间
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
<script>
$(document).ready(function(){
$(".full-landing-image").ripples({
resolution: 200,
perturbance: 0.04,
});
});
</script>
<style>
.full-landing-image
{
width: 100%;
height: 100vh;
background: url(https://img.tukuppt.com/png_preview/00/11/21/QavTHpmzY6.jpg!/fw/780) no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<div class="full-landing-image"></div>
</body>
</html>
相关文章
- jquery 自定义事件绑定与触发 $.one与$.bind效果对比实例
- jquery手机全屏上下滑动
- jQuery实现跨域请求实例
- 实例解析java + jQuery + json工作过程(获取JSON数据)
- jQuery - lable 取值、赋值
- 第一百七十四节,jQuery,Ajax进阶
- 第一百六十二节,jQuery入门介绍
- 用jquery-table2excel,进行导出excel
- jQuery操作Form表单元素
- jQuery EasyUI 选项卡面板tabs使用实例精讲
- when busy dialog closed iDuration renderFioriFlower jQuery Animation closeL
- jQuery UI 实例 - 颜色动画(Color Animation)
- jQuery UI 实例 - 切换(Toggle)
- jQuery UI 实例 - 标签页(Tabs)
- jQuery UI 实例 - 进度条(Progressbar)
- jQuery UI 实例 - 对话框(Dialog)
- jQuery UI 实例 - 日期选择器(Datepicker)
- jQuery UI 实例 - 缩放(Resizable)
- jQuery UI 实例
- 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享
- jquery.js和jquery.min.js的区别介绍