<SCRIPT type=text/javascript>
<!--
var num = 0;
$("#nav").hide();
$("li img").load(function(){//fn (Function): 在每一个匹配元素的load事件中绑定的处理函数。<p onload="alert('Hello');">Hello</p>
num++;
if (num==4)
{
$("#nav").show();
}
})
.click(function(){
//如果已经处于active状态,return
if (this.className.indexOf("active")!=-1) return;
//正文文字渐隐
$("#frontText").fadeOut();//淡出效果,这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化
$("#frontTextBack").fadeOut();
$("#frontTextSub").fadeOut();
//active状态的图片恢复原样
$("li img.active").fadeTo(200,0.6)
//speed (String|Number): 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
//opacity (Number): 要调整到的不透明度值(0到1之间的数字).
//callback (Function): (可选) 在动画完成时执行的函数
.removeClass("active")
.animate({top:5,width:52,left:10},300)
//params (Hash): 一组包含作为动画属性和终值的样式属性和及其值的集合
//speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
//easing (String): (可选) 要使用的擦除效果的名称(需要插件支持).
//callback (Function): (可选) 在动画完成时执行的函数
.parent().css({"color":"#aaa"}); //LI
//获取数据
var i = $(this).attr("pic");//获取属性
var t = $(this).attr("text").split("|");
//当前
$(this).animate({top:-5,width:70,height:40,left:1},100)
.addClass("active")
.fadeTo(200,1)//不透明
.parent().css({"color":"white"});
$("#back").children().addClass("gray").end()//end() 恢复到父一级选择器
.fadeTo(500,0.1,function(){
//var IMG = new Image();
//IMG.s
$(this).children("img").attr("src","images/"+i+".jpg").removeClass("gray"); //更改图片
$(this).fadeTo(500,1,function(){
$("#frontText").html(t[0]).fadeIn(200); //更改正文文字
$("#frontTextBack").html(t[0]).fadeIn(200); //阴影文字
$("#frontTextSub").html(t[1]).fadeIn(200)} //副标题
);
})
})
//初始第一张图片
var i =0;
show();
function show(){
if (i==$("li img").size()) i = 0
$("li img").eq(i).click();
i++;
//setTimeout(show(),1000);
}
//document.oncontextmenu = function(e){return false}
if (self.location.search!=""){
var V = self.location.search;
V = V.substr(1,V.length);
eval(V);
var json ="{";
if (option.skin==0)
$("#mask").hide();
if (option.animate == 0){
$("#nav ul").hide();
}
$("#nav").width(option.width?option.width:760);
$("#nav").height(option.height?option.height:240);
$("#back img").width($("#nav").width());
$("#back img").height($("#nav").height());
$(self.parent.document.getElementById("splash")).children().height($("#nav").height()).width($("#nav").width());
}
//-->
</SCRIPT>
分享到:
相关推荐
jquery简单使用、jquery入门、jquery技巧
JQuery函数应用和实例很全的一个文档
强大的运用jqueryApi 封装了很多js的应用以及css选择器 让懂css的人很容易上手
jquery的一些操作函数,总结。。方便应用,,及时查找
jquery函数包jquery-1.3.2.min.js-及中文提示包jquery-1.3.2-vsdoc-CN.js,可以看看www.jdftc.com.cn使用情况。带给你方便好用。
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用.我在 代码如下:$(document).ready(function(){setTimout(test(),200); function test() { alert(1&#...
主要介绍了jQuery 函数,结合实例形式分析了jquery函数声明、函数表达式、匿名函数等相关使用技巧,需要的朋友可以参考下
使用jQuery(中级),第1部分使用插件创建和扩展jQuery函数[归纳].pdf
NULL 博文链接:https://baihe747.iteye.com/blog/2164305
使用jquery封装函数搭建前后端完全分离框架,对静态页面模块化,减少重复工作量。
jQuery技术资料,前使用最广泛的javascript函数库。这个是很好的学习资料
使用JQuery load函数异步分页,速度快,效率高,不需要一次性加载绑定查询数据,根据页码和数据数量分段获取。
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 我们经常要使用脚本处理各种业务逻辑, 最常见的就是数组和对象的操作. jQuery工具...
jqurey库的aqi使用指南。写的很全。对编写jquery有很好的帮助。
从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery 中的Ajax 从零开始学习jQuery (七) jQuery 动画-让页面动起来! 从零开始学习...
禁止将jQuery函数与本机等效项一起使用。 安装 您首先需要安装 : $ npm install eslint --save-dev 接下来,安装eslint-plugin-jquery : $ npm install eslint-plugin-jquery --save-dev 注意:如果全局安装了...
jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分): 代码 var a = $("#cid"); var b = $...
第1 部分 使用插件创建和扩展jQuery 函数 第2部分 创建自己的插件-jQuery 第3 部分 UI 项目
熟悉jQuery还是先从核心函数入手比较好,后面其他的功能都是在此核心函数的基础上扩展的。 jQuery 核心函数 jQuery(expression, [context]) jQuery(html, [ownerDocument]) jQuery(html, props) jQuery(elements)...