本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:https://github.com/zhaogaojian/JGUI 效果觉得好的给个star,谢谢! 源码未压缩,请右键查看网页源码,相关文件有accordion.js,accordion.css,index.html 隐藏滚动条可以通过设置margin隐藏滚动条方式实现,css3支持直接隐藏滚动条…

//电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel"; $(".jgui-accordion").on(mousewheel, function(event) { var delta = 0; var direction = 0; if (!event) /* For IE. */ event =…

开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQuery实现,以后有时间会再做一套vue版本的.有好的建议欢迎大家留言. 3.自己在开发过程中遇到的问题和心得将会写到博客上,在实现过程中由简单到复杂实现,一些功能前期只考虑功能实现,后期再进行优化. 4.本框架是一个学习型的框架,功能都尽量自己手工敲代码实现,虽然有点造轮子,但是对深入理解Jquery…

bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js"></script>下面是JS代码:$(document).ready(function(){ //手势右滑 $('#myCarousel').bind('swiperight swiperightup swiperightdown',function(){ // 执行一些动作..…

下载源码 技术要点:  1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运行效果:…

我们知道Jquery绑定事件后的新添加的对象是不响应事件的,为了解决这个问题,动态添加的对象需要从新绑定,使用一个init方法实现代码如下 //Accordion封装 (function($) { J.Accordion = function($p_selector) { init = function(p_options, p_datas, p_param) { return $p_selector.each(function() { var $accordion = $(this); var…

程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui-tab")).init(); }); //Tab封装 (function($) { J.JTab = function($p_selector) { //初始化 init = function(p_options, p_datas, p_param) { return $p_selector.eac…

如转载 请注明出处 http://blog.csdn.net/sk719887916 比如我们很多项目中会用到listview 并且要对listview滑动方向进行判断 也有需要的到listview是否是已滑到顶部和底部.这种需求一般是比如我们下滑listiew是时候影藏一个顶部的标题控件 或者展现一个顶部的提示控件,比如百家姓,电话本,就是要展现当前的首字母在屏幕中央 ,还有很多比如贴吧的app 我们对评论滑动的时候就得要去隐藏或者收缩顶部的楼主贴 这样对于小屏幕手机是一种不错的选择.现在让我…

轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中使用,同时兼容pc端和触屏端. 轮播图的样式也分很多种,淡入淡出的轮播图很容易实现,只需要把图片全都叠在一起,让相应的图片轮流显示就行了,但是滚动能的轮播图就要复杂很多.这里介绍的是滚动的轮播图: 原理: 实现的原理就是将所有的图片横向的排列起来,排成一个长方形,让这个长方形的总体不断平移,从而使图…

折叠和非折叠效果如左右图所示 代码如下 //折叠 $.fn.jAccordionfold = function() { return this.each(function() { var obj = $(this); obj.find('.jgui-accordion-navitem').siblings("dd").slideUp(); obj.find('.jgui-accordion-navitem span').hide(); obj.find('.jgui-accordion…