jQuery实现打开页面渐现效果示例
本文实例讲述了jQuery实现打开页面渐现效果的方法。分享给大家供大家参考,具体如下:
思路:把页面中所有的标签放到一个div中,然后再在最后添加一个空div标签fadeDiv,用fadeDiv遮挡body使fadeDiv渐现
<head> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { var p = $("body"); var offset = p.offset(); $("#fadeDiv").css({ top: offset.top, left: offset.left, width: $("#bodyDiv").width(), height: $("body").height(), backgroundColor: "white", opacity: 1, position: "absolute" }); if (jQuery.isReady) { $("#fadeDiv").fadeOut(1000); } }) </script> </head> <body> <form id="form1"> <div id="bodyDiv"></div> <div id="fadeDiv"></div> </form> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jquery实现两个图片渐变切换效果的方法
本文实例讲述了jquery实现两个图片渐变切换效果的方法.分享给大家供大家参考.具体如下: 这段代码演示了jquery如何实现两个图片渐变切换的效果,为id=kitten的div设置一个背景图片,通过jquery对div进行淡入淡出实现两个图片的渐变切换 html代码 <div id="kitten"> <img src="/images/kitten.jpg" alt="Kitten" /> </div> j
-
jQuery实现渐变弹出层和弹出菜单的方法
本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh
-
jQuery实现的文字hover颜色渐变效果实例
本文实例讲述了jQuery实现的文字hover颜色渐变效果.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.j
-
基于jquery的direction图片渐变动画效果
还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果, 下面就开始我们的代码编写吧 html是比较简单的 代码 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv
-
jQuery实现渐变下拉菜单的简单方法
本文实例讲述了jQuery实现渐变下拉菜单的简单方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript"> $(function(){ $("#nav li").hover(function(){if(!$(this).children("#nav li ul").is(":animated")){$(this).ch
-
jquery实现模拟百分比进度条渐变效果代码
本文实例讲述了jquery实现模拟百分比进度条渐变效果代码.分享给大家供大家参考,具体如下: 这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/ 具体代码如下: <html> <head> <title>jquery模拟百分比进度条</title> <script
-
jQuery实现的立体文字渐变效果
先截两个图看看: 效果很不错吧?会不会误以为这些字体是图片?这可不是图片,而是用JS实现的 在线演示 http://demo.jb51.net/js/gradient-test/demo.htm 下面来简单分享下实现过程及原理(网站中使用了jquery这个lib,我们这里就不再自己单独实现了,我们这里分享的也是jquery的实现方法): HTML代码: 复制代码 代码如下: <span class="rainbows">© 2009 Dragon Interactive.
-
jQuery图片渐变特效的简单实现
jQuery图片渐变特效的简单实现 (document).ready(function() {(document).ready(function() {("div.baba").mouseleave(function() { ("span.aaa").stop().animate({opacity: '1'},600); });("span.aaa").stop().animate({opacity: '1'},600); });("d
-
jQuery实现鼠标点击弹出渐变层的方法
弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下 在弹出层中下面是核心代码 <script type="text/javascript"> // 渐变弹出层 $(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.s
-
jQuery实现打开页面渐现效果示例
本文实例讲述了jQuery实现打开页面渐现效果的方法.分享给大家供大家参考,具体如下: 思路:把页面中所有的标签放到一个div中,然后再在最后添加一个空div标签fadeDiv,用fadeDiv遮挡body使fadeDiv渐现 <head> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> &
-
Vue实现Header渐隐渐现效果的实例代码
新建header.vue组件 引入到父组件Detail.vue中 header.vue 通过router-link标签设置to属性为地址,实现点击返回首页 tag标签设为div,就有了div的属性 <template> <div class="header"> <router-link tag="div" to="/" class="header-abs"> <div class=&q
-
jquery简单实现带渐显效果的选项卡菜单代码
本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
-
jQuery实现动画、消失、显现、渐出、渐入效果示例
本文实例讲述了jQuery实现动画.消失.显现.渐出.渐入效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title></titl
-
Android开启动画之渐隐渐现效果
启动某项程序时我们往往都能看到不同的"开机动画",千变万化的动画也只不过是四种基本动画衍变美化而成的. 四种android动画效果: alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 最简单的莫过于渐变透明效果,单单这一种就可完成渐隐渐现的动画效果(用于渐现渐隐的可以是整个欢迎页面也可以是欢迎页面里的一部分): 1). 在res里新建anim文件夹
-
jQuery实现的页面遮罩层功能示例【测试可用】
本文实例讲述了jQuery实现的页面遮罩层功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
本文实例讲述了jQuery插件FusionCharts绘制ScrollColumn2D图效果.分享给大家供大家参考,具体如下: 1.index.html页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equi
-
jQuery+CSS实现的标签页效果示例【测试可用】
本文实例讲述了jQuery+CSS实现的标签页效果.分享给大家供大家参考,具体如下: CSS代码: #tabs{ width:600px; height:250px; background:white; margin:20px; } #tabs ul{ float:left; margin:20px 0 0 20px; padding:0; } #tabs li{ width:80px; height:40px; line-height:40px; display:inline-block; t
-
jQuery实现的网页换肤效果示例
本文实例讲述了jQuery实现的网页换肤效果.分享给大家供大家参考,具体如下: 现在许多后台网站都有换皮肤的效果,今天我用 jquery 写了这个效果,主要思路是改变 link 标签的 href 属性值. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>网页换肤效果</title&
-
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
本文实例讲述了jQuery flip插件实现的翻牌效果.分享给大家供大家参考,具体如下: 最近做了个类似于塔罗牌翻牌的效果,分享给大家. 运行效果图如下: 具体代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>flip</title> <style> *{margin:0;padd
随机推荐
- 详解Linux 主机网络接入配置
- JavaScript高级程序设计 阅读笔记(十九) js表格排序
- Python实现的彩票机选器实例
- jsp留言板源代码二: 给jsp初学者.
- gridview生成时如何去掉style属性中的border-collapse
- python实现数通设备tftp备份配置文件示例
- Jquery ajax加载等待执行结束再继续执行下面代码操作
- 使用asp代码突破163相册的防盗连
- jQuery实现图片走马灯效果的原理分析
- 把字符串转为HtmlTable演示动画
- 通用javascript代码判断版本号是否在版本范围之间
- C++函数的嵌套调用和递归调用学习教程
- 在Heroku云平台上部署Python的Django框架的教程
- Python基于回溯法子集树模板解决全排列问题示例
- 禁用Tab键JS代码兼容Firefox和IE
- PHP ignore_user_abort函数详细介绍和使用实例
- 网络管理之网关
- BGPMPLS VPN的实现技术
- python 实现将字典dict、列表list中的中文正常显示方法
- C语言实现二叉链表存储