<!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. Probabilistic PCA、Kernel PCA以及t-SNE

    Probabilistic PCA 在之前的文章PCA与LDA介绍中介绍了PCA的基本原理,这一部分主要在此基础上进行扩展,在PCA中引入概率的元素,具体思路是对每个数据$\vec{x}_i$,假设$ ...

  2. 【高阶版】Python词典

    使用dict.fromkeys()创建词典的一个坑 创建词典有三种方法,第一是直接赋值,d = {1:2, 2:3}:第二个是,通过构造方法,d = dict([(1, 2), (2, 3)]),第三 ...

  3. JavaScript基础-06-正则表达式

    正则表达式 1. 正则表达式用于定义一些字符串的规则:计算机可以根据正则表达式,来检查一个字符串是否符合规则,将字符串中符合规则的内容提取出来. 2. 创建正则表达式对象: var reg=new R ...

  4. Linked server的一个问题

    好久没有写新的博客,主要是很久没有什么动力和需求来写程序.虽然也不是一点没写,但都缺乏技术含量,没什么可说的. 前两天碰到一个关于linked server的问题.本地的sql server里,通过l ...

  5. Git的使用方法及IDEA与Git的集成

    一.Git的环境配置 1.Git软件下载 (下载地址:https://git-scm.com/)由于国外的网站下载的超慢可以使用国内的阿里的开源镜像下载(下载地址:https://npm.taobao ...

  6. generate_fixed_frame()方法生成Java方法栈帧

    在从generate_normal_entry()函数调用generate_fixed_frame()函数时的栈与寄存器的状态如下: 栈的状态如下图所示. 各个寄存器的状态如下所示. rax: ret ...

  7. Unix I/O

    Unix I/O 打开文件 一个应用程序通过要求内核打开相应的文件,来宣告它想要访问一个I/O设备.内核返回一个小的非负整数,叫做描述符,它在后续对此文件的所有操作中标识这个文件.内核记录有关这个打开 ...

  8. PythonCrashCourse 第六章习题

    使用一个字典来存储一个熟人的信息,包括名.姓.年龄和居住的城市.该字典应包含键first_name .last_name .age 和city .将存储在该字典中 的每项信息都打印出来 person ...

  9. 创建human用户登录数据库创建表

    根据人力资源管理系统中表的设计,创建human用户登录数据库创建 准备阶段 把运行脚本复制到D:\app\Administrator\product\11.2.0\dbhome_1\demo\sche ...

  10. 程序员必知必会Git的小知识

    单人开发 1.初始化一个仓库 git init //cd到你工作的文件夹,初始化git仓库,默认会生成.git隐藏目录 2.配置自己的信息(Git 不喜欢不愿透漏姓名的人) git config -- ...