jQuery圣诞雪花

<script type="text/javascript">
$(function(){
var d="<div class=‘y_snow‘>?<div>"
setInterval(function(){
var f=$(document).width();  //获取文档高度
var e=Math.random()*f-300;  //f高度随机数减去300
var o=0.3+Math.random();  //0.3+(0-1)之间随机数
var fon=10+Math.random()*30;//10加上(0-30)随机数
var l = e - 100 + 200 * Math.random();   //f高度随机数减去300-100+(0-200)的随机数
var k=2000 + 5000 * Math.random();   //2000+(0-5000)的随机数
$(d).clone().appendTo(".chris_bg").css({//d的代码复制到.chris_bg
left:e+"px",   //相对位置左移(f高度随机数减去300)的像素
opacity:o,
"font-size":fon,   //文字大小(f高度随机数减去300)的像素
}).animate({
top:"400px",
left:l+"px",   //动画左移的变化(f高度随机数减去300-100+(0-200)的随机数)
opacity:0.3,
},k,"linear",function(){$(this).remove()})     //(2000+(0-5000)的随机数)的秒数
},200)   //0.2秒执行一次
})

</script>

时间: 2024-10-03 13:44:38

jQuery圣诞雪花的相关文章

jQuery效果—雪花飘落

实现思路 1.在一定的频率下在页面中生成一定数目的雪花从上往下飘落: 2.在指定的时间内飘落后移除页面: 3.可设置雪花的大小,在一定范围内随机雪花大小: 4.什么时间后清除生成雪花,停止函数. js代码 (function($){ $.fn.snow = function(options){ var $flake = $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}), docu

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content=&

更显别具一格的高贵时尚

上等的亚麻面料赋予它耐穿又透气的特质,颜色清新亮眼,文艺范女生们尤其不容错过.V型立领棉麻针织衫 真皮面料的连衣裙有着其他材质难以比拟的时尚感,超有型的个性效果潇洒不羁,触感却柔软而富有弹力,保暖透气, 绝对不会为了外在美而牺牲了穿着的舒适性.使用高超工艺在面料上制作出不同光泽度的图案,在光线下更显别具一格的高贵 时尚.提花无袖花苞连衣裙 蓬蓬袖衬衫采用了蝴蝶图案的蕾丝勾花领甜美可人,与高腰牛仔裤搭配在视觉上有拉长下身比例的作用,仿水台坡跟凉 鞋穿着舒适尤其显个. 明艳而明快的色彩在春夏季节更受

前端开源项目周报0103

由OpenDigg?出品的前端开源项目周报第四期来啦.我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目,方便前端开发人员便捷的找到自己需要的项目工具等. ndm npm桌面管理器 table-dragger 拖拽和排序表格的控件 vue-play 展示Vue组件的最小化框架 react-native-circular-slider 创建圆形滑块的React Native组件 mockschema 在组件中生成虚拟数据的最好的方式 vue-ssr 非常简单的Vue

jQuery雪花插件JQuery-Snowfall Plugin

明天就是圣诞节,分享一个好玩的jQuery插件——JQuery-Snowfall Plugin,该插件可以实现在页面上飘落雪花的特效. JQuery-Snowfall插件的github项目地址:https://github.com/loktar00/JQuery-Snowfall/ 调用插件的方式很简单,首先,需要在页面上添加对js源文件snowfall.jquery.js的引用: <script type="text/javascript" src="https://

jquery/zepto 圣诞节雪花飞扬

下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 个人的demo: 新建并且引用以下js文件: (function($){ $.snowfall = function(element, options){ var defaults = { flakeCount : 35, flakeColor :

canvas制作雪花效果

<!DOCTYPE html><html> <head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title>圣诞主题</title>    <link rel='stylesheet' href='common.css' />    <link rel="

jq制作圣诞主题页面

今天制作的是有飘雪效果的圣诞主题页面,个人灰常喜欢. 首先还是放张效果图: 当看到这这页面的时候我们要注意四点: 1.图片的轮播 2.文字的滚动效果 3.音乐播放 4.飘雪效果 那我们就一点一点来完成吧,Go,Go! 对于上次分享的有人说我讲的不够细致,那在这篇文章我就细致一点. (1)准备工作 首先新建css,img,js,file这四个文件夹并新建demo.css,轮播图片,demo.js,一首歌放在对应文件夹,新建demo.html,并在demo.css中加入如下代码: 1 *{ 2 pa

华丽的HTML5/jQuery动画和应用 前端必备

在网页应用中,我们经常会使用jQuery来实现一些简单的动画效果,比如菜单下拉时的渐变特效,图片滑动时的淡入淡出效果等.现在我们将jQuery和HTML5互相结合,让HTML5/CSS3强大的页面渲染引擎和jQuery简单易用的框架融合在一起,发挥前端迷人的效果. 1.jQuery 360度图片旋转插件DopelessRotate DopelessRotate是一款基于jQuery的图片旋转插件,这款图片旋转插件功能非常强大,它不仅可以在加载的时候显示进度条,而且点击右侧的放大镜按钮可以查看原始