<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
var snow_size = new Array(); //大小；
var snow_color = new Array(); //颜色
var num = 30; //个数
var smallest = 5; //最小像素的雪花
var largest = 30; //最大像素（35）
var dx = new Array(); //
var x_pos = new Array();
var y_pos = new Array();
var x_amplitude = new Array();
var x_step = new Array();
var y_step = new Array();
var win_width;
var win_height;
var scroll_x;
var scroll_y;
var interval = 100; //毫秒
var orcolor=true;
function make_size(){
return smallest + Math.random()*largest;
}
function make_color(){
if(orcolor){
for(i=0; i<num; i++){
snow_color[i] = '#ffffff';
}
}else{
for(i=0; i<num; i++){
A = Math.ceil(Math.random()*255);
B = Math.ceil(Math.random()*255);
C = Math.ceil(Math.random()*255);
snow_color[i] = 'rgb(' + A + ',' + B + ',' + C + ')';
}
}
}
function make_color2(){
}
function init(){
var id_body = document.getElementById("id_body");
win_width = window.innerWidth ? window.innerWidth : id_body.clientWidth;
win_height = window.innerHeight ? window.innerHeight : id_body.clientHeight;
scroll_x = id_body.scrollLeft;
scroll_y = id_body.scrollTop;
make_color2();
for(i=0; i<num; i++){
dx[i] = 0;
x_pos[i] = Math.random()*(win_width + scroll_x - 40);
y_pos[i] = Math.random()*(win_height + scroll_y);
x_amplitude[i] = Math.random()*20;
snow_size[i] = make_size();
x_step[i] = 0.02 + Math.random()/10;
y_step[i] = 0.7 + Math.random();
}
}
function add_div(){
var id_body = document.getElementById("id_body");
win_width = window.innerWidth ? window.innerWidth : id_body.clientWidth;
win_height = window.innerHeight ? window.innerHeight : id_body.clientHeight;
scroll_x = id_body.scrollLeft;
scroll_y = id_body.scrollTop;
make_color();
for(i=0; i<num; i++){
dx[i] = 0;
x_pos[i] = Math.random()*(win_width + scroll_x - 40);
y_pos[i] = Math.random()*(win_height + scroll_y);
x_amplitude[i] = Math.random()*20;
snow_size[i] = make_size();
x_step[i] = 0.02 + Math.random()/10;
y_step[i] = 0.7 + Math.random();
document.write("<div id='snow_"+i+"' style='position: absolute;z-index: eval(30"+ i +"); visibility: visible; top: 15px; left:15px; font-size:"+snow_size[i]+"px"+";color:"+snow_color[i]+"'>*</div>");
}
}
function snow(){
var id_body = document.getElementById("id_body");
win_width = window.innerWidth ? window.innerWidth : id_body.clientWidth;
win_height = window.innerHeight ? window.innerHeight : id_body.clientHeight;
scroll_x = id_body.scrollLeft;
scroll_y = id_body.scrollTop;
for(i=0; i<num; i++){
y_pos[i] += y_step[i];
if (y_pos[i] > win_height + scroll_y - 50){
x_pos[i] = Math.random()*(win_width + scroll_x - x_amplitude[i] -20);
y_pos[i] = 0;
x_step[i] = 0.02 + Math.random()/10;
y_step[i] = 0.7 + Math.random();
}
dx[i] += x_step[i];
document.getElementById("snow_"+i).style.top = y_pos[i];
document.getElementById("snow_"+i).style.left = x_pos[i] + x_amplitude[i]*Math.sin(dx[i]);
}
setTimeout("snow()",interval);
}
function orclick(){
if(orcolor){
orcolor = false;}
else{orcolor = true;}
alert(orcolor);
}
</script>
<body id="id_body" style="background-color:#666666;">
<table height="700px" width="300px" align="center">
<tr height="200px"><td></td></tr>
<tr height="21px">
</tr>
<tr height="21px">
</tr>
</table>
<script type="text/javascript">
add_div();
snow();firefox没效果要IE的
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
var snow_size = new Array(); //大小；
var snow_color = new Array(); //颜色
var num = 30; //个数
var smallest = 5; //最小像素的雪花
var largest = 30; //最大像素（35）
var dx = new Array(); //
var x_pos = new Array();
var y_pos = new Array();
var x_amplitude = new Array();
var x_step = new Array();
var y_step = new Array();
var win_width;
var win_height;
var scroll_x;
var scroll_y;
var interval = 100; //毫秒
var orcolor=true;
function make_size(){
return smallest + Math.random()*largest;
}
function make_color(){
if(orcolor){
for(i=0; i<num; i++){
snow_color[i] = '#ffffff';
}
}else{
for(i=0; i<num; i++){
A = Math.ceil(Math.random()*255);
B = Math.ceil(Math.random()*255);
C = Math.ceil(Math.random()*255);
snow_color[i] = 'rgb(' + A + ',' + B + ',' + C + ')';
}
}
}
function make_color2(){
}
function init(){
var id_body = document.getElementById("id_body");
win_width = window.innerWidth ? window.innerWidth : id_body.clientWidth;
win_height = window.innerHeight ? window.innerHeight : id_body.clientHeight;
scroll_x = id_body.scrollLeft;
scroll_y = id_body.scrollTop;
make_color2();
for(i=0; i<num; i++){
dx[i] = 0;
x_pos[i] = Math.random()*(win_width + scroll_x - 40);
y_pos[i] = Math.random()*(win_height + scroll_y);
x_amplitude[i] = Math.random()*20;
snow_size[i] = make_size();
x_step[i] = 0.02 + Math.random()/10;
y_step[i] = 0.7 + Math.random();
}
}
function add_div(){
var id_body = document.getElementById("id_body");
win_width = window.innerWidth ? window.innerWidth : id_body.clientWidth;
win_height = window.innerHeight ? window.innerHeight : id_body.clientHeight;
scroll_x = id_body.scrollLeft;
scroll_y = id_body.scrollTop;
make_color();
for(i=0; i<num; i++){
dx[i] = 0;
x_pos[i] = Math.random()*(win_width + scroll_x - 40);
y_pos[i] = Math.random()*(win_height + scroll_y);
x_amplitude[i] = Math.random()*20;
snow_size[i] = make_size();
x_step[i] = 0.02 + Math.random()/10;
y_step[i] = 0.7 + Math.random();
document.write("<div id='snow_"+i+"' style='position: absolute;z-index: eval(30"+ i +"); visibility: visible; top: 15px; left:15px; font-size:"+snow_size[i]+"px"+";color:"+snow_color[i]+"'>*</div>");
}
}
function snow(){
var id_body = document.getElementById("id_body");
win_width = window.innerWidth ? window.innerWidth : id_body.clientWidth;
win_height = window.innerHeight ? window.innerHeight : id_body.clientHeight;
scroll_x = id_body.scrollLeft;
scroll_y = id_body.scrollTop;
for(i=0; i<num; i++){
y_pos[i] += y_step[i];
if (y_pos[i] > win_height + scroll_y - 50){
x_pos[i] = Math.random()*(win_width + scroll_x - x_amplitude[i] -20);
y_pos[i] = 0;
x_step[i] = 0.02 + Math.random()/10;
y_step[i] = 0.7 + Math.random();
}
dx[i] += x_step[i];
document.getElementById("snow_"+i).style.top = y_pos[i];
document.getElementById("snow_"+i).style.left = x_pos[i] + x_amplitude[i]*Math.sin(dx[i]);
}
setTimeout("snow()",interval);
}
function orclick(){
if(orcolor){
orcolor = false;}
else{orcolor = true;}
alert(orcolor);
}
</script>
<body id="id_body" style="background-color:#666666;">
<table height="700px" width="300px" align="center">
<tr height="200px"><td></td></tr>
<tr height="21px">
</tr>
<tr height="21px">
</tr>
</table>
<script type="text/javascript">
add_div();
snow();firefox没效果要IE的
</script>
</body>
</html>
分享到：
发表评论
-
HTML <object> 标签
2010-03-04 22:31 841定义和用法 定义一个嵌入的对象。请使用此元素向您的 XHTML ... -
js代码：字符动画
2010-03-04 22:30 839<!DOCTYPE html PUBLIC " ... -
js代码：浏览器状态栏飞入文字
2010-03-04 22:29 1230<!DOCTYPE html PUBLIC " ... -
CSS+DIV实现的页面优化代码
2010-03-04 22:28 632<!DOCTYPE html PUBLIC " ... -
IE捉迷藏问题及解决方案
2010-03-04 22:28 998<!DOCTYPE html PUBLIC " ... -
js代码：渐变图形
2010-03-04 22:26 806<!DOCTYPE html PUBLIC " ... -
正则表达式菜鸟入门
2010-03-04 22:25 723常用的正则表达式主 ... -
jquery学习资料
2010-03-04 22:23 804今天开始看看jquery类库 这是我接触的第三个类库 之前有e ... -
jquery菜鸟入门
2010-03-04 22:23 788转自：http://hi.baidu.com/%B7%C9%D ... -
设置flash透明使div层能显示在其之上
2010-03-04 22:21 1019给flash加上这句代码<param name=&quo ... -
Ajax原理步骤
2010-03-04 22:21 1077核心：XMLHttpRequest对象 属性 ... -
ruby打包成gem
2010-03-04 22:20 1319gem 打包： gem build xxx.rb gem 安装 ... -
prototype Ajax.Updater
2010-03-04 22:19 735var url = "/edit/find_topi ... -
ruby日期指令
2010-03-04 22:17 990%A 周日期全称 Saturday %a 周日期缩写 %B ...
相关推荐
### 网页特效代码：樱花飘落、下雪、花瓣飞舞等 在现代网页设计中，为了增强用户体验和视觉吸引力，开发人员经常会在页面上加入各种动态效果。本篇将详细介绍如何利用HTML、CSS以及JavaScript来实现诸如樱花飘落、...
在这个压缩包中，很可能包含了一个用于实现全屏飘落雪花的JavaScript代码示例。下面，我们将深入探讨如何使用JavaScript来创建这样的特效，以及相关的知识点。 首先，JavaScript是一种轻量级的解释型编程语言，广泛...
5. **jQuery**：如果项目中使用了jQuery库，那么JavaScript代码可以变得更简洁。jQuery提供了方便的DOM操作、事件处理和动画功能，可以简化雪花效果的实现。 6. **Bootstrap**：虽然在标题和描述中提到，但...
【雪花屏幕飘落H5特效代码】是一种常见的网页动态效果，尤其在冬季或者特定节日时，可以为网站增添温馨和浪漫的氛围。这种特效利用HTML5（H5）的特性，结合JavaScript（JS）原生代码来实现。下面将详细解释这个特效...
这个特效可以通过纯CSS代码实现，无需JavaScript的介入，使得网页背景呈现出浪漫的冬季景象，用户可以看到雪花从屏幕顶部缓缓飘落，并在底部堆积。 首先，我们需要创建HTML结构。一个简单的HTML文件可能只包含一个`...
然后，在JavaScript代码中，他们会初始化Two.js的实例，加载背景图片，并设置Snow.js的参数，如雪花的数量、速度范围等。接着，通过监听窗口的resize事件确保背景图片和雪花在窗口尺寸变化时能自适应调整。最后，...
这通常是指在特定的电商网站（如天猫、淘宝）上，为了营造节日氛围或增强用户体验，通过编程技术实现在页面上显示动态雪花飘落效果的一种代码实现方式。 ### 一、雪花悬浮效果的实现原理 雪花悬浮效果的实现主要...
3. **js**：这个文件夹包含了JavaScript代码，其中的文件可能是实现雪花飘落效果的主要脚本。这个脚本可能包含了定义雪花对象、控制动画循环、处理用户交互等核心功能。 总的来说，"3D效果雪花飘落"是一个利用HTML...
这个特效主要是通过JavaScript（JS）和CSS样式来创建一个动态的、雪花飘落的视觉效果，为网页增添节日气氛。以下是关于这个项目的详细知识点： 1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的画布元素，...
在这个教程中，我们将关注如何利用ActionScript 2.0或3.0来制作一个简单的雪花飘落场景。 首先，我们需要理解ActionScript的基础语法。ActionScript是基于ECMAScript的一种脚本语言，它的语法类似于JavaScript。在...
4. 绘制雪花：利用`canvas`的`context`对象，根据每个雪花的属性在画布上绘制雪花。 5. 检查边界：当雪花到达屏幕边缘时，重新设置其位置，模拟无限循环的效果。 6. 随机性：为了增加真实感，雪花的生成、速度、大小...
标题中的"js原生态雪花全屏飘落特效"指的是使用纯JavaScript编写的代码，不依赖任何外部库（如jQuery或React等），以实现全屏范围内的雪花飘落动画。这种特效的实现涉及到以下几个关键知识点： 1. **CSS样式**：...
"js特效--雪花飘效果"是指使用JavaScript实现的一种常见的视觉特效，即在网页背景上模拟真实环境中雪花缓缓飘落的场景，给用户带来冬季的视觉体验。 实现这种雪花飘落效果主要涉及到JavaScript的核心知识，包括DOM...
接下来，我们编写JavaScript代码（假设为"jiaoben6462.js"），在其中定义雪花的形状、大小、颜色等属性，并创建一个数组存储所有雪花对象。然后，利用`requestAnimationFrame`函数实现动画循环，不断更新雪花的位置...
2. 绘制雪花：利用canvas或者CSS3的transform属性，将每个雪花的位置和旋转角度更新到屏幕。 3. 动画循环：通过requestAnimationFrame函数实现连续的动画帧，每次迭代时更新雪花的位置并清除上一帧的图像。 4. 检测...
4. **JavaScript/jQuery代码**：核心部分是JavaScript代码，它创建并控制雪花的运动。首先，通过JavaScript生成多个雪花元素，并将它们随机添加到页面中。然后，为每个雪花设置初始位置和速度，使用`setInterval`...
总的来说，“圣诞节雪花飘落jQuery特效”是JavaScript和jQuery技术在网页交互设计中的巧妙运用，它展示了如何通过编程技术增强网页的用户体验，为网站增添趣味性和节日气氛。通过学习和实践此类特效，开发者可以提升...
img目录可能包含了一些静态资源，比如背景图片或者图标，这些可能被用于增强整体的视觉效果，但在这个特定的案例中，主要的动画效果是由JavaScript代码动态生成的。 总的来说，这个项目展示了如何结合jQuery的便利...