欢迎讨论指正!
print.html代码:
<!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> </head> <script type="text/javascript" src="js/jquery-2.1.1.js"></script> <script type="text/javascript" src="js/print.js"></script> <body> <div name="invoice"> <div name="stuname" id="stuname">姓名:张三</div> <div name="feeacount" id="feeacount">金额:1000元</div> <div name="schoolname" id="schoolname">单位:浙江大学</div> </div> </body> </html>
print.js代码:
/** * @name print.js * @page print.html * @author mingzijian */ $(function() { // 设定元素相对原点的初始位置 var init_x = 0; var init_y = 0; // 设定各元素的初始位置 var _stuname = $("#stuname"); var stuname_x = 10; var stuname_y = 10; var _feeacount = $("#feeacount"); var feeacount_x = 10; var feeacount_y = 70; var _schoolname = $("#schoolname"); var schoolname_x = 10; var schoolname_y = 40; var ids = [ _stuname, _feeacount, _schoolname ]; var ids_x = [ stuname_x, feeacount_x, schoolname_x ]; var ids_y = [ stuname_y, feeacount_y, schoolname_y ]; // 循环添加元素移动事件监听,添加绝对定位,改变鼠标指针样式 $.each(ids, function(i, _this) { _this.css({ 'position' : 'absolute', 'cursor' : 'crosshair', 'left' : ids_x[i], 'top' : ids_y[i] }); _this.mousedown(function(e) { beginmove(e, _this); }); }); // 开始移动元素位置 function beginmove(e, _this) { // 当前元素的位置 var offset = _this.offset(); var cx = offset.left; var cy = offset.top; // 当前鼠标的位置(移动前,鼠标按下) var sx = e.pageX; var sy = e.pageY; // 计算当前鼠标和元素之间位置的偏移量,让移动后的元素以鼠标按下时的位置为坐标。(默认以元素左上点为坐标) var px = sx - cx; var py = sy - cy; // 绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 $(document).bind("mousemove", function(ev) { // 当前鼠标的位置(移动后,鼠标弹起) sx = ev.pageX; sy = ev.pageY; // 当前元素位置 var _x = sx - px; var _y = sy - py; // 设定元素位置 _this.css({ 'left' : _x, 'top' : _y }); }); // 当鼠标按键弹起时,解除元素移动,让元素停留在当前位置 $(document).mouseup(function() { $(this).unbind("mousemove"); // 记录元素位置 $.each(ids, function(i, _this) { // 当前元素的位置 var offset = _this.offset(); var cx = offset.left; var cy = offset.top; // 保存位置 ids_x[i] = cx; ids_y[i] = cy; }); }) } });
相关推荐
jQuery 教程 源码+实例+注释jQuery 教程 源码+实例+注释jQuery 教程 源码+实例+注释jQuery 教程 源码+实例+注释
jQuery 教程 源码+实例+注释,各种实例,非常适合新手入门提高速成。收集了各种网络资源整理而成,希望对大家有所帮助。
html5+css+jquery通过鼠标拖拽来移动对象位置、改变大小、和旋转的实现 代码简洁、易懂、易改造
jQuery 教程 源码+实例+注释 [新手入门提高速成]
JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码JQuery实战(中文版)+源码...
jQuery 教程 源码+实例+注释 [新手入门提高速成].zip
jQuery实现超级可爱的猫头鹰登录页面源码+资源jQuery实现超级可爱的猫头鹰登录页面源码+资源
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大...基于Cordova和Jquery Moblie开发校园综合信息移动推送平台(源码+项目说明).zip
CSS3+jQuery实现鼠标跟随图片悬停特效源码.zip
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
实现jquery拖动;实现jquery拖动实现jquery拖动实现jquery拖动实现jquery拖动实现jquery拖动
jquery实现鼠标移动出现提示信息
基于jQuery+bootstrap框架开发简约音乐播放器网站源码+sql数据库+登录API说明.zip基于jQuery+bootstrap框架开发简约音乐播放器网站源码+sql数据库+登录API说明.zip基于jQuery+bootstrap框架开发简约音乐播放器网站...
JQuery mobile 权威指南 pdf + 源码 + 实例 陶国荣
jquery实现滑块拖动及分数计算jquery实现滑块拖动及分数计算jquery实现滑块拖动及分数计算jquery实现滑块拖动及分数计算
jquery1.2.6源码分析,其中里面含有源码详细的中文注释