澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

jq演示动画,使用JQ来编写最基本的淡入淡出效果

jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求。其实质就是JavaScript

使用JQ来编写最基本的淡入淡出效果附演示动画,jq演示动画

jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求。其实质就是JavaScript

下面来编写一个最基本的JQ程序来说明JQ。

一、基本目标

网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环。

图片 1

二、制作过程

1.首先你要到JQ官网中下载一个JQ支持文件放入你的站点文件夹。这个支持文件是jQuery1.11,可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11,而不是不兼容旧浏览器IE6的jQuery2。

2.整个网页代码如下,再分片段进行说明:

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
$(document).ready(function() { 
$("#hide").click(function() { 
$("#text").hide(); 
}); 
$("#show").click(function() { 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
$("#text").toggle(); 
}); 
}); 
</script> 

<!-- 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

--> 

<title>JQ淡出与显示</title> 

</head> 
<body> 

<p id="text"> 
被折腾的文本 
</p> 

<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body> 

</html>

(1)<body>部分

<head>部分主要是实现核心代码部分,放在后面来讲,先说<body>部分

<body> 
<!--这是定义一段ID为text的文本,便于脚本控制--> 
<p id="text"> 
被折腾的文本 
</p> 

<!--分别设置ID为hide,show,toggle的按钮--> 
<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body> 

(2)<head>部分

<head> 
<!--网页的编码,声明要使用JQ--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
<!--JQ的代码编写首先要用$(document).ready(function() {});去定义一个总函数,缺少这个函数提供的框架之后的东西无法执行--> 
$(document).ready(function() { 
<!--之后再于这个函数内编写需要的函数--> 
<!--对于ID为hide这个按钮的click动作进行函数的调用,之后的动作依旧放在这个一个函数的里面--> 
$("#hide").click(function() { 
<!--隐藏ID的为text的文本--> 
$("#text").hide(); 
}); 
$("#show").click(function() { 
<!--显示ID的为text的文本--> 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
<!--在隐藏与显示之间切换ID的为text的文本--> 
$("#text").toggle(); 
}); 
}); 
</script> 

lt;!--这段控制默认是显示还是不显示 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

-> 

<title>JQ淡出与显示</title> 

</head>

下面来编写一个最基本的JQ程序来说明JQ。

哪位哥哥姐姐可以告诉我怎实现页面跳转淡入淡出的效果,最好是JS的,我的背景也是一张图,所以要整个页面

1:首先去网上下个最新的JQ 1.5.2文件包含在这个页面
2:在页面加入如下代码,就可以了淡入了
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000); //这个值,自己根据需要设定
});
</script>

IE6-8,火狐,opera,chrome,safari全部通过  

一、基本目标

jq图片切换问题,想要把滚动改为淡入淡出,代码

给你写了个jquery的 需要手动加载jquery插件

=======================js部分===========================
<script>
$(function(){
i=0;
n=$(".box").children().length;
time=setInterval("xianyin()",10000);//设置自动播放时间一万毫秒(10秒)
//time=window.clearInterval(time);//清除自动播放
})
function xianyin() {
i=i 1;
//alert(i);
$(".box li").hide();
$(".box li:eq(" i ")").fadeIn(500);//设置透明度变化快慢为500毫秒,删除这个数字即无透明度变化效果
if(i==n-1){
i=-1;
}

}
</script>

=======================css部分===========================

<style>
.box {
position:relative;
}
.box>li {
display:none;
}
</style>

=======================html部分===========================

<div class="box">
<li style="display:block;">1<img src="1.jpg" /></li>
<li>2<img src="2.jpg" /></li>
<li>3<img src="3.jpg" /></li>
<li>4<img src="4.jpg" /></li>
<li>5<img src="5.jpg" /></li>
</div>  

jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不...

网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环。

图片 2

二、制作过程

1.首先你要到JQ官网中下载一个JQ支持文件放入你的站点文件夹。这个支持文件是jQuery1.11,可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11,而不是不兼容旧浏览器IE6的jQuery2。

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:jq演示动画,使用JQ来编写最基本的淡入淡出效果

相关阅读