<!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. data argumentation 数据增强汇总

    几何变换 flip:水平翻转,也叫镜像:垂直翻转 rotation:图片旋转一定的角度,这个可以通过opencv来操作,各个框架也有自己的算子 crop:随机裁剪,比如说,在ImageNet中可以将输 ...

  2. XSS 渗透思路笔记

    了解XSS首先要了解HTML里面的元素:共有5种元素:空元素.原始文本元素. RCDATA元素.外来元素以及常规元素. 空元素area.base.br.col. command. embed.hr.i ...

  3. C#-Func<>

    与C#-Action十分相似, Func<> 也是c#内置的委托类型,不同的是, Func<> 只能用来引用具有返回值的方法,也就是说,在使用它时,至少需要在尖括号内指定一种类 ...

  4. 博客主题推荐——复杂&简单

    首先感谢原作者cjunn提供的主题autm,以下配置都基于此主题设定.很多小伙伴喜欢现在的样式,分享如下.只需简单几步即可. 如果你想使用本博客主题样式,并希望能得到远程推送更新,只需查看 快速部署. ...

  5. SourceTreet提交时显示remote: Incorrect username or password ( access token )(4种解决办法)

    引言 我因为第一次安装Sources Tree的时候进行破解时(跳过安装时的登录),因为操作失误造成了好多bug,导致Sources Tree不论提交,拉取,获取,都会报remote: Incorre ...

  6. 精灵小巧的 Jsonpath 万精油：Snack3

    前几天和一个群里的朋友交流一个需求:在 Json 里像 XPath 一样找出节点,并修改值,然后输出新的Json. 很多人马上就会说,Jsonpath 啊. 是的 Jsonpath 确实能快速找出节点 ...

  7. 几种定时任务（Timer、TimerTask、ScheduledFuture）的退出—结合真实案例【JAVA】

    工作中常常会有定时任务的开发需求,特别是移动端.最近笔者正好有所涉及,鉴于此,结合开发中的案例说明一下几种定时任务的退出. 需求说明:定时更新正在生成的文件大小和状态[进行中.失败.完成],如果文件生 ...

  8. 火题大战Vol.1 A.

    火题大战Vol.1 A. 题目描述 给定两个数\(x\),\(y\),比较\(x^y\) 与\(y!\)的大小. 输入格式 第一行一个整数\(T\)表示数据组数. 接下来\(T\)行,每行两个整数\( ...

  9. three.js 制作逻辑转体游戏（上）

    今天郭先生又出来制作游戏了,最近有小伙伴要做一个逻辑转体小游戏,我怎么能不先来试试呢.玩法可以看上面的连接,下面附几张图.线案例请点击博客原文. 游戏规则不懂得可以看自行百度哈,其实玩起来还挺有难度的 ...

  10. Arrays中toString 和 binarySearch 的原代码

    只是记住方法是干什么的,但是对具体方法的理解还是不够 查找方法 当所查找的不存在的时候 返回值应该是 return -(low + 1);   一直知道toString 是转换成为字符串  但是具体的 ...