网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 网站常用 >> 正文
最新文章
· JavaScript实现文本段落折叠展开和收
· 拖动滑块选择范围的网页插件代码
· JS版元素周期表
· jQuery数字统计并生成进度条动画的代
· 一个不错的CSS分页样式
· 实用的Flash全屏和退出全屏切换效果
· 纯CSS实现三列DIV等高布局
· jquery四色网页换肤代码
· 可展开和收起的在线客服代码
· 功能强大的漂亮计算器
热门文章
 登录时用Cookie保存用户名和密码
 获取16进制颜色值的取色器
 一个小型的JS在线文本编辑器
 JavaScript实现文本段落折叠展开和
 利用js给li标签添加序号
 通过QQ查询QQ用户的头像、昵称、地
 可展开和收起的在线客服代码
 js取色器
 基于jQuery的对象切换插件soChange
 javascript让状态栏不显示链接地址
相关文章
基于JQuery的日历控件
基于jQuery淡入淡出可自动切换的幻灯插件
基于jQuery的对象切换插件soChange 1.5
来源:蓝色理想 更新时间:2010/8/30 15:33:27 阅读次数: 我要投稿
☉预览 ↓下载 #复制 +收藏
特效代码:
下载后使用!
☉预览 ↓下载 #复制 +收藏
特效说明:

所有参数:
$(obj).soChange({
    thumbObj:null, //导航对象,默认为空
    botPrev:null, //按钮上一个,默认为空
    botNext:null, //按钮下一个。默认为空
    thumbNowClass:'now', //导航对象当前的class,默认为now
    thumbOverEvent:true,//鼠标经过thumbObj时是否切换对象,默认为true,为false时,只有鼠标点击thumbObj才切换对象
    slideTime:1000, //对象平滑过渡持续时间,默认为1000ms
    autoChange:true, //是否自动切换,默认为true
    clickFalse:true,//导航对象如果有链接,点击是否链接无效,即是否返回return false,默认是return false链接无效,当thumbOverEvent为false时,此项必须为true,否则鼠标点击事件冲突
    overStop:true,//鼠标经过切换对象时,切换对象是否停止切换,并于鼠标离开后重启自动切换,前提是已开启自动切换,默认开启鼠标经过对象停止切换
    changeTime:5000, //对象自动切换时间,默认为5000ms,即5秒
    delayTime:300 //鼠标经过时对象切换迟滞时间,推荐值为300ms
});


实现对象切换的插件其实网上很多,但是应用起来总是不够满意,不够简洁,不够实用,所以干脆自己写了一个,本来取名为sGallery,即simpleGallery,但感觉这个插件不仅仅是可以应用在幻灯相册上,确实应该称它为对象切换插件,所以改了名称,simple object change ,简洁考虑直接就soChange,即如此改变,如此切换,我也增加了一个选项卡切换的例子,相信你使用时会觉得它是如此方便和多样,以上为此插件所有参数,从前端开发角度出发,充分利用css样式的灵活性,脚本调用方式简单,基本满足了现在常见开发中遇到的平滑过渡效果,具体实际应用及代码参考以下的例子。

注:此插件大小为3k(min版为1.6k),兼容全部主流浏览器,图片右上方的小箭头图标考虑美观用了透明的png图片,在ie6下不透明,此和样式有关,请详知。

1- 默认最简易模式
 

$('#change_1 .a_bigImg img').soChange();

//最简易模式不带任何参数,即直接切换选择器选择的对象组,所有参数为默认:隔5秒自动切换,图片过渡效果持续1秒

//源对象为自动切换的一个数组,即其本身,非其父包装元素
//如要切换图片本身就以图片组为对象,
//如要切换层就以层组为对象


2- 带前后按钮
 
$('#change_2 .a_bigImg img').soChange({
botPrev:'#change_2 .a_last', // 按钮,上一个
botNext:'#change_2 .a_next' // 按钮,下一个
});


3- 使用数字导航切换及自定义当前状态数字的class
 
$('#change_3 .a_bigImg img').soChange({
thumbObj:'#change_3 .ul_change_a2 span',
//导航为数字形式,选择器指向包含数字的span对象
thumbNowClass:'on',
//自定义导航对象当前class为on
changeTime:4000//自定义切换时间为4000ms
});


4- 切换对象为其他,这里为包含图片和标题的层
 
$('#change_32 div.changeDiv').soChange({
对象指向层,层内包含图片及标题
thumbObj:'#change_32 .ul_change_a2 span',
thumbNowClass:'on'
});


5- 关闭鼠标经过thumbObj切换事件,平滑过渡间歇时间为0 
$('#change_33 .a_bigImg img').soChange({
thumbObj:'#change_33 .ul_change_a2 span',
thumbOverEvent:false,// 关闭鼠标经过thumbObj切换事件,只有点击thumbObj时才切换对象
thumbNowClass:'on',
slideTime:0//平滑过渡间歇为0,意味着直接切换
});


6- 带导航图标及按钮
 
$('#change_4 .a_bigImg img').soChange({
thumbObj:'#change_4 .ul_change_a1 img',
//导航图标,选择器直接指向图标对象
botPrev:'#change_4 .a_last',
botNext:'#change_4 .a_next'
});


7- 不自动切换
 
$('#change_5 .a_bigImg img').soChange({
thumbObj:'#change_5 .ul_change_a1 img',
//导航图标,选择器直接指向图标对象
botPrev:'#change_5 .a_last',
botNext:'#change_5 .a_next',
autoChange:false //自动切换为 false,默认为true
});

8- 在选项卡上的应用
 
$('#change_6 div').soChange({
thumbObj:'#change_6 h3',//导航对象指向标题h3
slideTime:0,
thumbOverEvent:false,
autoChange:false
});

注:这个和相册或者幻灯似乎相差比较远,但是其实原理相同,无非是鼠标触发一个,另一个发生改变,所以,应用时请开动脑筋,充分发挥css在页面特效中的作用。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号