jQuery+CSS3实现404背景动画特效

效果:http://hovertree.com/texiao/jquery/74/源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm效果图如下:代码如下:转自

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

效果:
http://hovertree.com/texiao/jquery/74/

源码下载:
http://hovertree.com/h/bjaf/ko0gcgw5.htm

效果图如下:
jQuery+CSS3实现404背景动画特效

代码如下:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery+CSS3实现404背景动画特效 - 何问起</title><base target="_blank" /> <link href="http://hovertree.com/texiao/jquery/74/css/404.css" rel="stylesheet" type="text/css" /> <script src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { var h = $(window).height(); $('body').height(h); $('.mianBox').height(h); centerWindow(".tipInfo"); }); //2.将盒子方法放入这个方,方便法统一调用 function centerWindow(a) { center(a); //自适应窗口 $(window).bind('scroll resize', function() { center(a); }); } //1.居中方法,传入需要剧中的标签 function center(a) { var wWidth = $(window).width(); var wHeight = $(window).height(); var boxWidth = $(a).width(); var boxHeight = $(a).height(); var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); var top = scrollTop + (wHeight - boxHeight) / 2; var left = scrollLeft + (wWidth - boxWidth) / 2; $(a).css({ "top": top, "left": left }); } </script> </head> <body> <div class="mianBox"> <img src="http://hovertree.com/texiao/jquery/74/images/yun0.png" alt="" class="yun yun0" /> <img src="http://hovertree.com/texiao/jquery/74/images/yun1.png" alt="" class="yun yun1" /> <img src="http://hovertree.com/texiao/jquery/74/images/yun2.png" alt="" class="yun yun2" /> <img src="http://hovertree.com/texiao/jquery/74/images/bird.png" alt="鸟" class="bird" /> <img src="http://hovertree.com/texiao/jquery/74/images/san.png" alt="何问起" class="san" /> <div class="tipInfo"> <div class="in"> <div class="textThis"> <h2>页面不存在</h2> <p><span>页面将自动<a id="href" href="http://hovertree.com/h/bjaf/tiaosan.htm">跳转</a></span><span>等待<b id="wait">60</b></span></p> <script type="text/javascript"> (function() { var wait = document.getElementById('wait'), href = document.getElementById('href').href; var interval = setInterval(function() { var time = --wait.innerHTML; if (time <= 0) { location.href = href; clearInterval(interval); } ; }, 1000); })(); </script> </div> </div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/tiaosan.htm">原文</a></p> </div> </body> </html>

转自:http://hovertree.com/h/bjaf/tiaosan.htm

特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120381.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • filter suction_dispatcher

    filter suction_dispatcherFilterDispatcher是struts2.0.x到2.1.2版本的核心过滤器.! StrutsPrepareAndExecuteFilter是自2.1.3开始就替代了FilterDispatcher的.!  StrutsPrepareAndExecuteFilter概要说明        FilterDispatcher是早期struts2的过滤器,后期的都…

  • linux ebpf_防火墙拦截dns解析

    linux ebpf_防火墙拦截dns解析自基于Netfilter的iptables取代ipchains之后,Linux防火墙技术貌似一直停留在iptables,虽然近年来nftables被宣称有取代iptables之势,但事实上并无起色。无论是晚期ipchains,还是iptables,或者nftables,其底层基础均是Netfilter,一个精心设计的五点HOOKs框架,在软件意义上,这个设计非常棒,但是涉及到单机性能问题,总是退…

  • centos7下kafka集群搭建

    centos7下kafka集群搭建概述集群安装或者单机安装都可以,这里介绍集群安装。Kafka本身安装包也自带了zookeeper,也可以使用其自带的zookeeper。建议试用自己安装的zookeeper,本教程试用单独安装的zookeeper。安装环境3台centos7虚拟机:10.15.21.6210.10.182.16810.10.182.169kafka_2.10-0.10.2.0zookeeper-3.4.9

  • 好用的Redis客户端操作工具[通俗易懂]

    好用的Redis客户端操作工具[通俗易懂]日常开发过程中,项目常常都会使用Redis来做缓存或者Session服务器,为了更直观方便,开发者常常会使用一些可视化工具,如RedisDesktopManager、RedisClent等,但界面UI做得不尽人意,作为当今时代,对软件的UI还是有所期待的,今天给大家分享一款,高颜值、功能强大的Redis客户端工具。AnotherRedisDesktopManager一个更快、更好、更稳定的redis桌面管理工具,可以运行于Linux、Windows、Mac三大平台,并且当加载大数量的key不.

  • 久坐提醒 android wear,这五个理由告诉你为什么需要一块智能手表![通俗易懂]

    久坐提醒 android wear,这五个理由告诉你为什么需要一块智能手表![通俗易懂]来源:驱动号作者:2019-06-14/17:15访问量:摘要智能化可穿戴设备现如今已经普及,如果你还没有一块智能手表,现在是时候戴一下了。智能手表与智能手机相比,带来的都是潜在性的好处。虽然智能手表并不能保证你一定会多运动,也不能保证你一定会少玩手机。但是它可以提供一种让生活更好的选择,这种选择可能就足以改变我们的生活。过去的几年,关于智能手表的讨论都是”要不要买一款智能手表”,而…

  • C++ char 转 int[通俗易懂]

    C++ char 转 int[通俗易懂]charcc[20]=”-100″;intdd;dd=atoi(cc);

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号