js页面载入特效如何实现

一、总结

一句话总结:可以加选择器(里面的字符串)作为参数,这样函数就可以针对不同选择器,就很棒了。

1、特效的原理是什么?

都是通过标签的位置和样式来实现特效的。

二、js页面载入特效如何实现

 /*
* 1、每种特效分为快中慢(l,m,s)
* 2、弄一个随机特效函数random,通过数组实现,也分为快中慢(l,m,s),通过时间参数来实现
* */
/******************************1、通用函数******************************/
var speed=new Array();
speed['l']=200;
speed['m']=500;
speed['s']=800;
//alert('11');
//随机特效函数
function randomp(width,height,time) { }
//
/******************************2、页面平滑载入函数(slide)******************************/
/*
* 1、左上右下
* left top right bottom
* 2、斜的
* leftTop topRight rightBottom bottomLeft
* */ var slideArr=new Array(
'slideLeft',
'slideTop',
'slideRight',
'slideBottom',
'slideLeftTop',
'slideTopRight',
'slideRightBottom',
'slideBottomLeft'
); function slideRandom_l(width,height,time=speed.l) {
slideRandom(width,height,time)
// var length=slideArr.length;
// var index=Math.floor(Math.random()*length);
// var functionName=slideArr[index];
// //alert(functionName);
// //alert(functionName+'('+width+','+height+','+time+')')
// eval(functionName+'('+width+','+height+','+time+')'); }
function slideRandom_m(width,height,time=speed.m) {
slideRandom(width,height,time)
}
function slideRandom_s(width,height,time=speed.s) {
slideRandom(width,height,time)
} function slideRandom(width,height,time) {
var length=slideArr.length;
var index=Math.floor(Math.random()*length);
var functionName=slideArr[index];
//alert(functionName);
//eval(functionName+'(width,height,time)');
//alert(functionName+'('+width+','+height+','+time+')')
eval(functionName+'('+width+','+height+','+time+')'); } function slideLeft(width,height,time) {
$('body').animate({
'left': '-'+width,
opacity: '0'
}, 0,'linear');
$('body').animate({
'left': '0',
opacity: '1'
}, time,'linear');
}
function slideTop(width,height,time) {
$('body').animate({
'top': '-'+height,
opacity: '0'
}, 0,'linear');
$('body').animate({
'top': '0',
opacity: '1'
}, time,'linear');
}
function slideRight(width,height,time) {
$('body').animate({
'left': '+'+width,
opacity: '0'
}, 0,'linear');
$('body').animate({
'left': '0',
opacity: '1'
}, time,'linear');
}
function slideBottom(width,height,time) {
$('body').animate({
'top': '+'+height,
opacity: '0'
}, 0,'linear');
$('body').animate({
'top': '0',
opacity: '1'
}, time,'linear');
}
function slideLeftTop(width,height,time) {
$('body').animate({
'left': '-'+width,
'top': '-'+height,
opacity: '0'
}, 0,'linear');
$('body').animate({
'left': '0',
'top': '0',
opacity: '1'
}, time,'linear');
}
function slideTopRight(width,height,time) {
$('body').animate({
'left': '+'+width,
'top': '-'+height,
opacity: '0'
}, 0,'linear');
$('body').animate({
'left': '0',
'top': '0',
opacity: '1'
}, time,'linear');
}
function slideRightBottom(width,height,time) {
$('body').animate({
'left': '+'+width,
'top': '+'+height,
opacity: '0'
}, 0,'linear');
$('body').animate({
'left': '0',
'top': '0',
opacity: '1'
}, time,'linear');
}
function slideBottomLeft(width,height,time) {
$('body').animate({
'left': '-'+width,
'top': '+'+height,
opacity: '0'
}, 0,'linear');
$('body').animate({
'left': '0',
'top': '0',
opacity: '1'
}, time,'linear');
} /******************************3、什么样式(slide)******************************/
 

js页面载入特效如何实现的更多相关文章

  1. 页面优化——js异步载入

    同步载入 在介绍js异步载入之前.我们先来看看什么是js同步载入.我们平时最常使用的就是这样的同步载入形式: <script src="http://XXX.com/script.js ...

  2. 如何提高ASP.NET页面载入速度的方法

    前言 本文是我对ASP.NET页面载入速度提高的一些做法,这些做法分为以下部分: 1.采用 HTTP Module 控制页面的生命周期. 2.自定义Response.Filter得到输出流stream ...

  3. HTML 页面载入 Flash 插件的几种方法

    前言 之所以写这篇文章,主要是由于组长给提的一个新的需求--使用浏览器调用电脑的摄像头,来实现即时拍照的功能.在网上查了非常多资料,由于这样那样的原因,终于选择了使用flash插件来调用pc的摄像头. ...

  4. js页面加载完后执行(document.onreadystatechange 和 document.readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  5. 提高ASP.NET页面载入速度的方法

    前言 本文是我对ASP.NET页面载入速度提高的一些做法,这些做法分为以下部分: 目录 1.采用 HTTP Module 控制页面的生命周期. 2.自定义Response.Filter得到输出流str ...

  6. jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

    1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...

  7. 新手遇到的问题:Easy UI的对话框老是在页面载入完毕后自己主动弹出

    因为是第一次接触Easy UI,还不是非常熟悉,尝试了一下对话框功能,还是非常不错的.但问题是页面载入完毕后.全部的对话框都自己主动弹出来了,百度了好久,也没有详细说明确的,貌似别人都没有这个问题哦 ...

  8. jQuery的页面载入

    jQuery 页面载入 $(document).ready(function(){ //程序段 }) 原生javaScript window.onload = function(){ //程序段 } ...

  9. js页面跳转整理

    js页面跳转整理 js方式的页面跳转1.window.location.href方式    <script language="javascript" type=" ...

随机推荐

  1. apache 使用 mod_fcgid.so模块时 配置指令

    FcgidBusyScanInterval指令 说明:扫描繁忙超时进程的间隔 语法: FcgidBusyScanInterval seconds 默认:FcgidBusyScanInterval 12 ...

  2. js10---call方法总结

    <html> <body> <script type="text/javascript"> function Obj(x, y){ this.x ...

  3. 建堆是 O(n) 的时间复杂度证明。

    建堆的复杂度先考虑满二叉树,和计算完全二叉树的建堆复杂度一样. 对满二叉树而言,第 \(i\) 层(根为第 \(0\) 层)有 \(2^i\) 个节点. 由于建堆过程自底向上,以交换作为主要操作,因此 ...

  4. C# 异步延时执行

    https://blog.csdn.net/xiawu1990/article/details/78350253?utm_source=blogxgwz7 var t = Task.Run(async ...

  5. 洛谷 P1893 山峰暸望

    P1893 山峰暸望 题目描述 一天,Bessie在眺望美丽的威斯康星的群山的时候,她突然产生了疑问:那座山是最宽的? 她决定在地平线上,利用她的新式大量程山峰高度测量仪依次做N (1 <= N ...

  6. 11. ZooKeeper之启动、停止服务。

    转自:https://blog.csdn.net/en_joker/article/details/78673607 启动服务 首先我们来看下如何启动ZooKeeper服务.常见的启动方式有两种. J ...

  7. 含有打印、统计DataGridView(1)

    using System;using System.Collections.Generic;using System.Text;using System.Drawing.Printing;using ...

  8. [转]DOM0,DOM2,DOM3事件处理方式区别

    转 DOM0,DOM2,DOM3事件处理方式区别 2016年07月13日 15:00:29 judyge 阅读数:1457更多 个人分类: js与前端   引子:        文档对象模型是一种与编 ...

  9. 一个简单http请求的jmeter压测实战流程

    1.新建线程组 2.创建http请求 注意:接口路径中的参数值要写变量 3.创建txt文件,存多个参数值 4.创建csv文件,在csv中上传txt文件 5.variable name填写txt中参数值 ...

  10. POJ 1166 The Clocks 高斯消元 + exgcd(纯属瞎搞)

    依据题意可构造出方程组.方程组的每一个方程格式均为:C1*x1 + C2*x2 + ...... + C9*x9 = sum + 4*ki; 高斯消元构造上三角矩阵,以最后一个一行为例: C*x9 = ...