155
计算机与多媒体技术
Computer And Multimedia Technology
电子技术与软件工程
Electronic Technology & Software Engineering
Schaffer 函数，Girewanks 函数和Ackley 函数用作测试函数，以测试改进算法的有效性，并对结果进行分析和比较。分析结果表明，引入改进的粒子释放和粒子速度动态速度变化来改进粒子算法具有明显的优势。
参考文献
[1]Kennedy J，Eberhart R. Particle Swarm Optimization[C]//
Icnn95-international Conference on Neural Networks.IEEE,2002.
[2]Kumar D N，Reddy M J. Multipurpose Reservoir Operation
Using Particle Swarm Optimization[J]. Journal of Water Resources Planning & Management,2007,2006(3).
[3]Gill M K，Kaheil Y H， Khalil A，et al. Multiobjective
p a r t i c l e  s w a r m  o p t i m i z a t i o n  f o r  p a r a m e t e r e s t i m a t i o n  i n  h y d r o l o g y [J ]. W a t e r  R e s o u r c e s Research,2006,42(7):257-271.
[4]Zheng Y L，Ma L H， Zhang L Y，et al. Empirical study
of particle swarm optimizer with an increasing inertia weight[C]// Congress on Evolutionary Computation.IEEE,2003.
[5]Sun，Jun, Wei, et al. Quantum-Behaved Particle
Swarm Optimization: Analysis of Individual Particle Behavior and Parameter Selection.[J]. Evolutionary Computation,2012.
[6]许君，鲁海燕，石桂娟.限制速度粒子优化和自适应速
度粒子优化在无约束优化问题中的应用[J].计算机应用,2015,35(3):668-674.
[7]吴正科，杨青真，施永强等.带粒子释放和速度限制的粒子
算法[J].计算机应用研究,2013,30(003):682-683.
[8]陈立华，蔡德所，梅亚东.动态速度限制粒子算法及其应用
[J].广西大学学报：自然科学版,2010(01):158-162.
[9]张利彪，周春光，刘小华等.粒子算法在求解优化问题中的
应用[J].吉林大学学报(信息科学版),2005,23(4):385-389.[10]陈贵敏，贾建援，韩琪.粒子优化算法的惯性权值递减策
略研究[J].西安交通大学学报,2006(01):53-56.
[11]文展，唐康健，李文藻.一种改进粒子优化算法在车
辆路径问题的应用研究[J].重庆邮电大学学报(自然科学版),32(5):875.
[12]余炳辉.粒子优化算法试验研究及扩展[D].华中科技大学,
2007.
[13]谢传聪.粒子优化算法在车辆路径问题中的应用研究
[D].2019.
[14]牛仲新，胡敏.一种动态调整惯性权值的粒子算法[J].工
业控制计算机,2020,v.33(03):31-33.
[15]常伯涛，范颖，赵书强等.基于改进粒子算法的输电网扩
展规划[J].华北电力大学学报(自然科学版)(4期),2018.[16]何启明.基于改进粒子算法的多目标无功优化[D].西南交
通大学,2009.
[17]陈小全，张继红.基于改进粒子算法的聚类算法[J].计算
机研究与发展,2012,49(0z1):287-291.
[18]卢峰，高立.基于改进粒子算法的优化策略[J].东北大
学学报(自然科学版),2011,032(009):1221-1224.
[19]赵志刚，张振文，石辉磊等.带扰动因子的自适应粒子优
化算法[J].计算机科学,2013,40(12):68-69,103
[20]胡旺，李志蜀.一种更简化而高效的粒子优化算法[J].软
件学报,2007,18(004):861-868.作者简介
马欣，硕士学位。研究方向为物流系统工程。
闫莉（通讯作者），博士，教授。研究方向为工业系统工程、物流系统工程。
轮播图是在Web 页面展示信息的一种方式，显示在首页的顶部，在有限的网页空间中采用高分辨率的图片来显示电商网站的商品信息或者其他网站的重要宣传信息，用户不用滚动屏幕就能看到更多内容，极大提高了网页的观赏性和可读性[1]。网页制作新技术HTML5对于3D 技术有很好的支持，可以制作效果更炫的3D 切割轮播图。本文利用HTML 、CSS3和jQuery 完成了3D 切割轮播图从布局到运行的总体实现，其中HTML 搭建页面结构，CSS3设置页面样式和3D 转换，使用jQuery 技术实现交互效果。1 3D切割轮播图的描述
3D 切割轮播图一般使用4张图片进行旋转切换轮播，图片切换时并不是一次性的整张图片都切换过来，
而是分成几块逐次切换（本文把图片分成5块来演示），最终形成一张完整图片，从而形成立体的切割轮播图效果。如图1、图2、图3所示。2 3D切割轮播图的实现思想
基于CSS3和jQuery 技术3D 切割轮播图的实现
李燕华
（北京市海淀区职工大学  北京市  100083）
3D 切割轮播图中图片旋转切换是利用了CSS3的3D 旋转功能，把四张用来切换的图片分别看作一个立方体的前、上、后、下四个面，通过立方体沿着X 轴旋转来实现图片的切换，从而形成一种立体旋转效果。
所谓的切割也并不是真的把图片进行物理分割，而是把存放图片的区域分成几列，把图片分别作为这几列的背景，通过CSS 定位功能改变背景图片的位置，使得在不同区域显示图片的不同部分，从而达到分割图片效果。
以上布局形成了多个立方体，把这几个立方体按照一定的时间间隔沿着X 轴进行旋转就实现了3D 切割轮播图的效果。3 3D切割轮播图的结构布局3.1 结构分析[2]
显示图片的区域设置为一个盒子view ，本文把每张图片分成5列显示，因为这5列的结构和样式都相同，我们设置一个无序列表摘　要：本文详细介绍了利用CSS3和jQuery 技术制作3D 切割轮播图的制作思路和实现方法。轮播图作为一种观赏性很高的信息展示方式，在Web 页面设计中得到广泛的应用。CSS3的3D 转换技术为制作立体轮播图提供了可能，jQurey 技术使得交互效果的实现更加简便。
关键词：Web 页面；CSS3；Query；3D 切割轮播图
156
计算机与多媒体技术
Computer And Multimedia Technology
电子技术与软件工程
Electronic Technology & Software Engineering
ul ，在其中设置5个li 来表示这5列，每一列包含了4张图片，可以使用4个行内元素span 来表示每个li 中的四张图片，这四张图片的位置都是相同的，占满了这一列。在view 中设置两个按钮用来进行图片切换，点击切换按钮时将执行js 代码。设置结构的代码如下：
<div class="view">  <ul>  <li>    <span></span>    <span></span>    <span></span>    <span></span>  </li>  ……  <li>    <span></span>    <span></span>    <span></span>    <span></span>  </li>    <!-- 共5个li -->  </ul>  <a href="javascript:;" class="prev"><</a>  <a href="javascript:;" class="next">></a>  <!--两个播放按钮，通过单击播放按钮进行图片旋转切换-->
</div>3.2 整体布局设置
对盒子View 进行样式设置，设置大小和边框，后边两个播放按钮需要进行定位，此处需要对view 在页面中的位置进行设置。view 的大小和每张轮播的大图尺寸相同，此处使用图片的大小为640*400。
.view{  width: 640px;  height: 400px;  border: 1px solid #CCC;  margin: 100px auto;  position: relative;  }
图片总宽度640px ，共分成5列，每列的宽度相同，因此每个li 设置宽度为128px ，高度和盒子view 的高度相同，因为所有的li 在一行，要进行浮动。对于图片的旋转播放是利用CSS3的3D 旋转效果实现，需要对li 设置3D 变换，并设置其渐变属性。
.view ul{padding:0;  margin: 0;  list-style: none;  }  .view li{  width: 128px;  height: 400px;
float: left;
position: relative;  transform-style: preserve-3d;  transition: all 1s;  }
li 中的每个span ，需要设置位置和大小，尺寸和父盒子li 的尺寸相同，对其进行绝对定位，占满父盒子。
.view li span{  position: absolute;  left: 0;  top: 0;  display: block;  width: 100%;  height: 100%;  }3.3 3D旋转图片设置
把li 中的四个span 分别设置为立方体的前面、上面、后面、下面，图片分别设置为span 的背景图，四张图片就构成了一个立方体。具体操作是使用CSS3提供的伪元素选择器:nth-child(n)[3]，依次到li 的每个span 元素，对其进行背景设置和3D 转换。对span 分别进行如下设置：
第1个span 的设置：该span 作为立方体的前面，沿Z 轴正方向移动200px(图像高度的一半)；把第1张轮播图设置为第1个span 的背景。
.view li span:nth-child(1){  transform: translateZ(200px);  background-image: url(./images/1.jpg);
}
第2个span 的设置：该span 作为立方体的上面，先沿X 轴顺时针旋转90度，然后沿Z 轴正方向移动200px ；把第2张轮播图设置为第2个span 的背景。
.view li span:nth-child(2){  transform: rotateX(90deg)  translateZ(200px);  background-image: url(./images/2.jpg);  }
第3个span 的设置：该span 作为立方体的后面，先沿X 轴顺时针旋转180度，然后沿Z 轴正方向移动200px ；把第3张轮播图设置为第3个span 的背景。
.view li span:nth-child(3){  transform: rotateX(180deg)  translateZ(200px);  background-image: url(./images/3.jpg);  }
第4个span 的设置——该span 作为立方体的下面，先沿X 轴顺时针旋转270度，然后沿Z 轴正方向移动200px ；把第4张轮播图设置为第4个span 的背景。
.view li span:nth-child(4){  transform: rotateX(270deg)  translateZ(200px);  background-image: url(./images/4.jpg);  }3.4 切割效果实现
切割效果通过设置li 中span 背景图片的水平位置来实现。View 宽度为640px ，包含5个li ，每个li 的宽度是128px ，所有li 中span 背景图片垂直方向的坐标都设置为0，即top 值为0，上边与view 的上边重合，把第1个li 中span 背景图片水平方向设置为0，即背景图像位于li 的左上角。第2个li 中span 背景图片水平方向设置为-128px ，即比li 的左边界左移128px ，后边第3、4、5个li 中span 背景图片水平方向坐标分别设置为-256px
，
-384px
，-512px 。
jquery在线图片
图1：切换前    图2：3D 切割图片
切换中
图3：切换后
157
计算机与多媒体技术
Computer And Multimedia Technology
电子技术与软件工程
Electronic Technology & Software Engineering
经过设置，在第2、3、4、5个li 中分别显示背景图片的第二、三、四、五列，实现了图片切割效果。
li:nth-child(1) span{  background-position: 0 0;  }  li:nth-child(2) span{  background-position: -128px 0;  }  li:nth-child(3) span{  background-position: -256px 0;  }  li:nth-child(4) span{  background-position: -384px 0;  }  li:nth-child(5) span{  background-position: -512px 0;  }3.5 播放按钮样式设置
用于切换的轮播按钮分别列于view 图片盒子的左侧和右侧，垂直方向：居中。设置代码如下：
.prev, .next {  display: block;  width: 60px;  height: 60px;  text-align: center;  line-height: 60px;  margin-top: -30px;  font-size: 40px;  color: #FFF;  text-decoration: none;  background-color: rgba(0, 0, 0, 0.5);  position: absolute;  top: 50%;  z-index: 100;  }  .next {  right: 0;  }4 使用jQuery技术实现3D切割轮播图交互效果4.1 jQuery技术简介
jQuery 是一个JavaScript 函数库，其设计理念是让用户写最少的代码，做最多的事情（write less,do more ）。jQuery 封装了常用的JavaScript 代码，提供了一种简便的JavaScript 设计模式，优化了HTML 文档操作、事件处理和CSS 设计。使用jQuery 可以更加方便、快速地实现丰富的页面交互效果。jQuery 库不需要复杂的安装，只需要把下载的jQuery 库文件放到站点中，然后导入到页面即可[4]。
4.2 3D切割轮播图交互效果实现
布局中把四张图片分别作为li 的前、上、后、下四个面，把li 沿着X 轴旋转从而实现四张图片的旋转播放。分别给“prev ”和“next ”两个按钮添加点击事件。每次点击 “next ”按钮，代表图片切片的5个li 将依次沿X 轴逆时针旋转90度，每次单击“prev ”按钮，代表图片切片的5个li 将依次沿X 轴顺时针旋转90度。为实现图片多次旋转切换，设置一个全局循环控制变量current ，通过current 值改变li 的旋转角度，
实现多次旋转播放。
jQuery 为其对象定义了each()方法，实现对jQuery 对象进行遍历，并在每个匹配的元素上调用回调函数。具体使用格式：
$(selector).each(function(index,element))。function(index,element)是为每个匹配元素规定运行的函数，index 表示选择器的 index 位置，element 代表当前的元素（也可使用 "this" 选择器）[5]。此处利用选择器的编号index 控制li 的旋转延迟，通过设置element 的CSS 属性完成图片的旋转。Li 的旋转延迟设置——给li 的transform 变换设置transition-delay 属性值为：index*0.25，即第0、1、2、3、4个li 的旋转时间分别延迟：0秒、0.25秒、0.50秒、0.75秒和1秒， 1秒完成一次完整图片的旋转。具体代码如下：
<script src="./js/jquery.min.js"></script><script type="text/javascript">  var current = 0;$('.prev').on('click',function(){  current++;  $('li').each(function(index,element){    $( element).css({    'transorm':'rotateX(' +  90*current +'deg)',
'transition-delay': index * 0.25 +'s' });    });  });  $('.next').on('click',function(){  current--;  $('li').each(function(index,element){    $( element).css({    'transorm':'rotateX(' +  90*current +'deg)',
'transition-delay': index * 0.25 +'s' });    });  });</script>5 结语
本文利用HTML 、CSS3和jQuery 技术完成了3D 切割轮播图从布局到运行的总体实现，实现难点在布局设置。本文使用几个小块拼成了一幅整图，并不是直接使用一张大图。平时在网页中看到的由若干个碎片组成的图片变换效果也是采用的这种思想，每个小块用一个小的div 表示，每个div 中显示图片的不同部分，通过改变div 的布局形成图片碎了的效果，其实并不是真正对大图进行切割，这是在网页设计中常用的小技巧。
随着CSS3和jQuery 技术对各种浏览器兼容性的提高，可以在Web 页面中实现更加炫丽的动态效果，用户对网页浏览流畅性和舒适性体验要求的提升也对Web 前端开发人员不断提出新挑战。参考文献
[1]周芷仪，陈婷.浅谈网页中实现图片轮播图效果的方法[J].
软件,2018,39(10):187-191.
[2]王晓华.运用CSS 和Java Script 技术设计网页轮播图[J].
科技视界,2017,28(057):88.
[3]传智播客高教产品研发部编.HTML5+CSS3网站设计基础教程
[M].人民邮电出版社,2016:113-114.
[4]未来科技编.jQuery 实战从入门到精通[M].中国水利水电出
版社,2017:3-6.
[5]RUNOOB.COM. jQuery 教程|菜鸟教程[OL] [2020-09-27]https:
//www.runoob/jquery/jquery-tutorial.html
[6]臧进进，鄂海红.基于响应式Web 设计的网页生成系统研究与
实现[J].软件,2015,36(6):37-41.作者简介
李燕华，硕士研究生，讲师。研究方向为计算机应用技术、计算机专业教学、课程资源建设。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。