`

关于用jQuery实现效果

阅读更多
1、效果1:关于新闻信息文字上下切换
<div  id="scrollNews">
		  <ul>
			  <li>
				<span class="plin">July 12,2009 4:30 pm</span>
				AR Update: Rolling Stones concert canceled for July 22 in Los Angeles.
			  </li>
			  <li>
				<span class="plin">July 12,2009 4:30 pm</span>
				AR Update: Rolling Stones concert canceled for July 22 in Los Angeles.
			  </li>
		  </ul>
		  </div>

/*AR new*/
$(function(){
        var $this = $("#scrollNews");
		var scrollTimer;
		$this.hover(function(){
			  clearInterval(scrollTimer);
		 },function(){
		   scrollTimer = setInterval(function(){
						 scrollNews( $this );
					}, 3000 );
		}).trigger("mouseleave");
});
function scrollNews(obj){
   var $self = obj.find("ul:first");
   var lineHeight = $self.find("li:first").height(); //获取行高
   $self.animate({ "marginTop" : -lineHeight +"px" }, 600 , function(){
         $self.css({marginTop:0}).find("li:first").appendTo($self); //appendTo能直接移动元素
   })
}


2、效果2:将模块展开和关闭
/*模块展开和关闭*/
$(function(){
		 $(".module_up_down").toggle(function(){
					var $self = $(this);
					$self.prev().slideToggle(600,function(){
						  $("img",$self).attr("src","images/up.gif");
					});
			 },function(){
					var $self = $(this);
					$self.prev().slideToggle(600,function(){
						  $("img",$self).attr("src","images/down.gif");
					});
		 })
})
  • 88.rar (1.7 MB)
  • 下载次数: 2
分享到:
评论

相关推荐

    使用jQuery实现的效果

    在本文中,我们将深入探讨如何使用jQuery来实现各种前端效果,包括动画、事件处理、DOM操作等。jQuery是一个流行的JavaScript库,它简化了JavaScript的许多复杂性,使得开发者能够更轻松地实现动态网页效果。 首先...

    Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮

    Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮 ...Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮

    JQuery实现的各种小效果

    以下是一些使用JQuery实现的关键知识点: 1. **导航菜单**:JQuery可以轻松地创建响应式和动态导航菜单。通过事件监听(如`click`)和CSS类的添加/删除,我们可以实现菜单项的高亮、下拉子菜单的展开和收起,以及...

    jquery实现table拖拽列效果

    用jquery实现table拖拽列功能,可动态改变表格列宽度,并且实现table表格100%的问题,如果列缩小,则自动拉伸最后一列以实现table100%的效果,如果拉伸长度比原长度大,则显示x滚动条。

    jQuery实现切换页面过渡动画效果

    是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容,在页面加载的时候,使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理...

    jquery实现动态背景效果

    要使用jQuery实现动态背景效果,你需要遵循以下步骤: 1. **引入jQuery库**:确保在HTML文件中包含jQuery库的链接。通常,你可以从CDN(内容分发网络)获取,例如: ```html &lt;script src="https://code.jquery....

    jquery实现图片放大效果

    本项目是关于使用jQuery实现图片点击放大功能,提供了三种不同的样式,以适应不同场景下的布局需求。以下将详细讲解jQuery实现图片放大效果的相关知识点。 1. jQuery基础: jQuery是一个轻量级的JavaScript库,它...

    jquery实现网页换肤效果

    记得以前腾讯网页上有个根据用户心情自定义换皮肤颜色,感觉这个用户体验蛮好的,给出几套样式,...话说现在腾讯不知道咋的,去掉这个功能了,没事现在jquery博客给大家用jquery来实现这个效果.转自http://www.jqueryba.com/

    jQuery实现spliter效果

    在本话题中,我们将深入探讨如何利用jQuery实现Splitter效果,这是一种常见的布局技术,允许用户动态调整两个或多个内容区域的大小。 Splitter效果通常用于创建可自定义分隔的窗口或面板,比如在IDE、文档编辑器...

    基于jQuery实现滚动刷新效果

    Jquery实现简单的滚动刷新效果: 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文: &lt;form id="form1" runat="server"&gt; &lt;/form&gt; Javascript操作代码: $(document)....

    jQuery实现炫彩文字特效效果插件

    在本主题中,我们将深入探讨如何使用jQuery实现炫彩文字特效效果,这是一种能为网页增添视觉吸引力的技术。 首先,理解jQuery基础是必要的。jQuery对象通过$符号创建,它可以用来选择页面中的元素,如`$("#...

    jQuery实现表头固定表格内容滚动效果

    `jQuery`作为一个广泛使用的JavaScript库,提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何利用`jQuery`来创建一个表头固定、内容区域可滚动的表格。 首先,我们需要在HTML中构建基本的表格结构...

    jquery实现动态背景效果.rar

    总的来说,"jquery实现动态背景效果"这个主题涉及到JavaScript编程、jQuery库的使用、CSS3动画、C#后端开发以及前端和后端的交互。通过学习和实践这部分内容,开发者可以提升网站的视觉吸引力,并增强用户体验。在...

    jquery 实现的等待加载页面

    在这个案例中,它会包含引入jQuery库的链接,以及使用jQuery实现的加载脚本。开发者通常会在`&lt;head&gt;`标签内引入jQuery库,并在`&lt;body&gt;`标签的`$(document).ready()`函数中编写加载动画的初始化代码,确保在页面内容...

    jquery抽屉式图片展示效果.rar

    本篇文章将深入探讨如何利用jQuery实现抽屉式图片展示效果,这一效果常见于各种电商网站的产品展示或相册应用,通过简单的滑动动作,即可展示或隐藏图片,既节省空间又富有视觉吸引力。 首先,抽屉式图片展示效果的...

    jQuery实现飘雪效果

    总之,使用jQuery实现飘雪效果是JavaScript编程中的一个有趣实践,它展示了jQuery如何简化动画和事件处理,同时激发了开发者创造独特用户体验的想象力。通过这个实例,你可以进一步提升自己的jQuery技能,也可以将...

    jQuery实现网页3D效果

    **jQuery实现网页3D效果详解** 在Web开发中,为了提升用户体验,许多开发者追求更为生动、立体的视觉呈现,这就是3D效果的由来。jQuery,作为一款强大的JavaScript库,虽然其本身并不直接支持3D功能,但通过扩展...

    jQuery实现的图片滚动效果

    总结起来,使用jQuery实现图片滚动效果涉及到HTML布局、CSS美化、jQuery选择器、动画功能、事件处理和优化策略等多个方面。通过实践和学习,你可以掌握这个过程,并将其应用于各种项目,提升网页的用户体验。

    jQuery实现星星评价效果demo

    "jQuery实现星星评价效果demo"是一个关于如何使用jQuery库来创建一个直观且动态的星级评分系统的实例。这个项目适用于那些希望在网站上添加评论评分功能或者产品评级功能的开发者。 首先,jQuery是一个轻量级的...

Global site tag (gtag.js) - Google Analytics