主持人手卡怎么翻页

发布网友发布时间：2022-04-22 20:00

共2个回答

懂视网时间：2022-05-15 18:53

效果如下：拖动翻阅卡片，或点击‘下一张’翻阅卡片效果

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=0, user-scalable=0">
 <title>Document</title>
 <style>
 .containt{position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden;}
 ul,li{margin:0; padding:0;}
 ul{position:absolute; left:100px; right:100px; top:150px; bottom:200px;}
 ul>li{list-style:none; display:none; position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 15px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.1); background:#f6f6f6; transition:.3s; -webkit-transition:.3s; cursor:pointer;}
 ul>li img{width:100%;}
 ul>li:nth-child(1){display: block; z-index:2;}
 ul>li:nth-child(2){display: block; transform:matrix(0.95,0,0,1,0,-20); -webkit-transform:matrix(0.95,0,0,1,0,-20); z-index: 1;}
 ul>li:nth-child(3){display: block; transform:matrix(0.9,0,0,1,0,-40); -webkit-transform:matrix(0.9,0,0,1,0,-40); z-index: 0;}
 ul>li>.content{height:100%; width: 100%;}
 ul>li:nth-child(2)>.content{opacity:0.9;}
 ul>li:nth-child(3)>.content{opacity:0.8;}
 .footer{position: absolute; display:flex; display:-webkit-flex; bottom:0; left:0; right:0; height:150px; -webkit-align-items:center; -webkit-justify-content:center; text-align: center;}
 .footer .button{width:80px; height:80px; line-height: 80px; background:#000; border-radius: 50%; color:#fff;}
 </style>
</head>
<body>
 <p>
 <ul>
  <li>
  <p background-image="">
   <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000002J4UUk29y8BY.jpg">
  </p>
  </li>
  <li>
  <p>
   <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.jpg">
  </p>
  </li>
  <li>
  <p>
   <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000004AlfUb0cVkN1.jpg">
  </p>
  </li>
  <li>
  <p>
   <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000003Nz2So3XXYek.jpg">
  </p>
  </li>
  <li>
  <p>
   <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.jpg">
  </p>
  </li>
  <li>
  <p background-image="">
   <img src="http://y.gtimg.cn/music/photo_new/T001R150x150M000002J4UUk29y8BY.jpg">
  </p>
  </li>
 </ul>
 <p>
  <p>下一张</p>
 </p>
 </p> 
 <script src="../js/jquery-3.2.0.min.js"></script>
 <script>
 window.onload = function(){
 var pos = {};
 var distance_pos = {};
 var transition;
 var touchStart = function(e){
  var event = e ? e : window.event;
  var touch = event.touches[0];
  var target = event.target || event.srcElement;
  transition = target.style.transition;
  pos = {
  x: touch.pageX,
  y: touch.pageY
  }
  this.addEventListener('touchmove', touchMove, false);
  this.addEventListener('touchend', touchEnd, false);
 }
 var touchMove = function(e){
  var event = e ? e : window.event;
  var touch = event.touches[0];
  if($("li").length<2){
  alert("已经是最后一张了");
  this.removeEventListener('touchstart', touchStart, false);
  this.removeEventListener('touchmove', touchMove, false);
  this.removeEventListener('touchend', touchEnd, false);
  return false;
  }
  distance_pos = {
  x: touch.pageX - pos.x,
  y: touch.pageY - pos.y
  }
  this.style.transition = 'none';
  this.style.webkitTransition = 'none';
  this.style.left = `${distance_pos.x}px`;
  this.style.top = `${distance_pos.y}px`;
 }
 var touchEnd = function(e){
  var event = e ? e : window.event;
  this.style.transition = transition;
  this.style.webkitTransition = transition;
  if(Math.abs(distance_pos.x) > Math.abs(distance_pos.y)){
  //水平滑动
  if(distance_pos.x < -50){
   // 向左滑出
   this.style.left = '-0px';
   removeTouchEvent(this)
  }else if (distance_pos.x > 50) {
   // 向右滑出
   this.style.left = '0px';
   removeTouchEvent(this)
  }else{
   this.style.top = '0px';
   this.style.left = '0px';
  }
  }else{
  //垂直滑动
  if(distance_pos.y < -50){
   // 向上滑出
   this.style.top = '-150%';
   removeTouchEvent(this)
  }else if (distance_pos.y > 50) {
   // 向下滑出
   this.style.top = '150%';
   removeTouchEvent(this)
  }else{
   this.style.top = '0px';
   this.style.left = '0px';
  }
  }
  this.removeEventListener('touchmove', touchMove, false);
  this.removeEventListener('touchend', touchEnd, false);
 }
 var listenTouchEvent = function(){
  $("li")[0].addEventListener('touchstart',touchStart,false)
 }
 var removeTouchEvent = function(el){
  setTimeout(function(){
  $(el).remove();
  listenTouchEvent()
  },300)
 }
 listenTouchEvent()
 $(".button").click(function(){
  var element = $("li")[0];
  if($("li").length<2){
  return;
  }
  element.style.transform = 'translate(0px,0px)';
  removeTouchEvent(element);
 })
 }
 </script>
</body>
</html>

热心网友时间：2022-05-15 16:01

主持人手卡是分片的硬卡片，只需将第一张拿出来放置到最后一张即可完成翻页。

主持人手卡没有固定的大小，通常由稿子字数多少决定，通常手卡背板为不超过两个手掌大小，长方形，手卡字体不低于五号字。主持人手卡的正面是主持人看的，内容涉及主持串词或串词纲要或流程纲要，反面给观众看的，通常是活动logo主办方logo加活动背景图。

手卡的制作：1、打开一张纸或者硬纸壳。2、将纸或者硬纸壳裁剪成适宜大小，能恰好握在手中即可。3、在裁剪好的纸或者硬纸壳上打印上台词，可以在背面画上图案，这样主持人手卡就制作完成了。无论哪种情况，对于观众来说并不重要，只要在屏幕上以主持人身份出现。

观众要看的是主持的水平如何。幕后的情况观众并不关心，虽然幕后的情况决定着屏幕上的效果。了解了在广播和电视中直接面对听众观众说话的历史的沿革，大家就能更深入地理解主持人的工作位置和在节目中的作用，能够更好地学习有关主持人的理论和技能。

全部栏目

主持人手卡怎么翻页