jquery 背景图片渐现应该怎么写?
我想写一个鼠标经过文字切换整个页面背景的js,现在已经写好了。
但我想加一个背景图片渐现的特效,不知该如何弄了。
谢谢大家帮我。
<script type="text/javascript">
//加载资源列表
var manifest = [
{ id: "1", src: "uppic/1362014177563980.jpg" },
{ id: "2", src: "uppic/13620141783939831.jpg" },
{ id: "3", src: "uppic/13620141714540814.jpg" },
{ id: "4", src: "uppic/1362014173814289.jpg" },
{ id: "5", src: "uppic/13620141712842831.jpg"}
];
//定义加载对象
var queue = new createjs.LoadQueue(true);
//注册事件
queue.on("complete", handleComplete); //全部加载完
queue.loadManifest(manifest); //设置资源列表, 加载多个文件时使用. 还有个loadFile可以加载一个文件
function handleComplete(e) {
$(".index-mask").html("");
//所有文件加载完成
$(document).ready(function (e) {
$(".index .list").hover(function () {
$(".global-bg img").attr("src", $(this).attr("data-bg"));
$(".hover").stop().animate({opacity: '1'},1000);
}, function () {
$(".global-bg img").attr("src", "images/black.jpg");
});
});
}
</script>
<div class="global-bg">
<img src="images/black.jpg" class="img-block" alt="" />
</div>
<div class="index-mask">背景图片载入中... </div>
<div class="list l1" data-bg="/uppic/1362014177563980.jpg">
<div class="list l2" data-bg="/uppic/13620141783939831.jpg">
<div class="list l3" data-bg="/uppic/1362014177563980.jpg">
<div class="list l4" data-bg="/uppic/1362014177563980.jpg">
<div class="list l5" data-bg="/uppic/1362014177563980.jpg">
但我想加一个背景图片渐现的特效,不知该如何弄了。
谢谢大家帮我。
<script type="text/javascript">
//加载资源列表
var manifest = [
{ id: "1", src: "uppic/1362014177563980.jpg" },
{ id: "2", src: "uppic/13620141783939831.jpg" },
{ id: "3", src: "uppic/13620141714540814.jpg" },
{ id: "4", src: "uppic/1362014173814289.jpg" },
{ id: "5", src: "uppic/13620141712842831.jpg"}
];
//定义加载对象
var queue = new createjs.LoadQueue(true);
//注册事件
queue.on("complete", handleComplete); //全部加载完
queue.loadManifest(manifest); //设置资源列表, 加载多个文件时使用. 还有个loadFile可以加载一个文件
function handleComplete(e) {
$(".index-mask").html("");
//所有文件加载完成
$(document).ready(function (e) {
$(".index .list").hover(function () {
$(".global-bg img").attr("src", $(this).attr("data-bg"));
$(".hover").stop().animate({opacity: '1'},1000);
}, function () {
$(".global-bg img").attr("src", "images/black.jpg");
});
});
}
</script>
<div class="global-bg">
<img src="images/black.jpg" class="img-block" alt="" />
</div>
<div class="index-mask">背景图片载入中... </div>
<div class="list l1" data-bg="/uppic/1362014177563980.jpg">
<div class="list l2" data-bg="/uppic/13620141783939831.jpg">
<div class="list l3" data-bg="/uppic/1362014177563980.jpg">
<div class="list l4" data-bg="/uppic/1362014177563980.jpg">
<div class="list l5" data-bg="/uppic/1362014177563980.jpg">
...全文
相关推荐
jquery换背景图片点击改变背景图片代码
本文将深入探讨如何使用 jQuery 来实现点击按钮或元素时改变页面背景图片的功能。
jquery动画背景图片
div的ID,`images`数组存储了所有要展示的图片URL,`fadeOut`和`fadeIn`分别用于渐隐和渐现当前背景,`css`方法用来设置新的背景图片。
jQuery点击切换背景图片代码
接下来,我们需要编写JavaScript(jQuery)代码来处理点击事件并切换背景图片。
jQuery动态移除和添加背景图片的方法详解
本文将深入探讨如何利用jQuery动态地移除和添加元素的背景图片,同时结合具体的代码示例来分析这一过程。首先,介绍jQuery是什么。
tab标签图片渐隐渐现效果
总结一下,实现"tab标签图片渐隐渐现效果"的关键在于理解HTML的结构布局,利用CSS的transition属性创建动画效果,以及使用JavaScript或jQuery来控制tab的切换和图片的动态显示


