jQuery实现web页面樱花坠落的特效

2024-10-02 06:46:54

源码地址

https://github.com/jingegebuguai/Cherry_Blossoms（求star）

开发原因

上课看到一位女生桌面背景是一课樱花树，顿时产生了一个让樱花可以在web页面飞舞的想法，借此把这个插件献送给那位女同学；
开发过焦点图，轮转图，瀑布流等应用插件，但是这类型插件还是第一次做，那个啥兴趣使然对吧；

开发工具

Jquery+webstorm,无需额外配置任何环境，移动端无法使用

效果演示

为了更加显眼，背景换成了黑色,gif图有些卡顿，实际效果比较流畅

效果详见Github

使用方法

在需要加入效果的页面加入html代码,位置最好放在body元素下第一个标签

<div class="cherry">
<img id="yinghua" src="../image/yinghua.png" alt="" >
</div>

导入一下js代码其中各变量可根据需要改变

$(function(){
   $('.cherry').Cherry_Blossoms({
     is_Cherry:true,//是否生成樱花
     image_min:10,//花瓣最小宽度和高度
     image_max:50,//花瓣最大宽度和高度
     time_min:10000,//花瓣最快下坠时间
     time_max:20000,//花瓣最慢下坠时间
     interval:500//花瓣生成时间间隔
   })
 })

js插件

IIFE（立即执行匿名函数）
$.extend(),扩展插件定义默认参数
randomNum（）设置[m,n]类型随机数

以上所述是小编给大家介绍的jQuery实现web页面樱花坠落的特效，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

使用jQuery实现图片遮罩半透明坠落遮挡

默认九宫格图片排列效果,当鼠标悬停在图片上后,会从图片的上方下滑一个半透明遮罩的效果同时出现一些文字介绍使用方法: 1.将head中的css样式引入到你的网页中 2.将代码部分拷贝到你的网页body结束前的地方即可 (js.图片采用绝对路径,不建议修改) 复制代码代码如下: $(function(){ $('.sgw_img dt').hover(function(){ $(this).children('.box').stop(true,true).delay(1
jQuery实现web页面樱花坠落的特效

源码地址 https://github.com/jingegebuguai/Cherry_Blossoms(求star) 开发原因上课看到一位女生桌面背景是一课樱花树,顿时产生了一个让樱花可以在web页面飞舞的想法,借此把这个插件献送给那位女同学: 开发过焦点图,轮转图,瀑布流等应用插件,但是这类型插件还是第一次做,那个啥兴趣使然对吧: 开发工具 Jquery+webstorm,无需额外配置任何环境,移动端无法使用效果演示为了更加显眼,背景换成了黑色,gif图有些卡顿,实际效果比较流畅效
使用jQuery实现Web页面换肤功能的要点解析

网页换肤是一门老技术了,老的现在都不怎么流行了.但是,有时候有些客户就是想要这个换肤功能.于是就实践做了一下网页换肤,结果遇到了很多问题. 网页换肤的基本原理基本原理很简单,就是使用 JS 切换对应的 CSS 样式表.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie
自己动手制作基于jQuery的Web页面加载进度条插件

静态效果的实现网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio
使用jQuery制作Web页面遮罩层插件的实例教程

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =
移动端jQuery修正Web页面滑动时div问题的两则实例

顶部固定时划屏出现闪动头部是一个普通的div,高度是48,头部下面有个固定的banner,手下滑的时候,banner会固定在浏览器最顶部不动.出现的问题是,PC端是好的,手机浏览器向上滑动的时候出现闪动!影响用户体验. 解决方法一: 之前的做法: if ($(window).scrollTop() < 48) { $(".nav ").css("top", 48 - parseInt($(window).scrollTop())); }else{ $(&qu
基于jquery的web页面日期格式化插件

复制代码代码如下: (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')'); var myDate = correctt
jQuery EasyUI结合zTree树形结构制作web页面

JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐 easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyu
jQuery实现的页面遮罩层功能示例【测试可用】

本文实例讲述了jQuery实现的页面遮罩层功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
简要了解jQuery移动web开发的响应式布局设计

响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计.这意味着,无论用户是在移动.平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备. 该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计.对不同屏幕分辨率的反应方式. 没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度: 在我们的自定义样式,我们希望此网格叠加在狭窄的宽度,然后切换到一个标准的3栏布局.在很宽的屏幕宽度,我们
Jquery实现视频播放页面的关灯开灯效果

本示例使用Jquery实现视频播放页面的关灯开灯效果.其中视频显示使用embed 元素,该元素是html5的元素,所以使用支持html5的浏览器效果会更好. 效果预览网址:http://www.keleyi.com/keleyi/phtml/guandeng/ 完整代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

jQuery实现web页面樱花坠落的特效

相关推荐

随机推荐