<!DOCTYPE html>
<html>
<head>
<title>移动</title>
<script src="jquery.min.js"></script>
<style>
li{
color:red;
}
li:hover{
color:blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var newcode = function() {
this.min1 = new Array();
this.min2 = new Array();
this.min1[0] = 1;
this.min1[1] = 2;
this.min1[2] = 3;
this.min2[0] = 1;
this.min2[1] = 2;
this.min2[2] = 3;
this.main1="";
this.main2="";
for (var i = 0; i < this.min1.length; i++) {
this.main1 += ("<li class=\"li\">" + this.min1[i] + "</li>");
}
for (var i = 0; i < this.min2.length; i++) {
this.main2 += ("<li style=\"display:none;\" class=\"li\">" + this.min2[i] + "</li>");
}
$(".min1").html(this.main1);
$(".min2").html(this.main2);
this.sclick = function(value) {
$(".min1 li:eq("+value+")").hide();

$(".min2 li:eq("+value+")").show();
}
this.zclick = function(value) {
$(".min2 li:eq("+value+")").hide();

$(".min1 li:eq("+value+")").show();
}
}
ss = new newcode();
$(".min1").on('click','.li',function() {
ss.sclick($(this).index());
});
$(".min2").on('click','.li',function() {
ss.zclick($(this).index());
});
});
</script>

</head>
<body>
<div class="min1" style="width:500px;height:400px;border:solid 1px #000"></div>
<div class="min2" style="width:500px;height:400px;border:solid 1px #000"></div>
</body>
</html>

使用js模拟ecshop元素挪移的更多相关文章

  1. 关于js模拟c#的Delegate(委托)实现

    这是我的第一篇博文,想来讲一讲js的函数.我的标题是js模拟c#的Delegate. 一.什么是Delegate(委托) 在jquery中有delegate函数,作用是将某个dom元素的标签的事件委托 ...

  2. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  3. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  4. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  5. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  6. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  7. js模拟触发事件

     html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件]  可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...

  8. js中迭代元素特性与DOM中的DocumentFragment类型 笔记

    JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...

  9. 前端怎么用js模拟应用 JSON-通俗易懂

    前端怎么用js模拟应用 JSON-通俗易懂,这是转载额 好多孩子 弄不明确复杂的json 格式的应用,以下从基础来看一看JSON.怎么玩, 事实上结构理解清了,写起来比html还爽吧. 0.前言   ...

随机推荐

  1. js实现汉字中文排序的方法 例如：省市列表的排序

    localeCompare() 1.数组内的元素是中文字符串的简单排序 var arr = ['南京', '北京', '上海', '杭州', '深圳']; function sortChinese ( ...

  2. cc.Node—事件响应

    触摸事件1: 触摸事件类型: START, MOVED, ENDED(物体内), CANCEL(物体外);2: 监听触摸事件: node.on(类型, callback, target(回掉函数的th ...

  3. 【解题报告】洛谷 P2571 [SCOI2010]传送带

    [解题报告]洛谷 P2571 [SCOI2010]传送带今天无聊,很久没有做过题目了,但是又不想做什么太难的题目,所以就用洛谷随机跳题,跳到了一道题目,感觉好像不是太难. [CSDN链接](https ...

  4. [bzoj1004][HNOI2008][Cards] (置换群+Burnside引理+动态规划)

    Description 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案.进一步,小春要求染出Sr张红 ...

  5. mysql根据用户的邀请码查询该用户所有的上级

    SELECT T1.lvl AS 'level', T2.id AS 'id', T2.zid AS 'zid', T2.self_invite AS 'selfInvite', T2.invite_ ...

  6. 【Codeforces 356A】Knight Tournament

    [链接] 我是链接,点我呀:) [题意] n个人矩形m场比赛 每场比赛由编号为li~ri且之前没有被淘汰的人进行. 已知第i场的winner是xi winner会把这一场其他所有的人都淘汰. 问你n个 ...

  7. Java基础学习总结（87）——坚持写Java等技术类博客的好处

    1.加深对技术点的理解 每天写博客,可以加深对技术点的理解,假如工作中,对某个技术点运用的不熟,当你通过博客的形式写出来,这个过程中,遇到不懂的知识点,你就会查阅相关的资料,弄明白他. 2.自己日后用 ...

  8. noip模拟赛 毁灭

    题目描述 YJC决定对入侵C国的W国军队发动毁灭性打击.将C国看成一个平面直角坐标系,W国一共有n^2个人进入了C国境内,在每一个(x,y)(1≤x,y≤n)上都有恰好一个W国人.YJC决定使用m颗核 ...

  9. 170611 NOIP模拟赛

    第一题没做出来不应该: 第二题不难想,就是写起来很麻烦: 第三题因为学了挺久的splay就直接写的splay,没太在意常数问题,一般情况下,第k值问题主席树是比splay稍快的: 盘子序列 [题目描述 ...

  10. Nginx 重写规则指南1

    作者:运维生存时间 - 默北 链接:www.ttlsa.com/nginx/nginx-rewriting-rules-guide/ 当运维遇到要重写情况时,往往是要程序员把重写规则写好后,发给你,你 ...