<!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 写一个颜值测试小工具

    我们知道现在有一些利用照片来测试颜值的网站或软件,其实使用 Python 就可以实现这一功能,本文我们使用 Python 来写一个颜值测试小工具. 很多人学习python,不知道从何学起.很多人学习p ...

  2. 【av68676164（p54)】段式和段页式虚拟存储

    段式存储管理 进程分段 把进程按逻辑意义划分为多个段,每段有段名,长度不定,进程由多段组成 例:一个具有代码段.数据段和堆栈段的进程 段式内存管理系统的内存分配 以段为的单位装入,每段分配连续的内存 ...

  3. CentOS7 安装 SonarQube

    安装 SonarQube 环境 系统 CentOS 7 数据库 postgresql 10 系统配置 查看系统配置 sysctl vm.max_map_count sysctl fs.file-max ...

  4. Java 图书管理项目

    思路总结: 1.使用空布局 2.构造方法里写初始打开的界面 3.return 意思是 "否则"  代替else if,一切归于平静 4.连接数据库时 db=new database ...

  5. Java 字节流

    OutputStream此抽象类,是表示输出字节流的所有类的超类.操作的数据都是字节,定义了输出字节流的基本共性功能方法. OutputStream有很多子类,其中子类FileOutputStream ...

  6. Unity3D天气系统插件UniStorm插件使用说明

    一.开始使用 下载并导入UniStorm插件就可以进行使用了,该资源可以在Assets Store中搜索并下载,也可以评论我会发给你,该插件功能十分强大,内置25种天气类型,并包含音效,完全可以满足我 ...

  7. shell bash配置

    bash主要可以分为两种方式启动(login,no-login) 两种方式所读取的配置文件不同,所以环境不同 login形式启动如下图所示: no-login形式启动: 从 ~/.bashrc开始.

  8. 【CQOI2018】异或序列 - 莫队

    题目描述 已知一个长度为n的整数数列 $a_1,a_2,...,a_n$​,给定查询参数l.r,问在 $a_l,a_{l+1},...,a_r$​ 区间内,有多少子序列满足异或和等于k.也就是说,对于 ...

  9. Linux上通过curl发送PUT和POST请求

    通常而言,我们都使用curl发送get请求,但是还是可以使用它发送一些其他类型的请求的,如PUT/POST 只需要使用-X参数即可:

  10. 用Python的Pandas和Matplotlib绘制股票唐奇安通道，布林带通道和鳄鱼组线

    我最近出了一本书,<基于股票大数据分析的Python入门实战 视频教学版>,京东链接:https://item.jd.com/69241653952.html,在其中给出了MACD,KDJ ...