第三次人机界面

最新推荐文章于 2024-04-04 23:37:41 发布

zy_dream

最新推荐文章于 2024-04-04 23:37:41 发布

阅读量1.9k

点赞数

分类专栏：课程-人机界面

本文链接：https://blog.csdn.net/zy_dream/article/details/51592170

版权

课程-人机界面专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最后一次人机界面设计，老师让做的是基于在手机上能显示网页的软件或者系统。这次题材是自己小组定的。

当时一开始我就想到做一个关于游戏的网页，结果也就这样做咯。然而这次也是最后一次，都是我完成的。因为真的，有w3school这个学习网站，好多实例可以应用，在加上自己找的一个资源。我也就自己一个人完成了，因为毕竟只有界面，我认为还是蛮简单的说。以下就来展示下这次效果和代码。注：来自网络的帮助肯定是有的，所以如果有哪位前辈看到自己的代码在这里的话，请见谅。我以此表达感谢。界面的演示是在手机模拟浏览器opera下。

首先，是主界面：

首页就是看到导航栏和下面的新闻咨询。来用的都是原始的界面，没有很多颜色铺垫。这两天就看需要加不加的问题咯。代码：

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>欢迎来到青游网</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#page1" data-icon="home">首页</a></li>
        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>
        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>
        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>
        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>
        
      </ul>
    </div>
  </div>
	<div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li><a data-ajax="false" href="尝试-今日热点.html"><img src="寒冰.jpg" alt="lol" class="ui-li-icon">【英雄联盟】寒冰射手将进行大幅度改动</a></li>
      <li><a href="#"><img src="cf.jpg" alt="cf" class="ui-li-icon">【穿越火线】新女性角色即将闪亮登场</a></li>
      <li><a href="#"><img src="dnf.jpg" alt="dnf" class="ui-li-icon">【DNF】卷土谈DNF职业各有千秋各有擅场</a></li>
      <li><a href="#"><img src="奇迹暖暖.jpg" alt="nn" class="ui-li-icon">【奇迹暖暖】星法法同款套装亮相！</a></li>
      <li><a href="#"><img src="守望先锋.jpg" alt="cf" class="ui-li-icon">【守望先锋】2016暴雪嘉年华现场门票将首次在中国发售</a></li>
    </ul>
  </div>
  
</div>


<div data-role="page" id="page2">
  <div data-role="header">
    <h1>欢迎来到青游网</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#page1" data-icon="home">首页</a></li>
        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>
        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>
        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>
        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>
        
      </ul>
    </div>
  </div>

 <div data-role="content">
    <div data-role="navbar">
      <ul>
        <li><a data-ajax="false" href="尝试-游戏分类.html" data-icon="plus">全部</a></li>
        <li><a href="#" data-icon="minus">角色扮演</a></li>
        <li><a href="#" data-icon="delete">动作格斗</a></li>
        <li><a href="#" data-icon="check">冒险解谜</a></li>
        <li><a href="#" data-icon="info">策略棋牌</a></li>
        <li><a href="#" data-icon="forward">即时战略</a></li>
        <li><a href="#" data-icon="back">射击游戏</a></li>
        <li><a href="#" data-icon="star">休闲益智</a></li>
        <li><a href="#" data-icon="gear">女性专区</a></li>
        <li><a href="#" data-icon="search">体育竞技</a></li>
      </ul>
     </div>
 </div>
</div>


<div data-role="page" id="page3">
  <div data-role="header">
    <h1>欢迎来到青游网</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#page1" data-icon="home">首页</a></li>
        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>
        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>
        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>
        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>
        
      </ul>
    </div>
  </div>
  <div data-role="content">
   		<table width="100%" height="100%" align="center" border="0">
		<tr>
		<td colspan="2" align="center" > 
		</td>
		</tr>
		<tr align="center">
		<td> 
		<a data-ajax="false" href="尝试-图片滑动.html"> 
		<img src="lol1.jpg" width="140" height="200"> 
		<p>王者荣耀</p> 
		</a> 
		</td>
		<td> 
		<a href="#"> 
		<img src="皮卡丘1.jpg" width="140" height="200"> 
		<p>口袋皮卡丘</p>  
		</a> 
		</td>
		<tr>
		<td olspan="2">
		 
		</td>
		</tr> 
		<tr align="center">
		<td> 
		<a href="#"> 
		<img src="天天酷跑1.jpg" width="140" height="200"> 
		<p>天天酷跑</p> 
		</a> 
		</td>
		<td>  
		<a href="#"> 
		<img src="我的世界1.jpg" width="140" height="200"> 
		<p>我的世界</p> 
		</a> 
		</td> 
		</tr>
		</table>
    
  </div>
  

  
</div>

<div data-role="page" id="page4">
  <div data-role="header">
    <h1>欢迎来到青游网</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#page1" data-icon="home">首页</a></li>
        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>
        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>
        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>
        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>
        
      </ul>
    </div>
  </div>
  
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li><a data-ajax="false" href="尝试-视频教学.html"><img src="qq飞车1.jpg" alt="feiche" class="ui-li-icon">【QQ飞车】双喷技术详细教学</a></li>
      <li><a href="#"><img src="地下城1.jpg" alt="dnf" class="ui-li-icon">【DNF】王者操作带来白手连招</a></li>
        <li><a href="#"><img src="cf1.jpg" alt="dnf" class="ui-li-icon">【穿越火线】幽灵模式下的四大鬼跳</a></li>
        <li><a href="#"><img src="单击1.jpg" alt="dnf" class="ui-li-icon">【守望先锋】全英雄特点属性图文解析攻略</a></li>
         <li><a href="#"><img src="单击2.jpg" alt="dnf" class="ui-li-icon">【我的世界】新手玩家如何生存</a></li>
          <li><a href="#"><img src="单击3.jpg" alt="dnf" class="ui-li-icon">【奇迹暖暖】奇迹暖暖战斗爱丽丝套装属性攻略</a></li>
    </ul>
  </div>

 
</div>

<div data-role="page" id="page5">
  <div data-role="header">
    <h1>欢迎来到青游网</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#page1" data-icon="home">首页</a></li>
        <li><a href="#page2" data-icon="arrow-r">游戏分类</a></li>
        <li><a href="#page3" data-icon="arrow-r">游戏图库</a></li>
        <li><a href="#page4" data-icon="arrow-r">最新攻略</a></li>
        <li><a href="#page5" data-icon="arrow-r">青游商场</a></li>
        
      </ul>
    </div>
  </div>

  <div data-role="content">
  <form method="post" action="尝试-今日热点.html" data-ajax="false">
      <div data-role="fieldcontain">
        <input type="search" name="search" id="search" placeholder="搜索内容...">
      </div>
      <input type="submit" data-inline="true" value="提交">
    </form> 
 
    <td> 
	<a href="尝试-鼠标.html" data-ajax="false"> 
	<img src="鼠标1.jpg"  weight="680" height="125"> 
	<div style="position:absolute;left:225px;top:248px;">
	<p class="index_txt">雷蛇鼠标</p> 
	<p class="index_txt1">有线/双模 游戏鼠标</p> 
	</div>
	</td>
    </a>
    <br />
    
    <td> 
	<a href="#"> 
	<img src="鼠标2.jpg"  weight="140" height="140"> 
	<div style="position:absolute;left:225px;top:380px;">
	<p class="index_txt">金刚鼠标</p> 
	<p class="index_txt1">炼狱蝰蛇升级版/2013</p> 
	</div>
	</td>
    </a>
    <br />
    <td> 
	<a href="#"> 
	<img src="人偶2.jpg"  weight="140" height="170"> 
	<div style="position:absolute;left:225px;top:540px;">
	<p class="index_txt">木木</p> 
	<p class="index_txt1">可爱呆萌的木木</p> 
	</div>
	</td>
    </a>
    <br />
    <td> 
	<a href="#"> 
	<img src="人偶1.jpg"  weight="140" height="185"> 
	<div style="position:absolute;left:225px;top:700px;">
	<p class="index_txt">龙的传人</p> 
	<p class="index_txt1">他的精神你值得拥有</p> 
	</div>
	</td>
    </a>
    <br />
    <td> 
	<a href="#"> 
	<img src="手办1.jpg"  weight="140" height="128"> 
	<div style="position:absolute;left:225px;top:870px;">
	<p class="index_txt">卡莉斯塔</p> 
	<p class="index_txt1">你也会她一样的</p> 
	</div>
	</td>
    </a>
    <br />
    <td> 
	<a href="#"> 
	<img src="手办2.jpg"  weight="140" height="180"> 
	<div style="position:absolute;left:225px;top:1020px;">
	<p class="index_txt">克劳德</p> 
	<p class="index_txt1">守护最重要的东西</p> 
	</div>
	</td>
    </a>
    <br />
     
	
  </div>
</div>

之后点击一个新闻后，出现新闻界面：

这个也简单，就是文字图片的插入。代码如下

<td>
<p align=center><font style=font:15pt face="黑体" color="#3300FF">寒冰射手将进行大幅度改动</font></p>
<p align=center ><font style="font-size:9px" face="黑体" color="#000000">2016.05.23 路透社</font></p>
<p align=center ><img src="寒冰.jpg" width="150" height="100"></p>
<p><font style="font-size:14px" face="黑体" color="#000000">    艾希是Freljord大陆上少数获得冰霜射手头衔的人，但却心肠火热。和她出众的箭术一样为人称道的，是即使在最可怕的环境下她仍是足智多谋。她擅长将冰川苔原上的寒冷注入箭里，手腕轻轻一动就可减缓敌人速度。她可以在数百尺外发出猛烈的一击，冻结最强大的敌人。她与生俱来的美貌，艾希在正义广场赢得了所有人的尊敬。</font></p>

<p><font style="font-size:14px" face="黑体" color="#000000">    艾希起初来到战争学院为召唤师服务，只是想借此赢得足够的影响力和支持，并最终给她的王国带来和平。这个王国从阿瓦罗萨和三姐妹时代起就内战不断。在获得无数场胜利后，艾希开始发挥她在联盟积攒的影响力。有传言说，艾希和英雄泰达米尔在正义之地外已经联合起来。但是她却否认了这个传言。所有人都在关注艾希，她在联盟的成功将最终为人民带来持续的和平。</font></p>
</td>

然后跟着导航栏走，游戏分类：

可以选择你喜欢的游戏类型，代码是在主页的代码中，因为是用id控制导航栏的，所以点击一个分类后，出现的就是：

游戏的下载量可以看到，如果要查看游戏详细情况可以点击右边的箭头：

这个和新闻热点很类似。以上两个代码为

<div data-role="page" id="pageone">
  <div data-role="content">
    <h2>全部游戏</h2>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#">
        <img src="cf.jpg">
        <h2>穿越火线</h2>
        <p>下载量：150万</p>
        </a>
        <a data-ajax="false" href="尝试-穿越火线.html">Some Text</a>
      </li>
      <li>
        <a href="#">
        <img src="寒冰.jpg">
        <h2>英雄联盟</h2>
        <p>下载量：100万</p>
        </a>
        <a href="#">Some Text</a>
      </li>
      <li>
        <a href="#">
        <img src="萝卜保卫战.jpg">
        <h2>萝卜保卫战</h2>
        <p>下载量：200万</p>
        </a>
        <a href="#">Some Text</a>
      </li>
      <li>
        <a href="#">
        <img src="迷你死神.jpg">
        <h2>迷你死神</h2>
        <p>下载量：50万</p>
        </a>
        <a href="#">Some Text</a>
      </li>
      <li>
        <a href="#">
        <img src="英雄之剑.jpg">
        <h2>英雄之剑</h2>
        <p>下载量：10万</p>
        </a>
        <a href="#">Some Text</a>
      </li>
      <li>
        <a href="#">
        <img src="炸弹人合集.jpg">
        <h2>炸弹人合集</h2>
        <p>下载量：8万</p>
        </a>
        <a href="#">Some Text</a>
      </li>
      <li>
        <a href="#">
        <img src="自由小镇.jpg">
        <h2>自由小镇</h2>
        <p>下载量：40万</p>
        </a>
        <a href="#">Some Text</a>
      </li>
    </ul>
  </div>
</div>

<p align="center"><font style="font-size:17px" face="黑体" color="#000000">穿越火线:枪战王者</font></p>
<p align="center"><font style="font-size:10px" face="黑体" color="#0000FF">大小: 316.3MB 版本: 1.0.7.60 下载次数: 1852万 来自: 开放平台</font></p>
<p align="center"><img src="穿越火线1.jpg" width="290" height="320" /></p>
<p align="center"><img src="穿越火线2.jpg" width="290" height="320" /></p>
<p><font style="font-size:14px" face="黑体" color="#000000">    《穿越火线：枪战王者》是一款由韩国Smilegate研发商及腾讯游戏三年的倾力打造的CF正版FPS手游，完美传承了PC端的品质和玩法，同时还针对手机端的操作特点，进行了针对枪战玩家习惯的定制化适配与优化，让玩家能够在手机上真正享受枪战游戏带来的乐趣和快感，将三亿鼠标的枪战梦想延续到了手机上。</font></p>
<button>下载游戏</button>

游戏攻略是一些游戏的攻略介绍，点击之后里面有视频演示：

这里插入了视频是一个应用点。代码：

<video width="402px" height="245px" controls="controls"> 
<source src="QQ飞车双喷教学视频.mp4" type="video/mp4"></source>  
</video> 
<p><font style="font-size:14px" face="黑体" color="#000000">    双喷是飞车所必须的一种技在普通漂移的基础上,增加一次简短的漂移,使得普通漂移的喷气变成两次喷气,该技能可以使得漂移聚气更多能。</font></p>

之后青游商场里面是一些商品介绍，点击你想看得商品会得到详细信息，最下面的进入店铺是直接链接到了淘宝的对应店铺。

代码如下：

<p><font style="font-size:27px" face="黑体" color="#000000">雷蛇鼠标</font></p>
<p><font style="font-size:15px" face="黑体" color="#0000FF">Razer雷蛇鼠标 雷蛇炼狱蝰蛇 炼狱蝰蛇升级版/2013 自定义宏编程</font></p>
<p align="center"><img src="雷蛇1.jpg" width="290" height="320" /></p>
<li title="基本信息">产品名称: 基本信息</li>
<li title="1">包装体积: 1</li>
<li title="Razer/雷蛇">品牌: Razer/雷蛇</li>
<li title="炼狱蝰蛇2013">型号: 炼狱蝰蛇2013</li>
<li title="官方标配">套餐类型: 官方标配</li>
<li title="1">毛重: 1</li>
<p><font style="font-size:30px" face="黑体" color="#000000">如果你真的对此产品感兴趣，请进入店铺！</font></p>
<a data-ajax="false" href="https://item.taobao.com/item.htm?spm=a230r.1.14.33.j51dah&id=530857851836&ns=1&abbucket=17#detail">
<button>进入店铺</button>

最后的就是图库，图库里面应用到图片的滑动显示，值得一用：

图片的滑动是在网上找到的，感谢：

<script type="text/javascript" src="jquery-2.1.4/jquery.js"></script> 
<style type="text/css"> 
 * { 
  padding: 0px; 
  margin: 0px; 
 } 
 a { 
  text-decoration: none; 
 } 
 ul { 
  list-style: outside none none; 
 } 
 .slider, .slider-panel img, .slider-extra { 
  width: 296px; 
  height: 403px; 
 } 
 .slider { 
  text-align: center; 
  margin: 30px auto; 
  position: relative; 
 } 
 .slider-panel, .slider-nav, .slider-pre, .slider-next { 
  position: absolute; 
  z-index: 8; 
 } 
 .slider-panel { 
  position: absolute; 
 } 
 .slider-panel img { 
  border: none; 
 } 
 .slider-extra { 
  position: relative; 
 } 
 .slider-nav { 
  margin-left: -51px; 
  position: absolute; 
  left: 50%; 
  bottom: 4px; 
 } 
 .slider-nav li { 
  background: #3e3e3e; 
  border-radius: 50%; 
  color: #fff; 
  cursor: pointer; 
  margin: 0 2px; 
  overflow: hidden; 
  text-align: center; 
  display: inline-block; 
  height: 18px; 
  line-height: 18px; 
  width: 18px; 
 } 
 .slider-nav .slider-item-selected { 
  background: blue; 
 } 
 .slider-page a{ 
  background: rgba(0, 0, 0, 0.2); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
  color: #fff; 
  text-align: center; 
  display: block; 
  font-family: "simsun"; 
  font-size: 22px; 
  width: 28px; 
  height: 62px; 
  line-height: 62px; 
  margin-top: -31px; 
  position: absolute; 
  top: 50%; 
 } 
 .slider-page a:HOVER { 
  background: rgba(0, 0, 0, 0.4); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
 } 
 .slider-next { 
  left: 100%; 
  margin-left: -28px; 
 } 
</style> 
<script type="text/javascript"> 
 $(document).ready(function() { 
  var length, 
   currentIndex = 0, 
   interval, 
   hasStarted = false, //是否已经开始轮播 
   t = 3000; //轮播时间间隔 
  length = $('.slider-panel').length; 
  //将除了第一张图片隐藏 
  $('.slider-panel:not(:first)').hide(); 
  //将第一个slider-item设为激活状态 
  $('.slider-item:first').addClass('slider-item-selected'); 
  //隐藏向前、向后翻按钮 
  $('.slider-page').hide(); 
  //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 
  $('.slider-panel, .slider-pre, .slider-next').hover(function() { 
   stop(); 
   $('.slider-page').show(); 
  }, function() { 
   $('.slider-page').hide(); 
   start(); 
  }); 
  $('.slider-item').hover(function(e) { 
   stop(); 
   var preIndex = $(".slider-item").filter(".slider-item-selected").index(); 
   currentIndex = $(this).index(); 
   play(preIndex, currentIndex); 
  }, function() { 
   start(); 
  }); 
  $('.slider-pre').unbind('click'); 
  $('.slider-pre').bind('click', function() { 
   pre(); 
  }); 
  $('.slider-next').unbind('click'); 
  $('.slider-next').bind('click', function() { 
   next(); 
  }); 
  /** 
   * 向前翻页 
   */
  function pre() { 
   var preIndex = currentIndex; 
   currentIndex = (--currentIndex + length) % length; 
   play(preIndex, currentIndex); 
  } 
  /** 
   * 向后翻页 
   */
  function next() { 
   var preIndex = currentIndex; 
   currentIndex = ++currentIndex % length; 
   play(preIndex, currentIndex); 
  } 
  /** 
   * 从preIndex页翻到currentIndex页 
   * preIndex 整数，翻页的起始页 
   * currentIndex 整数，翻到的那页 
   */
  function play(preIndex, currentIndex) { 
   $('.slider-panel').eq(preIndex).fadeOut(500) 
    .parent().children().eq(currentIndex).fadeIn(1000); 
   $('.slider-item').removeClass('slider-item-selected'); 
   $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); 
  } 
  /** 
   * 开始轮播 
   */
  function start() { 
   if(!hasStarted) { 
    hasStarted = true; 
    interval = setInterval(next, t); 
   } 
  } 
  /** 
   * 停止轮播 
   */
  function stop() { 
   clearInterval(interval); 
   hasStarted = false; 
  } 
  //开始轮播 
  start(); 
 }); 
</script> 

</head>

<body>
<div class="slider"> 
  <ul class="slider-main"> 
   <li class="slider-panel"> 
    <a href=><img alt="a" title="a" src="lol1.jpg"></a> 
   </li> 
   <li class="slider-panel"> 
    <a href=><img alt="b" title="b" src="lol2.jpg"></a> 
   </li> 
   <li class="slider-panel"> 
    <a href=><img alt="c" title="c" src="lol3.jpg"></a> 
   </li> 
   <li class="slider-panel"> 
    <a href=><img alt="d" title="d" src="lol4.jpg"></a> 
   </li> 
  </ul> 
  <div class="slider-extra"> 
   <ul class="slider-nav"> 
    <li class="slider-item">1</li> 
    <li class="slider-item">2</li> 
    <li class="slider-item">3</li> 
    <li class="slider-item">4</li> 
   </ul> 
   <div class="slider-page"> 
    <a class="slider-pre" href="javascript:;;"><</a> 
    <a class="slider-next" href="javascript:;;">></a> 
   </div> 
  </div> 
 </div>
 <p><font style="font-size:14px" face="黑体" color="#000000">    作为最红的一款5V5团战手游，《王者荣耀》可谓俘获了大批粉丝的心。既然是团战游戏，怎么能不找三五好友一起开黑呢?随着五人排位系统的登场，五黑变得更加有趣。试想一下，与小伙伴们一起携手冲上王者，这种升华为战友的友谊简直让人感动的泪崩啊。</font></p>

以上就是这次的基本全部内容，人机界面也接近尾声了，静候下周的今天早上在课堂上展示讲解。