js特效,页面下雪的小例子
if (arr[i]){
var ofs=$(this).offset();
var x=parseInt(ofs.left);
var y =parseInt(ofs.top);
var vy=parseInt($(this).attr("vy"));
x +=wind;
vy *= ay;
y+= vy;
$(this).offset({"top":y});
$(this).offset({"left":x});
if(y>winHeight){
$(this).remove();
delete arr[i];
}
这就是它的核心代码,没有什么神秘的.我也就不多做解释了.BYE.
相关推荐
-
JS实现模拟风力的雪花飘落效果
本文实例讲述了JS实现模拟风力的雪花飘落效果.分享给大家供大家参考.具体实现方法如下: <!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"> <
-
Javascript实现多彩雪花从天降散落效果的方法
本文实例讲述了Javascript实现多彩雪花从天降散落效果的方法.分享给大家供大家参考.具体分析如下: 先来看看运行效果,如下图所示: 完整源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu
-
使用js实现雪花飘落效果
今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码 代码如下: <html> <head> <script> function start(){ var array=new Array(); var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); for(var i=0;i<50;i++){ var
-
使用javascript实现雪花飘落的效果
看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对left和top的操作仅支持IE浏览器,这咋行,必须得支持chrome. 2.控制图片下落的过程还要去检索element,不好吧,那就改成数组维持,直接操作数组中维持的对象,启不更快. 3.向文档中添加元素直接改成通过JS代码创建元素对象的方式. 实现思路: 1.初始化生成10个div,全都采用绝对定位
-
用js代码和插件实现wordpress雪花飘落效果的四种方法
冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els
-
下雪了 javascript实现雪花飞舞
本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下 原理: 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 效果预览:http://wjf444128852.github.io/demo02/snow/index.html HTML代码: <!DOCTYPE html> <html lang="en&qu
-
js特效,页面下雪的小例子
复制代码 代码如下: if (arr[i]){ var ofs=$(this).offset(); var x=parseInt(ofs.left); var y =parseInt(ofs.top); var vy=parseInt($(this).attr("vy")); x +=wind; vy *=
-
js 验证密码强弱的小例子
页面代码: 复制代码 代码如下: <table> <tr><td><input type="text" id="txtPwd" /></td></tr> <tr><td> <table id="pwdLever"> <tr>
-
JS控制日期显示的小例子
我们在项目中一般会遇到显示时间的问题,一般的处理方式是在前台通过JS控制,JS控制显示时间的代码如下,各种不同的显示方式: 复制代码 代码如下: function Clock() { var date = new Date(); this.year = date.getFullYear(); this.month = date.getMonth() + 1; this.date = date.getDate(); this.day = new Array("星期日", "星期
-
JS获取地址栏参数的小例子
复制代码 代码如下: $(document).ready(function () { var locurl = location.href; var start = locurl.indexOf("?"); var end = locurl.length; var tempstr = locurl.substring(start + 1, end) var temp = tempstr.split("=&q
-
Js注册协议倒计时的小例子
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> 注册 </TITLE> <META NAME="Email" CONTENT="12345678@qq.com"> <META NAME="Author"
-
.net输出重写压缩页面文件的小例子
不知你是否留意过,有一些网站的html代码都是混在一起,没有任何空格和换行等多余字符.它的好处不用多说--界面大小绝对优化.或许您在想,他们这样做大大降低了可读性.的确,我们看是很乱,只能借用第三方软件重新布局代码.但是,我想他们开发时使用的源码不可能是混一团,前不久发现一个页面基类,大概可以解释这个问题,不多说,看源码: 复制代码 代码如下: using System;using System.Data;using System.Configuration;using System.Web;u
-
页面点击小红心js实现代码
效果图 核心代码 love.js !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width:
-
JS实现页面炫酷的时钟特效示例
目录 一.前言 二.想法设计/实现过程 三.基本样式 四.时间函数控制器 五,时,分,秒占位 六.时间动态填充 一.前言 今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页面. 特点就是炫酷,特效好,个人以心情愉快的感觉. 对于时间的变化,我打算使用翻页的特效来完成,色系的话采用黑色以主题,给人一种神秘的感觉. 而且要获取到本地的时间的数据来实时更新它的变化. 二.想法设计/实现过程 秉持着尽可能的美观炫酷,与用户的交互性好的原则,我初步的想法是,采用黑色系来增加可观性,
-
JS实现页面鼠标点击出现图片特效
本文实例为大家分享了js实现页面鼠标点击出现图片,供大家参考,具体内容如下 需求: 在页面可视区鼠标点击时,鼠标位置出现图片 技术: 监听器,鼠标坐标获取 效果图 源码分享: 图片是动态添加进页面的,所以没有HTML部分. JS let div = document.createElement("div"); div.id = "mouseImg"; for (let i =0 ; i <3 ;i++){ let img = document.createEl
-
一个小例子解释如何来阻止Jquery事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 <!DOCTYPE html PUBLIC "-//W3C//D
随机推荐
- vue.js中父组件调用子组件的内部方法示例
- 移除AngularJS下URL中的#字符的方法
- 腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
- javascript 面向对象编程基础:继承
- 基于java涉及父子类的异常详解
- java字符串的大写字母右移实现方法
- 对于Python中RawString的理解介绍
- php之Smarty模板使用方法示例详解
- c#定时运行程序分享(定时程序)
- 浅析JavaScript访问对象属性和方法及区别
- Centos6.5搭建java开发环境配置详解
- java集合map取key使用示例 java遍历map
- Go语言中你所不知道的位操作用法
- mysql 5.7.21 winx64免安装版配置方法图文教程
- Spring Boot 文件上传与下载的示例代码
- 解决bootstrap-select 动态加载数据不显示的问题
- 易语言送你999朵玫瑰花源码
- js字符串类型String常用操作实例总结
- Java 读取excel 文件流代码实例
- Android测试中Appium的一些错误解决技巧