$("#go").click(function(){
$("#block").css({"font-size":"10em","position":"relative"}).animate({
width:1000,
opacity:0.5
}, 'slow' );
});
实现图片的轮换
<style>
.selected {
background: #f00;
color:#fff;
}
#imgElement {
width:327px;
}
#content span {
cursor: pointer;
}
#movieName {
position:relative;
top:40px;
border:1px solid #999;
background:#a43;
opacity: 0.7;
color:#fff;
}
</style>
<script type="text/javascript">
$(function() {
var index = 0;
$("#imgElement img").each(function(n) {
$("#content").append("<span>"+(n+1)+"</span> ");
}).css("display","none").filter(":eq("+(index++)+")").show();
$("#content span").click(function(){
var ele = $(this).html();
index = (ele-1);
change();
});
$("#content span:eq(0)").addClass("selected");
function change() {
var img = $("#imgElement img").css("display","none").filter(":eq("+(index)+")").fadeIn('slow');
$("#movieName").html(img.attr("alt"));
$("#content span").removeClass().filter(":eq("+index+")").addClass("selected");
index++;
if(index>=$("#imgElement img").size()) {
index = 0;
}
}
setInterval(change,3000);
});
</script>
<body>
<div id="content"></div>
<div id="imgElement">
<div id="movieName">电影名称</div>
<img src="movie/01.jpg" alt="七宗罪" height="500"/>
<img src="movie/02.jpg" alt="蝴蝶效应" height="500"/>
<img src="movie/03.jpg" alt="致命魔术" height="500"/>
<img src="movie/04.jpg" alt="第六感" height="500"/>
<img src="movie/05.jpg" alt="失忆" height="500"/>
</div>
</body>
相关推荐
该文以 Animate（Flash）二维动画市场需求为导向，面向职业岗位，参照职业标准，对课程的学习内容、教学模式、教学方法及考核评价方式等进行了基于工作过程的学习情境式教学设计。 一、课程教学改革的必要性 高职...
《Flash二维动画设计》考试试题涉及了多个Flash软件的核心功能，包括图形绘制、颜色填充、对象操作、动画制作等关键知识点。以下是对这些知识点的详细解释： 1. **图形绘制与编辑**：试题中提到“根据图示完成操作...
本主题聚焦于"十二星座动画图片"，这是一个集合了与十二星座相关的动态图形资源。 十二星座是天文学中的概念，被广泛用于占星学，代表了黄道带上十二个特定的区域，分别是白羊座、金牛座、双子座、巨蟹座、狮子座、...
在“双十二活动策划.zip”这个压缩包中，我们看到主要涉及的是一个基于H5（HTML5）和JQuery的实战项目，旨在为双十二促销活动设计互动网页。这个项目包含了一系列关键的技术点，让我们逐一深入探讨。 首先，HTML5是...
它提供了丰富的2D渲染功能，如精灵（Sprite）、批处理节点（BatchNode）和动画（Animate）等，这些都对构建游戏世界至关重要。在大富翁游戏中，我们需要创建棋盘、角色、骰子等元素，这些都可以通过Cocos2d-x的精灵...
二、滑动效果 jQuery 的滑动效果通过改变元素的高度或宽度来实现，使得元素在视觉上有滑动的动画感。 1. slideDown()：让元素沿着垂直方向展开，显示其内容。可设置速度和回调函数： ```javascript $(".div1")....
本课程"Java程序员面试宝典视频课程之Jquery（二十二）"旨在帮助Java开发者提升面试技巧，顺利通过面试关卡，从而在激烈的求职竞争中脱颖而出。 JQuery，作为一款强大的JavaScript库，对于前端开发人员来说是不可或...
4. **动画效果**：jQuery的`.fadeIn()`, `.slideUp()`, `.animate()`等方法使创建动画变得容易，增强了用户体验。 5. **AJAX请求**：`.ajax()`, `.get()`, `.post()`等方法用于异步数据交换，实现页面无刷新更新。 ...
"JS第十一章轮播图 二级目录"这个主题聚焦于使用JavaScript实现轮播图效果，这是一种常见的网页元素，用于展示多张图片或内容并自动循环播放。在这一章节中，我们将深入探讨轮播图的基本概念、实现方法以及相关的...
Textillate支持Animate.css中的所有动画效果，包括淡入淡出（fadeIn/fadeOut）、滑动（slideIn/slideOut）、旋转（rotateIn/rotateOut）等数十种预定义的动画。开发者可以通过修改`in`和`out`参数来指定文字进入和...
Easing插件则极大地丰富了这一领域，引入了多达数十种不同的缓动效果，使得网页动画更具有动态感和艺术性。 **二、Easing原理** 缓动效果是动画中的关键部分，它决定了元素在动画过程中的速度变化。例如，一个元素...
2. **动画类型**：可能涵盖不同类型的动画，如二维动画、三维动画、定格动画等，并对比它们的特点和制作方法。 3. **角色设计**：如何创建有吸引力的角色，包括造型、动作设计、性格塑造等。 4. **故事板制作**：...
**二、摄像机（Camera）** 摄像机是观察3D世界的视角，我们需要至少一个摄像机来展示场景。例如，创建一个透视摄像机： ```javascript const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window....
9. **翻转效果**：让元素在二维或三维空间中翻转，增加视觉吸引力。 10. **响应式动画**：根据屏幕尺寸的变化，调整动画效果，适应不同设备。 这些项目旨在帮助学习者深入理解jQuery动画机制，并提高实际应用能力。...
**第十至十二天：Ajax交互** 1. **Ajax基础**：理解jQuery中的`$.ajax()`, `$.get()`, `$.post()`，以及`$.getJSON()`等方法。 2. **Ajax回调与Promise**：学习如何处理异步请求的回调，以及使用`.done()`, `.fail()...
在第十一章中，我们主要探讨了计算机动画的概述、发展历程、研究内容、目标以及应用领域。 11.1.1 概述 计算机动画的起源可以追溯到传统动画，传统动画依赖于手绘帧和视觉暂留原理。而计算机动画则利用计算机的计算...
第十二章后处理（RESULTS） FILE SCALAR DEFORMED SHARP PLOT STYLE 8 PATH PLOT HISTORY PLOT ANIMATE ISOLATE ELEMS 第十三章静态菜单命令 静态菜单命令介绍 FILES菜单 PLOT菜单 VIEW菜单 第十四章练习 第十五章...
标题 "20款jquery网页颤抖摇摆特效特效代码" 暗示了这个压缩包包含的是二十种不同的jQuery实现的网页动画效果，特别是那些模仿物体颤抖或摇摆的行为。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、...
第十一至十二天：性能优化 深入理解jQuery性能优化的技巧，如减少DOM操作，避免内存泄漏，合理使用缓存等。学习如何分析和改进jQuery代码的性能。 第十三至十四天：实战项目 通过实际项目练习，巩固所学知识，包括...
二、DOM 操作 jQuery 提供了一整套简便的 DOM 操作方法，如 `html()`、`text()` 和 `append()`。`html()` 可以获取或设置元素的HTML内容，`text()` 处理文本内容，而 `append()` 则允许你向元素内部追加内容。 三...