HTML中 CSS+DIV+JS 怎么实现图片切换的特效呢, 百叶窗,淡出淡进之类的...

发布网友

我来回答

共6个回答

懂视网

本篇文章主要介绍了Html5百叶窗效果的示例代码，内容挺不错的，现在分享给大家，也给大家做个参考。

本文介绍了Html5百叶窗效果的示例代码，分享给大家，具体如下：

实现方法介绍：

1，百叶窗布局 用定位(position: absolute)覆盖在content布局之上，背景设置为透明（background-color: transparent）
2，keyframes定义淡入淡出（透明度改变）和百叶窗口效果动画。
3，启动动画是通过设置DOM的className属性的方法，animator.className = 'baiyeWindow'; 监听动画完成事件'animationend'，要清除className属性。
4，在内容布局切换的事件，调用启动动画方法，两个布局都需要绑定切换事件 ng-click="switchLayout()"
5，动画执行时序图：

html代码:

<!--要显示百叶窗效果的布局--切换内容-->
<p id="fadeInOut" class="content" ng-click="switchLayout()">
...
</p>
<!--百叶窗布局-->
 <ul id="baiyeWindow" ng-click="switchLayout()">
 <li><p class="ye"></p></li>
 <li><p class="ye"></p></li>
 <li><p class="ye"></p></li>
 <li><p class="ye"></p></li>
 </ul>

css样式代码：

 //谈入谈出效果
 .fade-animation{
 @-webkit-keyframes fadeInOut {
  0% {
  opacity: 1;
  }
  50% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
 }
 @keyframes fadeInOut {
  0% {
  opacity: 1;
  }
  50% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
 }
 animation: fadeInOut 1s ease-in;
 -webkit-animation: fadeInOut 1s ease-in;
 }
 //百叶窗效果
 .baiyeWindow{
 width: 100%;
 height: 1.68rem;
 position: absolute;
 left: 0;
 top: 1.2rem;
 li{
  height: 0.42rem;
  line-height: 40px;
  overflow: hidden;
  background-color: transparent;
  .ye{
  -webkit-animation: slideOut 1s ease-in-out;
  animation: slideOut 1s ease-in-out;
  width: 100%;
  background-color: rgba(0,0,0,.2);
  position: relative;
  top: 50%;
  }
 }
 @-webkit-keyframes slideOut {
  0% {
  padding-bottom: 0;
  top: 50%;
  }
  100% {
  padding-bottom: 40px;
  top: 0;
  }
 }
 @keyframes slideOut {
  0% {
  padding-bottom: 0;
  top: 50%;
  }
  100% {
  padding-bottom: 40px;
  top: 0;
  }
 }
 }

JS代码：

//切换布局
$scope.switchLayout = function(){
 ...
 $scope.startBaiYeWindow();
 //启动动画0.5s后，控制布局显示/隐藏
 $timeout(function () {
  if ($scope.show) {
   $scope.show = false;
  } else {
   ....
  }
 }, 500);
 }
//启动动画
 $scope.startBaiYeWindow = function () {
  var animator = document.getElementById('baiyeWindow');
  var animatorFadeInOut = document.getElementById('fadeInOut');
  animator.addEventListener('animationend', function () {
  animator.className = '';
  animatorFadeInOut.className = 'content';
  });
  $timeout(function () {
  animator.className = 'baiyeWindow';
  animatorFadeInOut.className = 'content fade-animation';
  }, 0);
 };

热心网友

ie浏览器中有自带的切换效果可供调用；
其它浏览器的话得自己写程序定位，如淡入淡出可以利用设置css的opacity属性实现；
百叶窗可以利用程序生成N个div，每个div的背景图为你要加载的图，然后设置好每个div的位置即可

热心网友

用jquery的fadeOut() fadeIn()可以轻松实现

热心网友

这类？http://d.lanrentuku.com/down/js/jiaodiantu-838/
这种图片切换网上很多的，懒人图库等都有的。

热心网友

http://www.lanrentuku.com/js/jiaodiantu.html

你要的是这种吗？

热心网友

这个叫做“焦点调用” 百度下有很多代码可以拿来用