HTML+CSS+jquery代码实例:水波纹效果与纯HTML CSS和jquery(拿来就能用)
2023-09-14 09:13:44 时间
效果:
代码:
<!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基础
- jQuery实现轮播效果
- jquery选择器用法_jQuery属性选择器
- jQuery实现快速平滑回到顶部详解编程语言
- Jquery 异步提交表单详解编程语言
- jQuery动态添加与删除tr行实例代码详解编程语言
- jQuery $.ajax()方法的使用
- JQuery打造PHP的AJAX表单提交实例
- Jquery获取表单text,areatext,radio,checkbox,select值的代码
- jQuery树形结构的选择器
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- Jquery知识点三jquery表单对象操作
- Jsonp跨域的原理以及Jquery的解决方案
- jQuery提交表单ajax查询实例代码
- jquery入门—访问DOM对象方法
- JQuery获取各种宽度、高度(format函数)实例
- jQuery表单获取和失去焦点输入框提示效果的实例代码
- jquery实现图片滚动效果的简单实例
- jquery使用淘宝接口跨域查询手机号码归属地实例
- 基于JQuery实现的图片自动进行缩放和裁剪处理
- Jquery实现控件的隐藏和显示实例
- jquery的ajax简单结构示例代码
- JQuery解析HTML、JSON和XML实例详解
- jquery幻灯片插件bxslider样式改进实例
- jquery中post方法用法实例
- 非jQuery实现照片散落桌子上,单击放大的LightBox效果
- 使用jquery.qrcode生成彩色二维码实例
- jQuery中DOM树操作之使用反向插入方法实例分析
- jQuery级联操作绑定事件实例