<!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. PHP基础之排序

    前言 之前简单介绍了流程控制,函数,数组等.有兴趣的可以看看. PHP入门之类型与运算符 PHP入门之流程控制 PHP入门之函数 PHP入门之数组 接下来介绍一下排序,排序是将一组数据,依指定的顺序进 ...

  2. ~/.ssh/目录找不到解决方法

    执行 cd ~/.ssh发现.ssh目录找不到 原因是因为没有用root用户ssh登录过,执行一下ssh操作就会自动生成了

  3. C#LeetCode刷题-深度优先搜索

    深度优先搜索篇 # 题名 刷题 通过率 难度 98 验证二叉搜索树   22.2% 中等 99 恢复二叉搜索树   45.1% 困难 100 相同的树   48.1% 简单 101 对称二叉树   4 ...

  4. Vue 如何优雅的根据条件动态显示组件

    常规情况下,在里动态加载不同组件的方式为: <template> <!-- 符合条件A,加载组件A --> <BusinessComponentA v-if=" ...

  5. X86汇编——计算斐波那契数列程序（详细注释和流程图说明）

    X86汇编实现斐波那契数列 程序说明: 输入斐波那契数列的项数, 然后依次输出斐波那契数列, 输入的项数小于256且为数字, 计算的项数不能超过2^16次方, 输入失败是 不会回显数字 因为存结果是A ...

  6. CodeReview 的经验和原则

    资深的程序员都知道 Code Review 可以对代码质量,代码规范,团队代码能力提升带来很大的提升,还有著名的技术专家"左耳朵耗子"也说过: 我认为没有 Code Review ...

  7. 简谈DFS

    所谓DFS就是“不撞南墙不回头”的一种搜索.其时间复杂度为O(V+E). 能算出从起点到终点的全部路径,在算法执行的过程中需要一个visit[vi]数组来维护每个结点的访问情况,这样就能避免重复访问. ...

  8. 【算法•日更•第十二期】信息奥赛一本通1585：【例 1】Amount of Degrees题解

    废话不多说,直接上题: 1585: [例 1]Amount of Degrees 时间限制: 1000 ms         内存限制: 524288 KB提交数: 130     通过数: 68 [ ...

  9. Python3 执行JS出现JSON未定义问题

    two = function(e) { var t = e.data; e.url.match(/(https?:)?(\/\/)([^/]*)/) || (e.url = "https:/ ...

  10. Linux文件权限-笔记

    文件权限共10个字符,第一个字符表示该文件是[文件夹]或[文件]——如果是字符“d"则表示该文件是文件夹:如果是字符“-”则表示是文件. 后九个字符,三个一组,共三组,分别表示[所有者权限] ...