<!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. [angular2]解决安装 angular-cli 报错：Cannot find module 'github-url-from-git'

    1.运行:sudo rm -rf /usr/local/lib/node_modules/npm 2.重新安装最新版本的node,最新版本的node已经集成了npm,所以无需另外安装. 3.运行:su ...

  2. python爬虫23 | 手机，这次要让你上来自己动了。这就是 Appium+Python 的牛x之处

    你有没有想过让你的手机帮你自动完成某些事情 比如自动帮你抢红包 有些软件不是有签到活动么 这些傻瓜式的操作 能不能让手机自动签到呢? 自动帮你叫外卖 自动帮你打电话 等等 还有 对于手机上的一些比较难 ...

  3. 51nod 1285 山峰和分段

    [题解] 枚举n的各个因数作为段长,O(n)判断每一段内是否有山峰即可. #include<cstdio> #include<cstring> #include<algo ...

  4. RabbitMQ-rabbitmqctl多机多节点和单机多节点集群搭建(五)

    准备 1.准备3台物理机 我这里通过本地机和2台虚拟模拟我是mac通过(Parallel Desktop 实现) 2.按照签名的liux安装步骤在3台机器都安装rabiitMq 3.将任意一节点的co ...

  5. Mongodb慢查询笔记 (Mongodb slow query log)

    -- =========================== -- mongodb slow query log -- =========================== Reference: h ...

  6. vue.js 利用组件之间通讯，写一个弹出框例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue.js通讯----父亲拿儿子的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [UOJ48] 核聚变反应强度

    QUQ 思路 求出a1的所有约数,与a1.ai放入同一数组: 求出gcd(a1,ai): 枚举约数,得出ans; 代码实现 #include<cmath> #include<cstd ...

  9. Ubuntu 16.04解决在虚拟终端（Ctrl+Alt+F1）下显示菱形中文乱码问题

    在安装Ubuntu时,如果默认选择了中文,那么以后进去到虚拟终端就会出现菱形的中文乱码. 其实这个是无解的,但是可以通过以下技巧去实现: 1.把系统转成英文的 sudo gedit /etc/defa ...

  10. 基本的数据类型分析----java.lang.Number类及其子类分析

    本文转自http://blog.csdn.net/springcsc1982/article/details/8788345 感谢作者 编写了一个测试程序,如下: int a = 1000, b= 1 ...