当前位置:首页 > 编程教程 > jQuery技术文章 > 圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现

如何在博客中添加纷纷扬扬下雪的效果

  • 发布时间:
  • 作者:码农之家
  • 点击:95

这篇文章主要知识点是关于jQuery、博客、下雪效果、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战
jQuery实战高清第三版
  • 类型:jQuery大小:99.0 MB格式:PDF作者:Bear Bibeault
立即下载

Tags:

圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现

一年一度的圣诞节又到了,首先祝大家好运一串串,健康一年年,平安到永远!在这个特殊的日子里,处处洋溢着节日的气氛,空中飘落的雪花更显得浪漫!今天就教大家如何在博客中添加纷纷扬扬的下雪效果。今天,你那里下雪了吗?
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
首先在页面引入 jQuery 库和 jQuery.snow.js(或者使用压缩版本 jQuery.snow.min.js):
 

<script src="jquery.js"></script>
<script src="jquery.snow.js"></script>

博客园的朋友可以不用引入 jQuery,因为博客园自身已经引入了。不是博客园的朋友也可以引用 Goolgle CDN 提供的 jQuery:
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="jquery.snow.js"></script>

然后在页面文档的任何地方调用下雪插件就可以了:
 

<script>
$(document).ready( function(){
$.fn.snow();
});
</script>

你也可以根据自己的喜好设置插件提供的参数来调整下雪的效果:
 

minSize /* 雪花的最小尺寸,默认值 10 */
maxSize /* 雪花的最小尺寸,默认值 20 */
newOn /* 每毫秒雪花出现的频率,默认是 500 */
flakeColor /* 雪花的颜色,默认值是白色 #FFFFFF */

例如可以传递下面这样形式的参数:
 

$.fn.snow({
minSize: 5,
maxSize: 50,
newOn: 1000,
flakeColor: '#0099FF'
});

newOn 参数值越小,效果越好,但是设置过小的话可能会有性能问题,比较耗资源。

最后向大家简单介绍一下这个下雪效果实现的要点
使用字符 ❄ 作为雪花,Unicode 编码是:❄,因此雪花的大小和颜色控制其实就是设置 font-size 和 color 属性。
使用 setInterval 周期性生成雪花,频率使用 newOn 控制。

下面是下雪插件的完整代码
 

(function($){
$.fn.snow = function(options){
var $flake = $('<div id="flake" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 500,
flakeColor : "#FFFFFF"
},
options = $.extend({}, defaults, options);
var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake
.clone()
.appendTo('body')
.css(
{
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}
)
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function() {
$(this).remove()
}
);
}, options.newOn);
};
})(jQuery);

园子里的朋友只要把下面代码添加到(管理-》设置-》页脚HTML代码)中就可以了,非简单!

温馨提示:因为会被转义,这里给雪花编码加个空格,使用的时候记得把html('& #10052;') 的& #间空格去掉啊。
 

<script>
(function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('& #10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#FFF' });
</script>

圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.523136

JQuery.validate在ie8下不支持的快速解决方法

一、在ie8下回有问题的代码 1、JQuery.validate验证框架是通过页面form表单提交验证input/标签中输入是否符合自己的规则的 form id="cardTypeFrm" table width="100%" cellspacing="0" cellpadding="0" class="table_pzh" tbody tr th class="f14 tr pc1"用户名:/th td input type="text" class="pzh_input1" id="userName" name="userName" / /td /tr tr th class="f14 tr pc1"密码:/th td input type="text" class="pzh_input1" id="passWord" name="passWord" / /td /tr /tbody /table p class="pc2 undis pl50 error pa" id="card_next_error"错误信息/p div class="m20 tc" input type="submit" id="submitCardNo" class="define_button reservation_1" value="登陆" / input type="button" value="取消" class="close_button closePzh ml10" / /div/form 其中 name属性和下面js中的rules中的属性一致 2、js绑定validate事件代码如下 $(function() { initCardTypeFrmValidate() })function initCardTypeFrmValidate() { $('#cardTypeFrm').validate({ onkeyup : false, onfocusout ……

网友NO.315289

jQuery表格元素动态创建功能的实现方法

Jquery实现表格元素的动态创建,本质是通过构造一个Dom Node节点,并且拼接到表格的Dom树上的子叶位置。 HTML正文: 用户:input type=text id=user/邮箱:input type=text id=mail/手机:input type=text id=phone/brbutton id=b1添加/buttonbrtable border=1 id=tabletrtduser/tdtdmail/tdtdphone/tdtdoperation/td/trtrtdzhangsan/tdtdaaa@qq.com/tdtd25652463/tdtda href=##delete/a/td/tr/table Javascript处理代码: $(#b1).click(function(){var $user=$(#user);var $mail=$(#mail);var $phone=$(#phone);//组装对象$tr=$(tr/tr);$td1=$(td/td);$td1.text($user.val());$td2=$(td/td);$td2.text($mail.val());$td3=$(td/td);$td3.text($phone.val());$td4=$(td/td);$href=$(a/a);$href.attr(href,##);$href.text(delete);$td4.append($href);$href.click(function(){if(window.confirm(确定删除?)){ //这里使用this表示当前事件绑定对象---? $(this)不能用$(href)代替,否则会认为每次都是最新对象,原有对象的行为不能保存 $(this).parent().p……

网友NO.977489

jquery精度计算代码 jquery指定精确小数位

本文实例为大家分享了jquery指定精确小数位的具体代码,供大家参考,具体内容如下 /*** 将标签的值格式化* id 标签id* min 最小值* max 最大值*/function toFloat(id,min,max){ var htmlVal = $("#"+id).html(); var index = htmlVal.indexOf("."); var result = ""; if(index 0){ htmlVal = htmlVal.replaceAll("0+?$",""); var len = htmlVal.substring(index+1).length; if(len min){ if(len max){ result = Number(htmlVal).toFixed(max); result = result.replaceAll("0+?$",""); }else{ result = Number(htmlVal).toFixed(len); result = result.replaceAll("0+?$",""); } }else { result = Number(htmlVal).toFixed(min); } }else { result = Number(htmlVal).toFixed(min); } $("#"+id).html(result);} 页面显示: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

网友NO.594863

jQuery增加与删除table列的方法

本文实例讲述了jQuery增加与删除table列的方法。分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headtitle/titlescript src="jquery-1.4.2.min.js" type="text/javascript"/scriptscript type="text/javascript"!--function addCol() { $th = $("th增加的列头/th"); $col = $("td增加的列/td"); $("#tab1theadtr").append($th); $("#tab1tbodytr").append($col);}function delCol() { //移除最后一列 $("#tab1 tr :last-child").remove(); //移除第一列 //$("#tab1 tr :first-child").remove(); //移除指定的列, 注:这种索引从1开始 //$("#tab1 tr :nth-child(2)").remove(); //移除第一列之外的列 //$("#tab1 tr :not(:nth-child(1))").remove();}// --/script/headbodyinput id="Button1" type="button" onclick="addCol()" value="增加列" /input id="Button2" type="butto……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757