会议管理拖动效果的页面制作1
2013-04-17 14:01
218 查看
记得几个月前,曾经做过会议室预定显示、预定的功能,但是当时是一个彻彻底底小白,啥都不会,别人好的效果也做不出来。近日来通过对jquery和javascript的学习,照样画葫芦的模仿了那个效果。
先贴张别人的效果图View Code
jquery我用的是1.7.2
写这个一方面说明了这几天javascript和jquery不是白学,同时还能加深印象,最重要的一点是若能有大神看到,顺带指点我这个超级小白一二,那岂不美哉!小白先撤做后台代码去。
先贴张别人的效果图View Code
(function ($) { $.fn.hytd = function () { return this.each(function () { var moveable = false var items = []; //建立数组items来存储td对象 var items_positon = []; var obj_moveover = null; var i_begin = null; var i_end = null; var t = $(this); _t = this; function getitems() { t.find("td").each(function () { var pos = {}; pos.obj = this; pos.left = $(this).offset().left; pos.top = $(this).offset().top; items_positon.push(pos); }) } function _mousedown(e) { e = e || window.event; i_end = null; var mouse_left = e.pageX; for (var i = 0; i < items_positon.length; i++) { if (mouse_left > items_positon[i].left) { i_begin = i; } } moveable = true; } function _mouseup(e) { e = e || window.event; moveable = false; } function mousemoveobj(e) { e = e || window.event; if (moveable) { var mouse_left = e.pageX; for (var i = 0; i < items_positon.length; i++) { if (mouse_left > items_positon[i].left) { //obj_moveover = items_positon[i]; obj_moveover1 = items_positon[i + 1]; i_end = i; } } } if (i_end != null) { for (var i = 0; i < items_positon.length; i++) { if ((i < i_end && i > i_begin) || (i > i_end && i < i_begin) || (i == i_begin && i_begin != i_end)) { $(items_positon[i].obj).css('background', 'yellow'); } else { $(items_positon[i].obj).css('background', 'green'); } } } } var getobj_x = function (obj) { var ret = 0; while (obj != null) { ret += obj.offsetLeft; obj = obj.offsetParent; } return ret; } function init() { getitems(); t.find("td").bind('mousedown', _mousedown).bind('mousemove', mousemoveobj); $(document).bind('mouseup', _mouseup); } init(); }) } })(jQuery);
jquery我用的是1.7.2
写这个一方面说明了这几天javascript和jquery不是白学,同时还能加深印象,最重要的一点是若能有大神看到,顺带指点我这个超级小白一二,那岂不美哉!小白先撤做后台代码去。
相关文章推荐
- Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
- DTCMS插件的制作实例电子资源管理(二)Admin后台页面编写
- Swift - 使用CATransition制作过渡动画(页面切换转场效果)
- delphi主i窗口中实现多页面管理效果
- ViewPager页面拖动到最前或最后的时候回弹效果
- jquery实现页面控件拖动效果js代码
- ViewPager加载页面,底部圆点指示器,圆点拖动效果,支持手势拖动
- Android - FragmentTabHost 与 Fragment 制作页面切换效果
- (一)如何制作信息管理系统的注册页面
- 【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
- 超酷百度百科的页面导航效果,轻松制作---有图有真相!
- 如何制作类似msn(QQ)等网页中的拖动效果(二)
- ASP.NET动态网站开发培训-22.论文管理系统(二、制作论文标题页面)
- 用JS制作博客页面背景随滚动渐变的效果
- delay()--一个很常用的jquery方法,制作页面动画效果的利器
- 用JavaScript实现像PDA式的页面鼠标拖动效果!经典!
- ASP.NET动态网站开发培训-24.论文管理系统(四、制作Login页面和后台论文管理主页)
- js实现div在页面拖动效果
- 实现页面元素拖动效果的JS函数
- Axure学习——如何制作页面滑动效果