插件描述：网站常见组件合集
这只是我自己在工作之余写的一个一些网站上常见的插件，然后我就厚颜无耻的以自己的名字命名了，求轻喷！！！
放在博客上也不是想炫耀什么的，毕竟我还是一个技术渣，只是希望能给部分人一些借鉴和参考。
下面我就简单的介绍一下这个插件吧！
一、文件引入
插件是基于jq来写的（毕竟我是一个jq狗），所以在引项目文件之前需引入jq文件，如下
1 2 | <script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/simba.webSite.js"></script> |
二、插件介绍
1、轮播
首先html结构如下
1 2 3 4 5 6 7 | <div class="slider" e-fun="slider"> <a href="javascript:"><img src="./images/1.jpg" alt="" /></a> <a href="javascript:"><img src="./images/2.jpg" alt="" /></a> <a href="javascript:"><img src="./images/3.jpg" alt="" /></a> <a href="javascript:"><img src="./images/4.jpg" alt="" /></a> <a href="javascript:"><img src="./images/5.jpg" alt="" /></a></div> |
如你所看你只要设置e-fun="slider" ps：所有的组件效果都是e-开头的指令
当然你如果不想用指令，也可以直接用js初始化,效果是一样的
1 | $(".slider").slider(); |
下面是一些基本参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | imgW : 0, //轮播图片的宽度imgH : 0, //轮播图片的高度timeout : "3000", //轮播间隔时间moveTime : 500, //动画时间autoSlider : true, //是否自动轮播moveStyle : "slide", //动画效果 slide ：滑动， fade ：渐隐渐现addTag : true,//是否创建圆点标记tagSize : 12, //圆点标记的大小tagDefaultBg : "#fff", //圆点标记的默认背景tagActiveBg : "#5638d8", // 圆点标记选中背景btnShow : true, //是否显示左右按钮btnW : 30, //按钮的宽度btnH : 60, //按钮的高度btnBg : "rgba(255,255,255,.6)" //左右按钮的背景 |
2、截取字符串
html
e-num 是一个参数 表示限定字符的个数，这里我只是简单的计算了字符的长度，没有计算字节（懒的无可救药）
1 | <p id="lim" e-fun="limit" e-num="10">这里只能显示10个字符，嗯呢呢呢</p> |
js
1 | $("#lim").limit(num); //num是唯一参数 显示字符个数 |
3、Tab切换
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class=""> <h1 class="title">Tab菜单切换</h1> <div class="content"> <!--js--> <div e-fun="tab" e-event="click" e-index="0" class="tab"> <div class="clear"> <a e-tab-for="nav0">a</a> <a e-tab-for="nav1">b</a> <a e-tab-for="nav2">c</a> </div> <div> <p e-tab-nav="nav0">a</p> <p e-tab-nav="nav1">b</p> <p e-tab-nav="nav2">c</p> </div> </div> </div></div |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery模拟IOS开关按钮代码
- 下一个特效： bootstrap响应式导航