页面效果如下:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="/WX_TEST/js/jquery-1.4.3.min.js"></script> <style> #ulLeft {float:left;list-style:none;border:1px solid #000;padding:0;width:100px;height:120px} #ulRight {float:left;list-style:none;border:1px solid #000;margin-left:100px;padding:0;width:100px;height:120px} .selLi {background:green} </style> </head> <body> <div id="divAll"> <ul id="ulLeft"> </ul> <ul id="ulRight"> </ul> </div> </body> <script> $(function(){ var jsonArr = [{"id":1,"name":"Andrew"}, {"id":2,"name":"Bruce"}, {"id":3,"name":"Simpzon"}, {"id":4,"name":"SitePoint"}]; for(var index=0;index<jsonArr.length;index++){ var liObj = $("<li id="+ jsonArr[index].id +">"+ jsonArr[index].name +"</li>") .click(function(){ if($(this).parent().attr("id") == "ulLeft"){ $("#ulRight").append($(this)); }else{ $("#ulLeft").append($(this)); } }) $("#ulLeft").append(liObj); } }); </script> </html>
相关推荐
动态背景的一个常见实现是使用CSS3的精灵图(sprite)技术,结合jQuery的定时器功能。通过改变背景位置,可以实现无限循环的背景动画。例如,你可以创建一个包含多个状态的背景图像,然后使用jQuery每隔一定时间调整...
【jQuery实现动态天气效果】 ...通过以上步骤,你就可以使用jQuery实现一个动态的天气效果展示,为用户带来生动有趣的交互体验。记得在实际项目中,根据需求和性能考虑选择合适的API、动画效果以及优化策略。
描述中的“上下移动调整次序”功能,可以通过获取问卷问题的DOM元素,然后利用jQuery的`.before()`和`.after()`方法来调整它们在DOM树中的位置。例如,如果用户希望将一个问题上移,我们可以找到该问题的DOM节点,...
本文将详细探讨如何使用JQuery库来实现各种排序算法的动态生成效果,包括冒泡排序、堆排序、快速排序和插入排序,并在同一个界面上对比这些排序算法的效率。 首先,让我们从冒泡排序开始。冒泡排序是一种简单直观的...
总结来说,结合jQuery和二维码生成库,我们可以轻松实现一个动态生成二维码的Web应用,为用户提供便捷的网址分享方式。这个过程涉及到了前端开发中的表单处理、事件监听、第三方库的使用等多个知识点,是学习和实践...
标题中的“基于bootstrap和jquery的可拖拽移动div,可预览的页面生成器”指的是一个Web开发工具,它利用Bootstrap框架和jQuery库构建,允许用户通过拖拽和放置的方式设计网页布局,并实时预览编辑效果。Bootstrap是...
jQuery是一个流行的JavaScript库,它简化了JavaScript的许多复杂性,使得开发者能够更轻松地实现动态网页效果。 首先,jQuery的核心在于其选择器功能。通过$.fn.extend()方法,jQuery提供了一种简洁的方式来选取DOM...
标题提到的"基于jquery二维码生成插件jquery.qrcode.js在线生成二维码",就是利用jQuery与名为`jquery.qrcode.js`的插件来实现在网页上动态生成二维码的功能。这个插件允许开发者通过简单的JavaScript调用来创建...
5. **DOM操作**:jQuery提供了对DOM(文档对象模型)的操作,例如`append`、`prepend`、`remove`等,可以在动画过程中添加、移除或改变元素,以实现排骨图元素的动态生成和消失。 6. **延迟和定时器**:为了控制...
在“简单jQuery生成二维码”的场景中,jQuery将作为我们的主要工具,帮助我们更方便地与页面元素交互。 `jquery.qrcode.js`是专门为jQuery设计的一个插件,它的主要功能就是生成二维码。这个插件接收一串数据和一些...
jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画效果。结合jQuery,我们可以使用像`jquery.qrcode`这样的插件来轻松地在网页上生成二维码。下面我们将深入探讨如何使用`jquery.qrcode`来生成...
总的来说,使用jQuery生成联系人二维码是一种实用且创新的Web交互方式,它利用JavaScript的动态特性,结合二维码技术,为用户提供了一种快速添加联系人的方式。通过掌握这一技术,开发者可以提升网站的互动性和实用...
在本教程中,我们将深入探讨如何使用jQuery库创建一个功能,允许用户输入网址,并自动生成对应的二维码。这个功能在很多场合都非常有用,比如在分享网页链接时,通过二维码可以快速扫描打开,尤其在移动设备上更为...
通过上述知识点的分析,我们可以了解到,使用jQuery来实现元素的移动效果是一个综合性的应用,它包括了对DOM元素的操作、事件监听、逻辑判断和动态内容的交互控制等多个方面。通过这些技术的组合,开发者可以创造出...
在俄罗斯方块中,游戏界面由一排排的方格组成,这些方块需要动态地添加、移动和消除。通过jQuery,我们可以轻松地选取元素,进行相应的操作,比如设置样式、更新内容等。 2. **事件处理**:游戏中的用户交互,如...
本资源“jQuery动态创建表格生成器代码.zip”提供了一种利用jQuery实现动态创建表格的方法,这对于数据展示和交互式用户体验至关重要。下面将详细探讨jQuery动态创建表格的核心知识点及其在网页特效、CSS特效和...
"jQuery动态画廊滚动效果"就是一个典型的应用,它巧妙地将JavaScript的动态特性与jQuery库相结合,实现了图片展示的新颖方式。本文将深入解析这一效果的工作原理和实现方法。 首先,jQuery动态画廊滚动效果的核心...
首先,`jqMultiple`可能是开发者自定义的一个插件或函数,用于实现左右两列列表的交互功能。在jQuery中,我们可以创建一个函数来处理这种交互,例如: ```javascript function jqMultiple(options) { // 初始化...
该压缩包文件“基于jQuery实现的输入网址生成二维码特效源码.zip”包含了使用JavaScript库jQuery创建的一个功能,即用户输入网址后,系统自动生成对应的二维码。这个功能在现代网页设计中非常常见,常用于分享链接...
- **名片(vCard)**:JQuery.Qrcode 还支持生成名片二维码,用户扫描后可以直接保存到手机的联系人列表中,包含姓名、电话、邮箱等信息。 3. **添加Logo** 为了使生成的二维码更具个性化和识别度,JQuery.Qrcode...