2012年5月28日
javascript--鼠标拖动
摘要： 因为鼠标没有拖动事件(按下鼠标并移动)，只有按下，抬起，移动。记得在之前的一个"拖动层"的随笔中，我实现拖动，是用的一个布尔变量,判断是否可以拖动某元素。这两天看了一些东西，发现不需要设这个布尔变量;实现过程：按下鼠标的时候，给文档对象（当然也可以是别的DOM对象）的移动事件绑定一个处理函数，同时也给鼠标抬起时绑定一个解除的处理函数。//按下鼠标并移动时(拖动)，调用的函数； function startSelection(event){ …… }//解除移动时的处理函数； function cancelSelection() { $(docume... 阅读全文
posted @ 2012-05-28 11:28 o0Luffy0o 阅读(647) 评论(0) 推荐(0) 编辑
2012年5月26日
jQuery-图片上传裁剪插件--imgAreaSelect(分析四) 上传服务器端
摘要： 1.选把图片，上传到服务器2.成功上传后，将服务端的图片地址反回给客户端的网页当中，并显示在一个DOM元素中（大图，需要被裁剪的图）3.用前端的裁剪效果，选择区域，然后再次点击一个确定。4.点击确定后，可以将选择区域获取到的，宽、高，X1、Y1、X2、Y2这几个值，传给服务器端.5.服务器端的页面接收到这些信息后，根据这些信息通过服务器端的编程语言当中的某个对象或方法，在服务器端指定的位置，创建出一个新的图片文件。6.将这个创建出来的，新图片的地址，返回给客户端。显示在某个DOM元素当中（小图，裁剪之后的图）。 阅读全文
posted @ 2012-05-26 09:00 o0Luffy0o 阅读(910) 评论(0) 推荐(0) 编辑
2012年5月25日
jQuery-图片上传裁剪插件--imgAreaSelect(分析三) 如何获得选择域的图像信息
摘要： 还是先来分析一下：（以下的值，如何获得，以后在具体的实现中再来分析，现在只谈宏观的）如何获得选择域的图像信息? 其实就是要我们如何获得这个选择区域，在图像中的那个位置，并且这个区域的大小是多少？把位置和大小告诉了计算机，它就知道我们是要获取那一块的图像信息了。（我们的选择区域，是在一个平面当中，而且是一个规则的图形，正方形，或都矩形（通俗：长方形））大小：这个区域的宽度，高度值，两值相乘，就是这个区域的面积，即大小。（这个应该不难）位置：1.假设我们只告诉计算机,这个选择区域一个[起始点的坐标值],而且也告诉电脑这个区域的[面积]那么符合这两个条件情况有四：“红色”为选择区域的起始点坐标；A、 阅读全文
posted @ 2012-05-25 15:17 o0Luffy0o 阅读(1658) 评论(0) 推荐(0) 编辑
jQuery-图片上传裁剪插件--imgAreaSelect(分析二) 同步显示图像位置信息
摘要： <body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images/resized_pic.jpg" alt="" /> 阅读全文
posted @ 2012-05-25 14:35 o0Luffy0o 阅读(2334) 评论(0) 推荐(1) 编辑
jQuery-图片上传裁剪插件--imgAreaSelect(分析一) 放大缩小
摘要： 这个应用的关键：　1.让左边选择区域和右边显示的图像信息保持一至。　2.根据左边选择区域的大小，来让右边有一个对局部放大或缩小的效果。 3.后台上传功能。 那么这一次，只谈[放大]或[缩小]。[位置]和[上传]问题，下次，我再写下(因为那个插件代码太多，我也没看完，正在学习研究当中)。［"区域"：是宽*高，也就是面积；]［"放大或缩小"：是一个比例值，通常我们说放大或缩小，都说放大或缩小百分之多少，或者说放大或缩小多少倍数］一、怎么能放大或者缩小图片的局部？ 局部放大：实质是将图片整个放大，即把图片的宽度和高度改变大，然后将放大后的图片，在一个固定大小( 阅读全文
posted @ 2012-05-25 13:40 o0Luffy0o 阅读(10732) 评论(0) 推荐(1) 编辑
2012年5月24日
jQuery-拖动层(在可视区域范围内)
摘要： (function($){ $.fn.extend({ mydrag:function(){ var boxX = 0; //元素在页面中的横坐标 var boxY = 0; //元素在页面中的纵坐标 var dMouseX = 0; //按下鼠标时的鼠标所在位置的横坐标 var dMouseY = 0; //按下鼠标时的... 阅读全文
posted @ 2012-05-24 16:28 o0Luffy0o 阅读(4148) 评论(0) 推荐(0) 编辑
jQuery-菜单随滚条改为以定位方式
摘要： 在淘宝购物的时候，发现里面有一个菜单，是查看“评论，物品信息”等的一个菜单。由于页面太长，所以它做了一个菜单定位。自己试着写了下：$(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".nav").offset().top; //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定 ... 阅读全文
posted @ 2012-05-24 09:43 o0Luffy0o 阅读(625) 评论(1) 推荐(0) 编辑
2012年5月23日
jQuery-表格的排序，
摘要： $(function(){ //存入点击列的每一个TD的内容； var aTdCont = []; //点击列的索引值 var thi = 0 //重新对TR进行排序 var setTrIndex = function(tdIndex){ for(i=0;i<aTdCont.length;i++){ var trCont = aTdCont[i]; $("tbody tr").each(function() { var thisText = $(this).chil... 阅读全文
posted @ 2012-05-23 17:47 o0Luffy0o 阅读(7982) 评论(0) 推荐(1) 编辑
2012年5月22日
jQuery-瀑布流-绝对定位布局（二）(延迟AJAX加载图片)
摘要： 瀑布流-绝对定位布局，与浮动布局的区别在于1.布局不一样： 绝对定位：一个UL里面放置所有的绝对定位的LI； 浮动布局：多个（一般三四个）UL分布放置LI；2.AJAX不一样 绝对定位：只需要将请求来的JSON数据（当然可以是别的格式的数据），插入到UL就可以了。然后再对这个新插入的LI进行TOP和LEFT设置； 浮动布置：是将请求来的JSON数据（当然可以是别的格式的数据），分别插入到对应的UL当中，因为有绝对定位，所以不用对LI设置位置。会自动向下排列；一、功能分析： 1.定位每一个LI，即设置每一个LI的TOP和LEFT值； 2.将AJAX的数据，放在LI中，插入到UL当中；... 阅读全文
posted @ 2012-05-22 14:01 o0Luffy0o 阅读(2706) 评论(4) 推荐(0) 编辑
jQuery-瀑布流-浮动布局（一）(延迟AJAX加载图片)
摘要： 瀑布流：这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。浮动布局:即HTML结构的列，是用浮动方式。[哇哦-淘宝]http://wow.taobao.com/在线实例!一、功能分析： 1.判断图片是否进入可视区域； 2.用AJAX请求服务器数据； 3.将数据播入到相应的列队；二、实现方法： 给window的scroll事件l绑定一个处理函数：做如下工作： 1.如何判断最后一行的图片，是否进入了可视区域？ 如果：最后一行的某个图片距离浏览器可视区域顶部的距离值 小于 （可视区域的高度+滚动条滑动的距离... 阅读全文
posted @ 2012-05-22 13:36 o0Luffy0o 阅读(6728) 评论(0) 推荐(1) 编辑