关注F2E-UED-SEO

jCarousel是一款JQuery 插件， 用来控制水平或垂直排列的列表项. 这些项目（可以是静态HTML内容或是Ajax加载内容）内容是可以来回滚动的（可以有动画效果）。

相关配置文件和一些基本介绍：请点击这里查看
废话不多说,上效果：
Demo:

• 静态实例
  • 最简单基本的滚动切换效果
  • 垂直滚动切换
  • 自动滚动的传送切换
  • 含回调函数的滚动切换举例
  • 含外部控制的滚动切换
  • 有自定义起始位置的滚动切换
  • 一个页面上同时出现多个滚动切换
• 动态实例
  • 通过JavaScript加载滚动切换的动态内容
  • 通过Ajax加载滚动切换的动态内容
  • 通过Ajax从PHP脚本加载滚动切换的动态内容
  • 通过Ajax从Flickr照片订阅中加载滚动切换的动态内容
  • 通过Ajax从Flickr API中加载滚动切换的动态内容
• 特别的实例
  • 循环滚动切换
  • 使用jCarousel进行文本滚动
  • 更灵活的滚动切换
  • jCarousel 和 Thickbox 3插件相结合
  • 含自定义动画效果的滚动切换

简单的拿example举例： —-含外部控制的滚动切换

jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null   //注意这里不能带标点符号 兼容(IE)
    });
});

这里非常需要注意的一点是：
配置的参数的最后1个不能带有逗号或者是分号！否则IE下是会显示JS报错！从而导致JS失效！

Example里的一些东西都可以经过修改转成各种效果，很实用！
这里提供了打包下载！ 欢迎分享！

淘布斯网站需要做一个回顶部的简单效果，mootools功能强大可以直接往上写，而Jquery简练，需要挂一个简单的小插件。
点击这里查看Mootools的回顶部Demo
先发下Mootools的写法 点击下载实例

window.addEvent('domready',function(){
       $('gotop').inject(document.body).addEvent('click',function(){
		   new Fx.Scroll(window,{link:'cancel'}).toTop();
	   }).setOpacity(.8);
	   this.addEvent('scroll',function(){
	        if(window.getScrollTop()>100){
		    $('gotop').setStyle('top',window.getSize().y + window.getScrollTop() - $('gotop').getSize().y).show();
	       }else{
		      $('gotop').hide();
		   }
	   });
   });

ID为gotop点击触发事件，当页面是最顶部的时候，按钮隐藏，不过按钮的定位需要CSS绝对定位在某一位置

———————–

Jquery的写法则更为简单，直接挂上插件就可以使用！
不过在scrolltopcontrol.js的配置的参数信息需要配置正确
点击这里查看Jquery的回顶部Demo
下面是关键代码配置参数 点击这里下载实例

    /*startline: 鼠标向下滚动了100px后出现#topcontrol*/
	/*scrollto: 它的值可以是整数，也可以是一个id标记。若为整数（假设为n），则滑动到距离
                    top的n像素处；若为id标记，则滑动到该id标记所在的同等高处*/
	/*scrollduration:滑动的速度*/
	/*fadeduration:#topcontrol这个div的淡入淡出速度，第一个参数为淡入速度，第二个参数
                    为淡出速度*/
	/*controlHTML:控制向上滑动的，默认为<img src="up.png" style="width:48px;
                    height:48px" />，可以自行更改。该处的html代码会被包含在一个id标记
                    为#topcontrol的div中。*/
	/*controlattrs:控制#topcontrol这个div距离右下角的像素距离*/
	/*anchorkeyword:滑动到的id标签*/
	/*state: isvisible:是否#topcontrol这个div为可见
		 shouldvisible:是否#topcontrol这个div该出现*/

    setting:{startline:1,scrollto:0,scrollduration:1000 fadeduration:[500, 100]},
	controlHTML: '<img src="up.png" style="width:24px; height:24px" />',
	controlattrs: {offsetx:5, offsety:5},
	anchorkeyword: '#top',
	state: {isvisible:false, shouldvisible:false},

不多说，先看效果：点击这里查看演示 | 点击这里下载实例

关键Js代码：

$(function(){
	  $(".select_list li:odd").addClass("currert");
	  $("#menuClick").click(function(){
		$("#vMenuList").slideToggle();
		return false;
	  });
	  $(".select_list > li > a").hover(function(){
		  $(this).animate({
			paddingLeft: 20
		  },100);
	      },function(){
		  $(this).animate({
			paddingLeft: 5
		  },50);
	 });
});

解释一下：

 $(".select_list li:odd").addClass("currert");

获取class=”select_list”下的li的偶数行给其添加class=”currert”,同时定义currert的样式，起到隔行换色的效果

$("#menuClick").click(function(){
		$("#vMenuList").slideToggle();
		return false;
	});

获取id=”menuClick” 通过鼠标点击触发事件，触发id为vMenuList的sildsToggle的事件。
这段才是下拉框或者是下拉菜单的核心代码！！

$(".select_list > li > a").hover(function(){
		$(this).animate({
			paddingLeft: 20
		},100);
	},function(){
		$(this).animate({
			paddingLeft: 5
		},50);
	});

这一段是鼠标下拉框的触发水平移动事件：
获取class=”select_list”下的子元素li的子元素a，当鼠标放上（hover）触发：animate事件，左边内边距20px;时间100ms(0.1秒)，当鼠标移开的时候再次触发animate事件，左边内边距5px;时间50ms(0.05秒)。

鼠标划过显示菜单, 离开隐藏菜单, 没有能比这个跟简单的了.

jQuery(document).ready(function(){
	// 找到所有菜单, 并添加显示和隐藏菜单事件
	jQuery('#menus > li').each(function(){
		jQuery(this).hover(
			// 显示菜单
			function(){
				jQuery(this).find('ul:eq(0)').show();
			},
			// 隐藏菜单
			function(){
				jQuery(this).find('ul:eq(0)').hide();
		});
	});
});

点击这里查看Demo演示

————————————————————————————————————————
淡出淡入导航菜单，需要注意的是，这里需要加入延迟处理！

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];

jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
			// 取消淡出菜单的线程, 延时淡入菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeIn(200);
				}, 400);
			},
			// 取消淡入菜单的线程, 延时淡出菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeOut(200);
				}, 400);
			});
	});
});

点击这里查看Demo演示

——————————————————————————————————————-

鼠标悬停显示滚动展开菜单, 离开滚动卷起菜单. 需要加上延迟处理, 原因同淡出淡入导航菜单的处理.

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];

jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(

			// 取消卷起菜单的线程, 延时展开菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideDown(200);
				}, 400);
			},

			// 取消展开菜单的线程, 延时卷起菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideUp(200);
				}, 400);
			}

		);
	});
});

点击这里查看Demo演示

仍个Jquery中文手册到自己Blog上，方便查查!
Jquery中文手册 在线查看地址

由Zarknight 编译完成的Mootools中文手册，有幸在Google下到，争取把它变成自己的！！

Mootools中文手册 在线查看地址

Jquery的lightbox插件非常强大，而且支持自定义属性，便于修改！
强烈推荐！！

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>
<script type="text/javascript">
$(function(){
	$.Lightbox.construct({
		show_linkback: false,               /* 不显示右上角的方向链接 */
		opacity:0.6,                        /* 背景透明度60% */
		auto_resize:false,                  /* 不限制图片大小 */
	});
});
</script>

Demo连接地址：
点击这里查看参数                                             点击这里效果演示

Demo下载地址：
点击这里下载相关文档

上周用Dedecms做了店掌柜的官方站点，
中间有一个环节用Jquery获取淘宝店铺信用的图片，来替换Dedecms字段输出的值。

for(var i=0;i<$('.taolevel').length;i++){
     if($('.taolevel').eq(i).text()=='一钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_1.gif />') }
     if($('.taolevel').eq(i).text()=='二钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_2.gif />') }
     if($('.taolevel').eq(i).text()=='三钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_3.gif />') }
     if($('.taolevel').eq(i).text()=='四钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_4.gif />') }
     if($('.taolevel').eq(i).text()=='五钻'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_blue_5.gif />') }
     if($('.taolevel').eq(i).text()=='一皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_1.gif />') }
     if($('.taolevel').eq(i).text()=='二皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_2.gif />') }
     if($('.taolevel').eq(i).text()=='三皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_3.gif />') }
     if($('.taolevel').eq(i).text()=='四皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_4.gif />') }
     if($('.taolevel').eq(i).text()=='五皇冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_cap_5.gif />') }
     if($('.taolevel').eq(i).text()=='一金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_1.gif />') }
     if($('.taolevel').eq(i).text()=='二金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_2.gif />') }
     if($('.taolevel').eq(i).text()=='三金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_3.gif />') }
     if($('.taolevel').eq(i).text()=='四金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_4.gif />') }
     if($('.taolevel').eq(i).text()=='五金冠'){
     $('.taolevel').eq(i).html('<img src=http://pics.taobaocdn.com/newrank/s_crown_5.gif />') }
     if($('.taolevel').eq(i).text()=='商城'){
     $('.taolevel').eq(i).html('<img src=http://www.shopex.cn/images/mall.gif />') }
  };

原理：所有均只运行1次即跳出循环，
如果class为taolevel的标签下的文字全等于“店铺信用”
则用对应的图片的html代码来替换当前的文字

今天用Dedecms改版taobao.shopex.cn，发现文章类目位置导航用手写实在太麻烦了，
用JS调用只要创建一个类似页面，通过JS获取某标签下的相关文字，赋值给予需要显示的地方，即可达到简单的目的
Dedecms内嵌Jquery框架，代码如下：

<script type="text/javascript">
       var pagetitle = $('.place a:last').text();
       $('.jsvalue span').text(pagetitle)
</script>

解释：
定义 pagetitle 为 获取class为place的最后的1个a标签里的文字
选择 class为jsvalue下的span标签赋给pagetitle

简单的2行代码。。。
它来的这么快这么直接