<!DOCTYPE html>

 <html>

 <head>

     <title>生成图片列表</title>

     <style type="text/css">

         *{ margin: 0px; padding: 0px; }

         .bpp4{ width: 700px; height: 280px; padding-left: 10px; padding-bottom: 10px; border: 1px solid #333333; margin: 30px auto; }

         .bpp4 div{ width: 128px; height: 128px; margin-top: 10px; margin-right: 10px; float: left; transition: all .1s; }

         .bpp4 div.current{ box-shadow: 2px 2px  5px  #808080, -2px -2px 5px #808080; transform: translateZ(2000px); }

     </style>

     <script src="../../jquery-3.4.1.min.js"></script>

 </head>

 <body>

 <div class="bpp4">

 </div>

 <script type="text/javascript">

     $(document).ready(function(){

         // 创建数组

         var colorimg = ["pink", "yellow", "orange", "green", "blue", "grey", "red", "purple", "bisque", "olive"];

         // 生成子元素

         for(var i in colorimg){

             $(".bpp4").append("<div></div>");

         }

         // 遍历元素

         $(".bpp4 div").each(function(i){

             $(this).css("background", colorimg[i]);

             $(this).hover(function(){

                     this.className += "current";

                 }

                 ,function(){

                     this.className = "";

                 });

         });

     });

 </script>

 </body>

 </html>

效果图:

作者：彼岸舞

时间：2020\07\31

内容关于：工作中用到的小技术

本文来源于网络，只做技术分享，一概不负任何责任

JQuery生成图片列表的更多相关文章

  1. jQuery Mobile 列表内容

    jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...

  2. jQuery Mobile 列表视图(带有自动检索)

    输入a: 输入b: jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>). ...

  3. jQuery操作列表数据转成Json再输出为html dom树

    jQuery 把列表数据转成Json再输出为如下 dom树 <div id="menu" class="lv1"> <ul class=&qu ...

  4. （五）Jquery Mobile列表

    Jquery Mobile列表 一.JM列表 1.普通列表            效果:            带序号的列表 将ul换成ol      效果:       2.data-inset=& ...

  5. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  6. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  7. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...

  8. js、jquery实现列表模糊搜索功能

    实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...

  9. 在HTML中通过jQuery设置列表项符号

    在创建列表的时候,可以通过指定type来设置列表项的符号,如下所示: <body> <form id="form1" runat="server&quo ...

随机推荐

  1. 改改Python代码，运行速度还能提升6万倍

    这份最新研究指出,在后摩尔定律时代,人类所获得的的算力提升将更大程度上来源于计算堆栈的「顶层」,即软件.算法和硬件架构,这将成为一个新的历史趋势. 很多人学习python,不知道从何学起.很多人学习p ...

  2. Linux学习笔记之配置网络

    1.打开VMware Workstation虚拟机 2.在VMware下安装虚拟ubunt系统后配置网络,如图所示配置,即可. 3.检查笔记本所使用的网段 ①按 “win + R ”键,并输入“cmd ...

  3. XCTF-WEB-高手进阶区-PHP2-笔记

    鬼才作者...特么卡了我那么长时间,这知识点我真不知道 o(╥﹏╥)o 拿Dirserach扫只能扫出来index.php和index.php/login 一度让我怀疑是有我不会的姿势去解这道题 最后 ...

  4. C#LeetCode刷题之#434-字符串中的单词数​​​​​​​（Number of Segments in a String）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3941 访问. 统计字符串中的单词个数,这里的单词指的是连续的不是 ...

  5. 为什么你的 64-bit 程序可能占用巨大的虚拟空间

    出于很多目的,我从最新的 Go 系统内核开发源码复制了一份代码,在一个正常的运行环境中构建(和重新构建)它,在构建版本基础上周期性地重新构建 Go 程序.近期我在用 ps 查看我的一个程序的内存使用情 ...

  6. Jdk1.7下的HashMap源码分析

    本文主要讨论jdk1.7下hashMap的源码实现,其中主要是在扩容时容易出现死循环的问题,以及put元素的整个过程. 1.数组结构 数组+链表 示例图如下: 常量属性 /** * The defau ...

  7. Linux中.bashrc与.bash_profile的对比

    如果你平时在命令行上花费了大量时间,那么你可能会萌生出希望定制 Shell 环境的想法.今天本文就和大家讲解该如何实现你们的这个想法.其实可以通过创建别名.向环境变量 $PATH 添加新目录或更改 S ...

  8. 在.NET Core中使用MongoDB明细教程(1):驱动基础及文档插入

    MongoDB,被归类为NoSQL数据库,是一个以类JSON格式存储数据的面向文档的数据库系统.MongoDB在底层以名为bson的二进制编码格式表示JSON文档,MongoDB bson实现是轻量级 ...

  9. C、C++、Java、Python该怎么选

    对于很多对编程感兴趣的小伙.或是正在读计算机专业的大学生来说,不知道要选择哪一门编程语言发展.对于计算机专业的学生,一般的学习都普遍会开始设C.C++.Java等热门的编程语言,但还是不太清楚选择哪一 ...

  10. 【支付宝SDK】沙箱调试，以及遇到的坑

    from rest_framework.views import APIView from alipay import AliPay, DCAliPay, ISVAliPay from django. ...