17JavaScriptDOM动态获取键值对集合中的数据====小图与大图之间的显示问题

 <script type="text/javascript">
        var datas = {
            "mv/1-1.jpg": ["mv/1.jpg", "老牛", "163cm"],
            "mv/2-1.jpg": ["mv/2.jpg", "老马", "165cm"],
            "mv/3-1.jpg": ["mv/3.jpg", "老蒋", "150cm"]
        };

        onload = function () {
           //遍历集合中的每个元素
            for (var item in datas) {
                //创建图片标签
                var imgObj = document.createElement(‘img‘);
                imgObj.src = item;

                //创建一个自定义的属性来存储item的键
                imgObj.setAttribute(‘key‘, item);

                imgObj.style.marginLeft = ‘10px‘;
                imgObj.style.cursor = ‘pointer‘;
                //将图片标签放入divSamll中
                document.getElementById(‘divSmall‘).appendChild(imgObj);

                //给每张图片注册一个鼠标进入的事件
                imgObj.onmouseenter = function () {
                    var dvBigObj = document.getElementById(‘divBig‘);
                    //设置div的属性和位置
                    dvBigObj.style.display = ‘block‘;
                    dvBigObj.style.position = ‘absolute‘;
                    dvBigObj.style.left = this.offsetLeft + ‘px‘;
                    dvBigObj.style.top = this.offsetTop + this.offsetHeight + ‘px‘;

                    document.getElementById(‘imgBig‘).src = datas[this.getAttribute(‘key‘)][0];
                    if (typeof (document.getElementById(‘spName‘)) == ‘string‘) {
                        //IE
                        //document.getElementById(‘spName‘).innerText = datas[this.getAttribute(‘key‘)][1];
                        //document.getElementById(‘spHeight‘).innerText = datas[this.getAttribute(‘key‘)][2];
                        document.getElementById(‘spName‘).innerText = datas[item][1];
                        document.getElementById(‘spHeight‘).innerText = datas[item][2];
                    } else {
                        //火狐
                        document.getElementById(‘spName‘).textContent = datas[this.getAttribute(‘key‘)][1];
                        document.getElementById(‘spHeight‘).textContent = datas[this.getAttribute(‘key‘)][2];
                    }

                };
                imgObj.onmouseleave = function () {
                    document.getElementById(‘divBig‘).style.display = ‘none‘;
                };

            };

        };

    </script>

  

时间: 2024-10-26 22:27:41

17JavaScriptDOM动态获取键值对集合中的数据====小图与大图之间的显示问题的相关文章

Dictionary&lt;T,T&gt;键值对集合(字典)

<1> using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Dictionary字典 { class Program { static void Main(string[] args) { //HashTable键值对集合的声明方式: Hashtable ht = new Hashtable(); 声明的过程中是没有确定键和值的类型的 //Dictiona

Dictionary&lt;&gt;键值对集合

1 //键值对集合初始化,声明键和值的数据类型 2 Dictionary<string, string> dic = new Dictionary<string, string>(); 3 //添加数据 4 dic.Add("1","张三"); 5 dic.Add("2","李四"); 6 dic.Add("3","王五"); 7 dic.Add("4&

HashTable键值对集合

<1> using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Collections; namespace HashTable键值对集合 { class Program { static void Main(string[] args) { //创建了一个键值对集合对象 Hashtable ht = new Hashtable(); //-------

.Net学习笔记----2015-06-24(Hashtable 键值对集合)

Hashtable  键值对集合 有点像字典的概念,查字典时,根据拼音或者偏旁部首查找汉字 而键值对,根据键去找值  键值对对象[键] = 值 *** 键值对集合当中,键必须是唯一的,而值是可以重复的 //创建一个键值对集合对象 Hashtable ht = new Hashtable(); ht.Add(1, "张三"); ht.Add(2, true); ht.Add(3, '男'); ht.Add(false, "错误"); //在键值对集合中,是根据键去找值

Hashtable 键值对集合

// Hashtable  键值对集合 一个键对应一个值                 Hashtable ht=new Hashtable();                 ht.Add(1,"张三");                 ht.Add(2,'男');                 ht.Add(2.1,333m);                 //在键值对集合中键必须是唯一的                  ht[1] = "李四";

JavaScript中把数组当做键值对集合使用。

<script type="text/javascript"> var names = new Array(); names[0] = "张三"; names[1] = "李四"; names[2] = "王五"; names[3] = "赵六"; //键值对集合是没有length长度的,所以遍历的时候使用forin循环来遍历. //对于普通数组遍历的时候要使用for循环来遍历. for (va

20150218【改进】IMX257实现GPIO-IRQ中断按键获取键值驱动程序

[改进]IMX257实现GPIO-IRQ中断按键获取键值驱动程序 2015-02-18 李海沿 一.使用struct pin_desc 管理按键的值 1.定义结构体 2.将前面我们申请中断时写的(void *)1修改为 &pins_desc[n] 在ioctl中,设置中断中修改 在key_release中释放中修改 3.在中断程序中利用我们定义的struc pins_desc判断并得到按键的值 4.得到按键键值后,唤醒程序,在read函数中返回键值 附上驱动源程序: 1 /***********

20150218【改进信号量】IMX257实现GPIO-IRQ中断按键获取键值驱动程序

[改进信号量]IMX257实现GPIO-IRQ中断按键获取键值驱动程序 2015-02-18 李海沿 前面我们使用POLL查询方式来实现GPIO-IRQ按键中断程序 这里我们来使用信号量,让我们的驱动同时只能有一个应用程序打开. 一.首先在前面代码的基础上来一个简单的信号 1.定义一个全局的整形变量 2.在打开函数中,每次进入打开函数canopen都自减1, 3.当我们不使用时,在realease 中canopen自加1 4.这样就实现了一个简单的信号量,我们编译,测试 当我们使用两个应用程序来

20150218【改进Poll定时查询】IMX257实现GPIO-IRQ中断按键获取键值驱动程序

[改进Poll定时查询]IMX257实现GPIO-IRQ中断按键获取键值驱动程序 2015-02-18 李海沿 按键驱动程序中,如果不使用read函数中使程序休眠的,而是还是使用查询方式的话,可以使用Poll函数,来控制一定时间内,如果有按键发生,则立即返回键值. 同时,poll也可以同时监控多个(比如说按键,鼠标,等)一旦发生事件则立即返回. 我们在linux查看帮助: 从帮助中的说明得知, poll, ppoll - wait for some event on a file descrip