`

jquery 移动2

 
阅读更多
  1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content=""> <title>小车匠TEST</title> <link href="css/common.css" rel="stylesheet" /> <link href="css/layout.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/test-haoliqiang-20141218.js"></script> </head> <body> <div class="question"> <p class="question-title"> (1). 根据2007 款丰田卡罗拉电动车窗系统结构及位置,请对图片中所指位置进行名称匹配。(061301-考查识记层面) </p> <div class="firstQuestion-reference"> <div class="firstQuestion-referenceTipTW" id="mobileOne"> 拖到这里来1 </div> <div class="firstQuestion-referenceTipON"> 拖到这里来2 </div> <div class="firstQuestion-referenceTipTH"> 拖到这里来4 </div> <div class="firstQuestion-referenceTipFO"> 拖到这里来3 </div> </div> <div> <div id="one" class="firstQuestion-option-noe"> 车窗调节器 </div> <input type="text" id="l" value="0" /> <input type="text" id="t" value="0" /> <!--div id="two" class="firstQuestion-option"> 电动车窗马达 </div> <div id="thress" class="firstQuestion-option"> 电动车窗总开关 </div> <div id="four" class="firstQuestion-option"> 门控开关 </div--> </div> <button class="question-btn"> 下一题 </button> </div> </body> <script type="text/javascript"> $(function(){ $('#one').mousedown( function (event) { var isMove = true; var abs_x = event.pageX - $("#one").offset().left; var abs_y = event.pageY - $("#one").offset().top; $(document).mousemove(function (event) { if (isMove) { var obj = $("#one"); obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); var l = event.pageX - abs_x; var t = event.pageY - abs_y; $("#l").attr("value",l); $("#t").attr("value",t); } }).mouseup(function () { isMove = false; }); }); }); </script> </html>
分享到:
评论

相关推荐

    jQuery移动Web开发(第二版).zip

    《jQuery移动Web开发(第二版)》是一本深入探讨如何使用jQuery进行移动Web应用开发的专业书籍。这本书籍的源代码包含在名为"jQuery-Mobile-Book-master"的压缩包中,为读者提供了丰富的实践示例和代码参考。jQuery,...

    jQuery移动开发

    提供的"jQuery移动开发(案例)"可能包含实际项目的代码示例和应用实践,可以帮助学习者深入理解如何将理论知识应用于实际项目中。案例可能涵盖了各种常见功能的实现,如页面布局、表单验证、导航控制、自定义组件等...

    jQuery移动选项卡.zip

    在本文中,我们将深入探讨jQuery移动选项卡这一技术,它是一种常见的前端开发工具,用于创建交互式的、响应式选项卡式界面。这种效果是通过JavaScript库jQuery实现的,旨在为移动设备提供良好的用户体验,同时也兼容...

    jquery移动重叠滑块

    jquery插件实现的 移动重叠滑块 效果

    [jQuery移动开发].(jQuery.Mobile).Jon.Reid.文字版

    - **概述**:jQuery Mobile 是一个基于 jQuery 的开源框架,专为移动设备设计,能够帮助开发者快速创建响应式的移动网页应用程序。它通过一系列的高度优化的 CSS 和 JavaScript 代码实现了良好的用户体验。 - **工作...

    jQuery鼠标移动发出气泡动画

    3. **编写jQuery代码**:接下来,使用jQuery监听鼠标的move事件,当鼠标移动时,生成气泡并添加到Canvas上。同时,显示气泡内容div: ```javascript $(document).ready(function() { var canvas = $('#bubbleCanvas...

    移动div(jquery)

    结合“移动”和“jquery”的标签,我们可以看出这个压缩包文件可能包含了一个演示如何用jQuery移动div的实例或教程。文件名为"jquery-div",很可能是一个包含了相关示例代码的HTML或JS文件,供学习者参考和实践。

    jQuery左右移动图片

    "jQuery左右移动图片"是一个常见的网页交互功能,它允许用户通过点击或滑动按钮来浏览一组图片,从第一张平滑过渡到最后一张,或者从最后一张回到第一张,形成一个无缝循环的视觉体验。这个功能的实现基于JavaScript...

    jQuery实现图片移动效果

    在本文中,我们将深入探讨如何使用jQuery库来实现图片的左右移动效果,即所谓的滑动切换功能。这种效果常用于创建动态的图像展示或轮播图组件,为用户带来更丰富的交互体验。jQuery是一个轻量级、高性能的JavaScript...

    jquery实现文字移动

    本教程将深入讲解如何使用jQuery来实现文字的左右来回移动效果,这是一个常见的动态效果,常用于网站的欢迎语或者广告标语。 首先,确保你的项目中已经引入了jQuery库。可以通过在HTML文件的`&lt;head&gt;`标签内添加如下...

    jquery背景移动插件

    《jQuery背景移动插件详解与应用实践》 在网页设计中,动态背景往往能为用户带来更为生动的视觉体验,而jQuery作为一款广泛使用的JavaScript库,提供了丰富的功能和简便的操作方式,使得实现背景移动效果变得...

    jquery实现上下移动

    本教程将详细讲解如何利用jQuery实现表格内容的上下移动功能,以及随之变动的序号更新。 一、jQuery基础 jQuery通过提供简洁的API,使得JavaScript代码更易于编写和理解。其核心概念包括选择器(用于选取DOM元素)...

    jquery移动开发组件包

    `jQuery Mobile` 是一个专为触摸设备设计的前端框架,它基于 jQuery 库,提供了丰富的用户界面组件和交互效果,适用于移动应用和响应式网站的开发。在这个名为 `jquery.mobile-1.2.0.rar` 的压缩包中,包含了进行 ...

    jquery移动端商城网站模板

    2. **触屏事件处理**:jQuery为移动端提供了针对触屏操作的事件处理,如`touchstart`、`touchmove`、`touchend`等,这些事件可以替代传统的鼠标事件,使用户在触摸屏设备上能顺畅地浏览和交互。 3. **页面滚动优化*...

    jquery 移动星星特效

    在本文中,我们将深入探讨如何使用jQuery来实现一个生动有趣的移动星星特效,包括星星从左到右的平移、渐隐渐现的效果、滑动时的抖动效果,以及点击星星后弹出层的显示与星星运动的暂停。首先,我们需要理解jQuery库...

    五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星

    五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 ...

    jQuery移动开发(jQuery Mobile)

    ### jQuery移动开发(jQuery Mobile) #### 一、概述 **jQuery Mobile** 是一个基于 jQuery 的开源框架,专门用于创建响应式、触摸友好的移动 Web 应用程序。它旨在为移动设备提供统一的设计和功能,支持多种平台...

    jquery实现鼠标移动出现提示信息

    2. 鼠标移动事件可以使用 jQuery 的 `mousemove` 方法来监听。 3. 提示信息可以使用 HTML 元素来显示,例如 `&lt;div&gt;` 或 `&lt;span&gt;` 等。 4. 使用 CSS 可以美化提示信息的样式,例如背景颜色、字体颜色、边框样式等。 5...

    《构建跨平台APP-jQuery.Mobile移动应用实战》 PDF

    jQuery Mobile是目前*流行的跨平台移动开发框架,本书以实例驱动讲解的方式,让零基础的读者也能轻松掌握jQuery Mobile下的应用开发。本书分为4篇,*篇是移动开发入门篇,介绍了jQuery Mobile、HTML 5和移动开发的...

Global site tag (gtag.js) - Google Analytics