jQuery实现下雪雪花漂亮案例

效果图：

源码如下：

<!doctype html>
<html>
<head><meta charset="utf-8"><title>jquery实现下雪功能</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>* {margin: 0;padding: 0;}body {position: relative;height: 1000px;width: 100%;overflow: hidden;background-color: #666;}span {display: block;opacity: 0.7;}</style>
</head>
<body>
<script>$(function () {setInterval(function () {const maxW = document.body.clientWidth,maxH = document.body.clientHeight,left = Math.random() * maxW,bottom = left - (Math.random() - 0.5) * 0.2 * maxW, //保证落下的位置水平有变化，但不大opacity = 0.7 + 0.3 * Math.random();const speed = 30;const size = 20 + 10 * Math.random(), //字体20-30color = '#fff';// num = Math.floor(Math.random() * 10) //产生0-9随机数，当然你们可以自己设置const num = '*';const style = 'position:absolute;top:0px;font-size:' + size + 'px;color:' + color + ';left:' + left + 'px;opacity:' + opacity;const div = '<span class = "dd" style="' + style + '">' + num + '</span>';$('body').append(div)$('span').animate({top: maxH,left: bottom}, 3000, function () {$(this).remove() //这一步很关键，要把落下的去掉，不然会越积越多});}, 20) //20ms产生一个})
</script>
</body>
</html>

jQuery实现下雪雪花漂亮案例相关推荐

jquery 堆栈溢出_带有jQuery和CSS3的漂亮照片堆栈库
jquery 堆栈溢出 View demo 查看演示Download Source 下载源 In this tutorial we are going to create a nice and fre ...
jQuery下拉菜单经典案例
jQuery下拉菜单经典案例源码: <!DOCTYPE html> <html lang="en"><head><meta charse ...
jQuery实现仿五角星评分案例
jQuery实现仿五角星评分案例这两周一直在做网页相关的,最近由于项目需求,又要重新捡起遗失已久的前端了(什么前端不前端,身为一颗螺丝钉,哪里需要往哪打). 重拾jQuery的第一感受,这玩 ...
js实现下雪雪花特效
两种下雪特效: 1. <script type="text/javascript"> (function($){$.fn.snow = function(options ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
【jQuery笔记Part4】04-jQuery案例-轮播图
jQuery案例-大屏焦点图-节点操作案例简介静态页面添加事件 jQuery笔记目录案例简介轮播图: 点击浏览器左侧,则,展示左边一个图片, 点击浏览器右侧,则,展示右边一个图片, 越界循环 ...
关于JQuery（附3个案例）
简介 JQuery是一个快速的,小的,丰富的JavaScript库(类指函数,工具的集合).使的HTML文档遍历和操作,事件处理,动画和Ajax等操作更加简单. JQuery官网:https://jq ...
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
【jQuery】前端项目实践案例6——制作产品放大镜效果（仿京东淘宝图片效果）
使用jQuery制作产品放大镜效果实现效果: 使用jQuery制作产品放大镜效果实现原理: 通过设置图像的 CSS 属性( left 和 top ),来实现图像的移动. 使用jQuery制作产品放大镜 ...

jQuery实现下雪雪花漂亮案例

效果图：

源码如下：

jQuery实现下雪雪花漂亮案例相关推荐

最新文章

热门文章