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

你要的是这种吗?

热心网友

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

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com