JQuery生成图片列表
时间:2022-07-26
本文章向大家介绍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 731
内容关于:工作中用到的小技术
本文来源于网络,只做技术分享,一概不负任何责任
- Eclipse魔法堂:修改主题
- 面试题(一)关于内部类的面试题
- MyBatis魔法堂:各数据库的批量Update操作
- 在Win7的IIS上搭建FTP服务及用户授权
- JavaSE(四)之接口、访问控制
- 3X3 九宫格
- JS魔法堂:通过marquee标签实现信息滚动效果
- Java魔法堂:注解用法详解——@Override
- Windows下安装MongoDB
- IIS Express魔法堂:解除localhost域名的锁定
- JavaSE(三)之static、final、abstract修饰符
- 为经典版eclipse增加web and JavaEE插件
- 协议森林07 傀儡 (UDP协议)
- 【设计模式】—— 访问者模式Visitor
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 通过Spark生成HFile,并以BulkLoad方式将数据导入到HBase
- 使用 C 创建 Windows 服务
- AngularJS 中的 controllerAs
- Android-Jetpack笔记-DataBinding
- Android-Jetpack笔记-Lifecycles
- Android-Jetpack笔记-LiveData
- Android-Jetpack笔记-ViewModelSavedState
- Android-Jetpack笔记-ViewModel
- GitLab CE 安装记录
- SparkSQL中产生笛卡尔积的几种典型场景以及处理策略
- TypeScript 中的 export 和 import
- Angular2 初体验
- 在 Ubuntu 系统上配置 Nginx Git 服务器
- 设计模式之规格模式
- Android-Jetpack笔记-Navigation之Fragment使用