专栏首页java开发的那点事JQuery生成图片列表

JQuery生成图片列表

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>生成图片列表</title>
 5     <style type="text/css">
 6         *{ margin: 0px; padding: 0px; }
 7         .bpp4{ width: 700px; height: 280px; padding-left: 10px; padding-bottom: 10px; border: 1px solid #333333; margin: 30px auto; }
 8         .bpp4 div{ width: 128px; height: 128px; margin-top: 10px; margin-right: 10px; float: left; transition: all .1s; }
 9         .bpp4 div.current{ box-shadow: 2px 2px  5px  #808080, -2px -2px 5px #808080; transform: translateZ(2000px); }
10     </style>
11 
12     <script src="../../jquery-3.4.1.min.js"></script>
13 
14 </head>
15 <body>
16 <div class="bpp4">
17 
18 </div>
19 
20 <script type="text/javascript">
21     $(document).ready(function(){
22         // 创建数组
23         var colorimg = ["pink", "yellow", "orange", "green", "blue", "grey", "red", "purple", "bisque", "olive"];
24         // 生成子元素
25         for(var i in colorimg){
26             $(".bpp4").append("<div></div>");
27         }
28         // 遍历元素
29         $(".bpp4 div").each(function(i){
30             $(this).css("background", colorimg[i]);
31             $(this).hover(function(){
32                     this.className += "current";
33                 }
34                 ,function(){
35                     this.className = "";
36                 });
37         });
38     });
39 </script>
40 </body>
41 </html>

效果图:

作者:彼岸舞

时间:2020\07\31

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • linux 达梦数据库 命令行 卸载

    彼岸舞
  • Mybatis源码学习第七天(PageHelper分析)

    其实我本来是不打算写这个PageHelper的,但是后来想了想,还是写了吧!现在市场用Mybatis的产品分页应该差不多都是用PageHelper来实现的,毕竟...

    彼岸舞
  • 给IE9及其以下等不支持classList属性的浏览器,添加classList属性

    彼岸舞
  • 【开源游戏/跑酷】我就是我

    我就是我是一款非常有趣另类的敏捷类跑酷HTML5游戏,在游戏中吃到桃心可以加快奔跑的速度,另外掉坑里,你要快速的点击屏幕,可以飞起来,只要你够牛X,你可以永远不...

    用户5997198
  • 前端基础-CSS基础(七)

    efonfighting
  • css内容 元素 元素空间的练习

    用户7873631
  • cookie的跨页面传值问题仿购物车案例

    大家都知道cookie的特性, cookie生效在同一个域名下,cookie储存量有限,cookie主要用于记录用户的一些信息,例如记录用户的登录信息使用户一段...

    王小婷
  • 骚气的置顶

    简单、
  • 带新手玩转MVC——不讲道理就是干(上)

    前言:这几天更新了几篇博客,都是关于Servlet、JSP的理解,后来又写了两种Web开发模式,发现阅读量还可以,说明JSP还是受关注的,之前有朋友评论说JSP...

    泰斗贤若如
  • 个人信息页面网页

    王凡汎

扫码关注云+社区

领取腾讯云代金券