jQuery-onload让第一次页面加载时图片是淡入方式显示
$("#load img").load(function() {
//图片默认隐藏
$(this).hide();
//使用fadeIn特效
$(this).fadeIn("5000");
})
<div id="load" class="loading"><img src="images/apple_3_bigger.jpg" style=" height:auto" id='uu1'>
第一次打开一个页面时,让加载好的图片先隐藏,然后再执行动画fadeIn。
这里的load事件:当所有子元素已经被完全加载完成时,load事件被发送到这个元素。
相关推荐
-
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于3
-
使用jQuery实现图片遮罩半透明坠落遮挡
默认九宫格图片排列效果,当鼠标悬停在图片上后,会从图片的上方下滑一个半透明遮罩的效果 同时出现一些文字介绍 使用方法: 1.将head中的css样式引入到你的网页中 2.将代码部分拷贝到你的网页body结束前的地方即可 (js.图片采用绝对路径,不建议修改) 复制代码 代码如下: $(function(){ $('.sgw_img dt').hover(function(){ $(this).children('.box').stop(true,true).delay(1
-
基于Jquery的简单图片切换效果
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascrip
-
jQuery图片轮播的具体实现
效果如下: 先看一看html代码,以及对应的css代码: 复制代码 代码如下: <div id="scrollPics"> <ul class="slider" > <li><img src="images/ads/1.gif"/></li> <li><img src="images/ads/2.gif"/>&
-
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['
-
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
本文实例讲述了jQuery实现响应鼠标事件的图片透明效果.分享给大家供大家参考,具体如下: 实现的思想: 1.当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明) 2.当鼠标离开图片的时候触发mouseleave mouseout两个事件(图片变为不透明) 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
-
IE8下jQuery改变png图片透明度时出现的黑边
png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以上两种方法我试了试,好像效果并不好png8格式仍就会有黑边. 解决方法: 1.不要直接改变图片的透明度,而是给图片套个容器,去修改这个容器的透明度 2.给这个容器加个颜色相近的背景颜色(非常重要,解决bug的关键就在这一步,) 一般情况下,到此bug就解决了,如果还是有问题,请看下面: 3.给容器加
-
jQuery fadeTo方法调整图片的透明度使用介绍
复制代码 代码如下: <head> <title></title> <style type="text/css"> .imgclass{ width:300px; height:300px; border:solid 1px red;} </style> <script src="jquery-1.9.1.js" type="text/javascript"></scr
-
jQuery鼠标事件汇总
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. 1.click事件:点击鼠标左键时触发 $('p').click(function(){}); 示例: $('p').click(function(){ alert('click function is running !'); }); 2.dbclick事件:迅速连续的两次点击时触发 $('p').dbclick(function(){}); 示例: $("button").dblclick(function(){ $(&
-
jQuery响应鼠标事件并隐藏与显示input默认值
分享下jQuery如何隐藏和显示 input 默认值的例子. <!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> <
-
Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
随机推荐
- Golang如何实现任意进制转换的方法示例
- spring boot请求异常处理并返回对应的html页面
- 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
- go语言中使用timer的常用方式
- pjblog实现类似CMS的首页调用
- 往Android系统中添加服务的方法教程
- Mysql数据库安装完成后需要进行的6个后续操作
- 超简单JS二级、多级联动的简单实例
- Java的GUI编程之列表和组合框的设计使用
- php简单封装了一些常用JS操作
- php 使用array函数实现分页
- C语言安全编码之数值中的sizeof操作符
- 安装Apache和PHP的一些补充
- js选择日期
- 通过特性(attribute)为枚举添加更多信息示例
- c#委托把方法当成参数(实例讲解)
- C#排序算法的比较分析
- PHP中$_SERVER使用说明
- 用原生VideoView进行全屏播放时的问题
- .net MVC使用IPrincipal进行Form登录即权限验证(3)