需求示例:
一、插件API
1、插件使用
$.slide( container, contentCls, triggerCls, config );
2、必选参数
container: selector, // 外围盒子选择器 contentCls: selector, // 内容面板父容器ClassName triggerCls: selector, // 触发器父容器ClassName
3、config配置可选参数,例 :
{ auto: true, // 是否自动轮播,默认false delay: 4000, // 自动轮播延迟时间,默认4000,单位毫秒 interval: 4000, // 自动轮播间隙时间,默认4400,单位毫秒 duration: 400, // 轮播动画持续时间,默认400,单位毫秒 easing: 'linear', // 轮播过渡方式,默认swing activeCls: 'current' // 触发器激活样式,默认slide-active }
二、插件源码
/* * @作者 华子yjh http://www.cnblogs.com/yangjunhua/ * @date 2013/04/23 11:00:00 * @source 博客园 */ $.extend({ slide: function( container, contentCls, triggerCls, config ){ // 外围盒子 var container_box = $(container), // 内容父元素 content_box = $(contentCls, container), // 触发器父元素 trigger_box = $(triggerCls, container), // 内容子元素集合 content_childs = $(contentCls, container).children(), // 第一个内容子元素 first_CtnElem = $(content_childs.get(0)), // 触发器子元素集合 trigger_elems = $(triggerCls, container).children(), // 滚动步伐值(固定,每个内容子元素宽度相同) fixed_steps = first_CtnElem.width(), // 内容子元素长度 len = content_childs.length, // 内容子元素总长度 total_w = fixed_steps*len, // 初始化left变量 left = 0, // 定时器 setTimeoutId, // 默认配置 defaultConfig = { auto: false, delay: 4000, interval: 4400, duration: 400, easing: 'swing', activeCls: 'slide-active' }; // 配置项 config = $.isPlainObject(config)&&config ? $.extend( defaultConfig, config )&&defaultConfig : defaultConfig; // 定时器绑定函数 function autoSlide(){ left = parseInt(content_box.get(0).style.left, 10); left = left - fixed_steps; // 获取下一次轮播left值 // 为当前触发器元素增加激活样式 var curIndex = Math.abs(left/fixed_steps); if (curIndex <= len-1) { $(trigger_elems[curIndex]).addClass(config.activeCls).siblings().removeClass(config.activeCls); } else { $(trigger_elems[0]).addClass(config.activeCls).siblings().removeClass(config.activeCls); } // 轮播计算 if (Math.abs(left) < total_w) { content_box.stop(true, true).animate({ left: left + 'px' }, config.duration, config.easing, function(){ // 轮播到最后一项时,第一个内容子元素更新position,left属性值 if (Math.abs(left) === (total_w-fixed_steps)) { first_CtnElem.css({ position: 'relative', left: total_w + 'px' }); } }); } else { // 动画left为负的total_w像素时,重置第一个内容子元素和其自身样式 content_box.stop(true, true).animate({ left: left + 'px' }, config.duration, config.easing, function(){ $(content_childs.get(0)).css({ position: '', left: '' }); content_box.css({ left: 0 }); }); } // 定时器 setTimeoutId = setTimeout(autoSlide, config.interval); } // 初始化操作 content_box.css({ total_w + 'px', position: 'absolute', top: 0, left: 0}); // 是否自动轮播 if (!!config.auto) { setTimeoutId = setTimeout(autoSlide, config.delay); } // 触发器绑定事件 $(trigger_elems).bind('mouseover', function(e){ var curTarget = e.currentTarget, idx = trigger_elems.index(curTarget); left = -(total_w/len)*idx; $(curTarget).addClass(config.activeCls).siblings().removeClass(config.activeCls); content_box.stop(true, true).animate({ left: left + 'px' }, config.duration, config.easing, function(){ first_CtnElem.css({ position: '', left: '' }); // 轮播到最后一项时,第一个内容子元素更新position,left属性值 if (Math.abs(left) === (total_w-fixed_steps)) { first_CtnElem.css({ position: 'relative', left: total_w + 'px' }); } }); }); // 外围盒子绑定事件 // 触发mouseover事件,取消在各种情景中正在执行的定时器,避免与触发器元素所触发的事件代码冲突 container_box.bind('mouseover', function(e){ // 第一次触发mouseover事件时,如果延迟时间还没过时,则取消定时器setTimeoutId // 第一次触发mouseover事件时,如果延迟已过,则取消正在执行的定时器setTimeoutId // 如果超过一次触发mouseover事件时,则取消由mouseleave事件所触发的定时器 clearTimeout(setTimeoutId); }); // 触发mouseleave事件,增加定时器,自动轮播得以继续 container_box.bind('mouseleave', function(e){ setTimeoutId = setTimeout(autoSlide, config.interval); }); return this; } });
三、示例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery Slide</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <style> * { margin: 0; padding: 0; } img { display: block; border: none; } body { font-size: 12px; font-family: '微软雅黑'; } ul { list-style: none; } .clear-fix:after { content: ' '; display: block; height: 0; visibility: hidden; clear: both; } .clear-fix { zoom: 1; } #container { margin: 0 auto; width: 520px; height: 320px; overflow: hidden; position: relative; } .content li { width: 520px; height: 320px; float: left; } .trigger { position: absolute; bottom: 10px; right: 10px; } .trigger li { float: left; display: inline; margin-left: 10px; color: #333; font-size: 18px; line-height: 18px; overflow: hidden; cursor: pointer; } .trigger li.current { color: red; } </style> </head> <body> <div id="container"> <ul class="clear-fix content"> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img04.taobaocdn.com/tps/i4/T1Ei5gXENcXXbsjuY7-520-320.png"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img01.taobaocdn.com/tps/i1/T1bT4MXEJgXXbsjuY7-520-320.png"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img02.taobaocdn.com/tps/i2/T1d4ibXvFaXXbsjuY7-520-320.png"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img04.taobaocdn.com/tps/i4/T11Tt_XstbXXbsjuY7-520-320.png"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img03.taobaocdn.com/tps/i3/T1uqOfXxxaXXcQhuY7-520-320.jpg"> </a> </li> <li> <a href="" target="_blank"> <img width="520" height="320" src="http://img03.taobaocdn.com/tps/i3/T1o7l8XCRbXXbsjuY7-520-320.png"> </a> </li> </ul> <ul class="clear-fix trigger"> <li class="current">●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <script> // 此处为插件源码,省略 $(function(){ $.slide( '#container', '.content', '.trigger', { auto: true, delay: 4000, interval: 4000, duration: 400, easing: 'linear', activeCls: 'current' } ); }); </script> </body> </html>
PS:各个内容面板宽度必须一致,还有外围container容器CSS样式必须为相对定位
css常见两列布局方案
一、固定宽度两列布局
1.侧栏在左
- <divid="wrapper">
- <divid="header">header</div>
- <divid="container"class="cls">
- <divid="aside">
- <divclass="inner">aside</div>
- </div>
- <divid="main">
- <divclass="inner">main</div>
- </div>
- </div>
- <divid="footer">footer</div>
- </div>
- #header{ 980px; height: 90px; margin: 0 auto; background: #f60;}
- #container{ 980px; height: 500px; margin: 0 auto;}
- #aside{ float: left; 240px; height: 500px; background: #ccc;}
- #main{ float: left; 740px; height: 500px; background: orange;}
- #footer{ 980px; height: 90px; margin: 0 auto; background: #08f;}
2.侧栏在右
- <divid="wrapper">
- <divid="header">header</div>
- <divid="container"class="cls">
- <divid="main">
- <divclass="inner">main</div>
- </div>
- <divid="aside">
- <divclass="inner">aside</div>
- </div>
- </div>
- <divid="footer">footer</div>
- </div>
- #header{ 980px; height: 90px; margin: 0 auto; background: #f60;}
- #container{ 980px; height: 500px; margin: 0 auto;}
- #main{ float: left; 740px; height: 500px; background: orange;}
- #aside{ float:left; 240px; height: 500px; background: #ccc;}
- #footer{ 980px; height: 90px; margin: 0 auto; background: #08f;}
二、自适应布局
1.固定左栏右侧自适应
- <divid="wrapper">
- <divid="header">header</div>
- <divid="container"class="cls">
- <divid="aside">
- <divclass="inner">
- aside
- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
- </div>
- </div>
- <divid="main">
- <divclass="inner">
- main
- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
- </div>
- </div>
- </div>
- <divid="footer">footer</div>
- </div>
- #header{ 96%; height: 90px; margin: 0 auto; background: #f60;}
- #container{ 96%; margin: 0 auto;}
- #aside{ float: left; 240px; background: #ccc;}
- #main{ margin-left: 240px; background: orange; }
- #footer{ 96%; height: 90px; margin: 0 auto; background: #08f;}
2.固定右栏左侧自适应
- <divid="wrapper">
- <divid="header">header</div>
- <divid="container"class="cls">
- <divid="main">
- <divclass="inner">
- main
- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
- </div>
- </div>
- <divid="aside">
- <divclass="inner">
- aside
- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
- </div>
- </div>
- </div>
- <divid="footer">footer</div>
- </div>
- #header{ 96%; height: 90px; margin: 0 auto; background: #f60;}
- #container{ 96%; height: 500px; margin: 0 auto;}
- #main{ float: left; 100%; background: orange;}
- #main .inner{ padding-right: 240px;}
- #aside{ float: left; 240px; margin-left: -240px; background: #ccc;}
- #footer{ 96%; height: 90px; margin: 0 auto; background: #08f;}
分类: JavaScript, jQuery插件
VS2010 生成的程序在其他电脑上不运行的问题
如果您也出现了这样的情况:
win7 sp1 64位操作系统,自己用visual studio 2010 旗舰版写了一个财务管理软件,在自己电脑上运行完全没有问题,但是拷
贝到其他人电脑上之后不管双击还是以管理身份运行,均没有反应,进程管理器中相关进程也只是一闪而过。之后在网上搜得说是改为使用
mfc静态链接,我也相应的改了,然后生成的release,可是还是在其他人电脑上没有反应。
无奈,只好在网上继续搜索结果,最后定在是不是.net framework版本的问题上,网上说改为2.0版本可以解决,然后我就打开项目属性
,悲剧的发现目标Framework 直接显示的4.0,连下拉条都没有...而且我的通用属性的配置及平台选项均是不适用状态...我又新建一mfc工
程,在新建菜单时上方有可以选择的.net 版本,我选择了2.0版本,但是新建之后打开属性它还是显示的4.0! 继续在网上搜索之后,得知
安装.net framework 3.5 sp1之后可以解决问题,然后我就开始安装.net 3.5 sp1,但是无论是下载在线安装版还是完整安装版,都安装不
起,有三种状况:
1、无论点击那个安装都没有反应....也没有相应进程
2、多次重启之后终于有了反应,但是打开没一会就提示我必须使用“打开或关闭windows功能”才可以安装或配置.net 3.5,我也照着
做了,在“打开或关闭...”中不断地勾上它,重启,打开vs2010,没有变化,去掉它,重启,打开vs2010,新建项目时就只有4.0一个选项
了。然后再去掉它,重启,打开vs,又恢复原来的样子,还是不行,重复了多遍之后,彻底无语了。
3,继续搜啊搜,发现win7 是自带了.net 3.5的,但是我就是不能用呢!!然后我继续在“打开关闭windows功能”中去掉.net 3.5的勾
,重启,安装.net 3.5 sp1,他终于进入安装了,但是在安装到一半多的时候被程序兼容性助手阻止了!!说.net framework 3.5 sp1
language pack包会导致什么系统不能启动....随后我自己去官网下载了.net framework 3.5 sp1 language pack 64位安装包,单独安装也
是被阻止!(此处引用百度知道)
1、首先你做一个最简单的程序去测试,看看能否发布成功。如果能,第二步,检查程序。第三步,拷到具有相同环境的机器上,看能否运行。(如果不能,说明你的环境有问题)
2、如果不能发布成功,检查你的环境,或者你的vs配置。
我碰到的问题如下:
1、在本机上可以运行,但是放到其它机器上不能运行,大概会在线程中出现十秒的样子,然后自动被干掉,估计就是程序的问题了。然后把代码拷到别人机器上运行,
靠竟然出现了绝对路径(我觉得自己很SB)然后我弱弱的注释掉了。就这样一直不行一直调试,直到天黑。
你发现什么问题了吧,对就是我的路径,我怎么用绝对路径了呢,是大意了还是水平不行吧。
2、值得注意的是,我竟然还有资源文件没有拷贝进去,copy,past,搞定
总结:1、碰到问题从最简单的开始测试
2、千万不要写绝对路径,会死人的
3、想好了再动手,出问题了不能敷衍,没搞好问题的根源就在那,想想为什么报错。
4、打开文件的地方(这里被我忽略了),数据连接的地方必须抛出异常。