- 浏览: 259399 次
- 性别:
- 来自: 北京
最新评论
-
haixin3036:
jQuery是一套跨浏览器的JavaScript库,简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang:
非常感谢分享,正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369:
不错。。。
移动端webapp开发必备知识
基于jQuery的对象切换插件:
所有参数:
$(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样式的灵活性,脚本调用方式简单,
基本满足了现在常见开发中遇到的平滑过渡效果,具体实际应用及代码参考以下的例子。
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' // 按钮,下一个
});
12343- 使用数字导航切换及自定义当前状态数字的class
$('#change_3 .a_bigImg img').soChange({
thumbObj:'#change_3 .ul_change_a2 span',
//导航为数字形式,选择器指向包含数字的span对象
thumbNowClass:'on',
//自定义导航对象当前class为on
changeTime:4000//自定义切换时间为4000ms
});
图片111111111说明文字,文字标题都绝对定位在div.changeDiv这个层内
图片222222222说明文字,文字标题都绝对定位在div.changeDiv这个层内
图片333333333说明文字,文字标题都绝对定位在div.changeDiv这个层内图片444444444说明文字,文字标题都绝对定位在div.changeDiv这个层内
12344- 切换对象为其他,这里为包含图片和标题的层
$('#change_32 div.changeDiv').soChange({
对象指向层,层内包含图片及标题
thumbObj:'#change_32 .ul_change_a2 span',
thumbNowClass:'on'
});
12345- 关闭鼠标经过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
});
标题1内容1111111 11111内容111111 111111内容11111 1111111内容1111111 11111标题2内容2222222 22222内容222222 222222内容22222 2222222内容2222222 22222
标题3内容3333333 33333内容333333 333333内容33333 3333333内容3333333 33333
标题4内容4444444 44444内容444444 444444内容44444 4444444内容4444444 444448- 在选项卡上的应用
$('#change_6 div').soChange({
thumbObj:'#change_6 h3',//导航对象指向标题h3
slideTime:0,
thumbOverEvent:false,
autoChange:false
});
注:这个和相册或者幻灯似乎相差比较远,但是其实原理相同,无非是鼠标触发一个,另一个发生改变,所以,应用时请开动脑筋,充分发挥css在页面特效中的作用
- 基于jQuery的对象切换插件.rar (401.9 KB)
- 下载次数: 1
发表评论
-
Javascript类定义语法,私有成员、受保护成员、静态成员等
2014-05-29 10:59 718JS只是一门支持面向对象编程的语言,通过OO可以让我们的 ... -
Javascript 继承模式
2014-05-29 10:59 711在面向对象的JavaScript开发中使用继承可以提高代码 ... -
用JavaScript实现自己的DOM选择器
2014-05-28 14:27 668解释器模式(Interpreter):定义一种语法格式,通过 ... -
Javsript代码的注释和模块定义
2014-05-28 14:21 825可以这样定义模块: (function(ns, re ... -
在JavaScript中应用单例模式管理命名空间
2014-05-28 10:56 788单例模式确保一个类在整个应用程序中只有一个是实例对象,在J ... -
移动WEB开发中媒体查询里的width, device-width, resolution
2014-05-28 10:14 997/*1、width: viewport的宽度,css像素,三星 ... -
前端性能优化
2014-05-27 15:16 8721. 请减少HTTP请求 基本原理: ... -
jquery sizzle 选择器浅析
2014-05-26 14:23 1198看了jquery的源码,jquery用的选择器的引擎是siz ... -
jQuery 1.8,1.9和2.0分别带来的新特性
2014-05-26 14:17 1326jQuery 1.8 可定制 在jQuery ... -
jquery点击div之外的地方div本身消失
2014-05-15 12:22 873<!DOCTYPE html PUBLIC " ... -
jquery-migrate: 迁移旧的jQuery代码至jQuery1.9以上的版本
2014-05-14 16:31 647这个插件可以用来检测和恢复在jQuery1.9版本中已删除或 ... -
移动WEB在线开发工具 – Codiqa
2014-05-12 15:43 631Codiqa,https://codiqa.com 简单试用 ... -
Android手机版浏览器DIV滚动条失效解决方案
2014-05-08 11:09 1197除了BODY和HTML的滚动条,在触屏下几乎所有浏览器都不支 ... -
解耦HTML、CSS和JavaScript
2014-02-14 11:32 617当前在互联网上, ... -
使用console.table()调试javascript
2014-01-20 15:42 606或许你已经习惯了console.log()来调试js,非常好 ... -
JS对象复制
2014-01-17 16:18 604在JavaScript很多人复制 ... -
jQuery反向排序(倒序)子对象
2013-12-26 10:53 2279<!DOCTYPE html><html&g ... -
js object写法 参数传递jquery对象
2013-12-24 11:21 921<!DOCTYPE HTML PUBLIC &quo ... -
JavaScript模拟QQ签名(HTML5 contenteditable属性)
2013-12-24 11:08 587一、思路 1、单击元素时,使元素可以编辑,并获得焦点 2 ... -
ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性
2013-12-19 15:47 800IE6-IE8浏览器,按照现代浏览器的API来工作就好了!也 ...
相关推荐
基于jQuery的对象切换插件,JQuery图片切换,图片切换
jQuery左右切换层叠式焦点图动画 jQuery左右切换层叠式焦点图动画
soChange 基于jQuery对象切换、幻灯切换插件.zip
基于jQuery的对象切换插件,层、图片切换
之前我们有分享过很多炫酷和实用的jQuery焦点图插件,他们中的很多都拥有华丽的切换动画和播放方式,可以手动点击按钮切换,也可以自动切换。今天我们要介绍的这款jQuery多动画切换焦点图插件是自动播放的,它的切换...
基于jQuery的对象切换插件,可用在图片轮播,tab切换
基于jquery的图片切换插件,下载解压zip包,浏览器打开index.html,此为演示代码。使用方便。
jQuery带缩略图与标题切换焦点图,这款jQuery焦点图拥有缩略图,而且在切换到大图片时图片还有描述,非常酷的jQuery焦点图。
jQuery左右全屏渐变切换焦点图
焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,插件是基于jQuery的,各种浏览器的兼容性应该还不错。 下面是实现这款...
jQuery多图块批量切换焦点图插件 jQuery多图块批量切换焦点图插件
[荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载.rar
这是一款比较特别的焦点图插件,前面我们分享的jQuery焦点图插件大部分都是平面图片的切换,再配合多种切换动画,比如这款底部带缩略图的jQuery轮播焦点图。今天我们要给大家分享的是一款jQuery/CSS3 3D旋转图片切换...
之前我们介绍过很多基于jQuery和HTML5的焦点图动画插件,比如这款jQuery 3D翻转切换焦点图插件就非常有特色。这次就再分享一款十分有特色的jQuery层叠文字切换焦点图动画,效果也是很不错,不妨可以试试这款jQuery...
基于jQuery全屏焦点图切换插件responsiveslides.zip
基于jquery的css切换插件,调用简单方便
jQuery ui slider自适应全屏焦点图片轮播切换插件
之前我们分享过很多炫酷和实用的jQuery焦点图插件,比如这款HTML5/jQuery 3D焦点图插件 ...这次要分享的同样是一款基于jQuery的焦点图插件,它的切换动画是3D翻转,可以支持任意HTML元素块的切换,并且支持鼠标滚轮。