精华内容
下载资源
问答
  • Echarts + Web实现大屏展示效果

    热门讨论 2018-09-21 15:03:13
    Echarts + Web实现大屏展示效果,实现数据可视化,大屏显示效果,用echarts插件实现
  • 基于VUE + Echarts 实现可视化数据大屏展示效果

    万次阅读 多人点赞 2019-04-28 18:46:37
    中国(寿光)国际蔬菜科技博览会智慧农业系统 — LED拼接屏展示前端开发文档 上线后呈现效果: 一、开发需求及方案制定 1、确定现场led拼接屏的宽高比,按照1920px*1080px的分辨率,F11全屏后...

    中国(寿光)国际蔬菜科技博览会智慧农业系统 — LED拼接屏展示前端开发文档

    上线后呈现效果:

     

     

     

     

    一、开发需求及方案制定

    1、确定现场led拼接屏的宽高比,按照1920px*1080px的分辨率,F11全屏后刚好占满整屏且无滚动条;

    2、与产品设计确定页面相关功能:

    • 第一屏相关功能:实时时间、当地天气、菜博会基本信息、图表数据统计(近三日人流量、寿光最近价格行情、菜博会新品种/新技术/新模式)、展区监控、产品图展示、中间菜博会宣传视频+场馆分布介绍图切换展示、下一页;
    • 第二屏相关功能:实时时间、当地天气、大棚基本信息、彩椒种植模型、传感器数据展示、大棚监控、设备数据展示、报警记录和农事记录数据展示、中间大棚植物生长三维动画、返回;
    • 第一屏与第二屏无缝切换且循环;

    3、确认拼接屏展示时远程投屏的浏览器,根据页面所要实现的功能,挑选兼容性最好的浏览器,最终选定:360极速浏览器的兼容模式(IE10);

    4、页面模块划分,确定两屏切换方案,编写公共样式;

     

    二、功能实现(不局限于此):

    • 编码工具:Visual Studio Code
    • js框架:vue
    • 接口对接:axios

     

    1、两屏循环切换采用单页,v-show来指定显示和隐藏的模块,此处不用v-if是因为我们需要在第一屏数据获取完后就获取到第二屏的接口数据并渲染,给用户视觉体验效果更好;v-if和v-show的区别请移步vue官方:https://cn.vuejs.org/v2/guide/conditional.html

    • 第一屏切换至第二屏:监听视频的播放+图片显示,当视频播放完毕后显示图片,停留30s,然后切换第二屏,但是当用户点击下一页切换至第二屏时第一屏的视频停止播放;
    • 第二屏切换至第一屏:监听视频的播放,同理;

    2、自适应:拼接屏是直接连接电脑投屏上去,不需要考虑自适应的问题,如需考虑自适应请用rem;

    3、图表(百度开发的Echarts)曲线图、柱状图,雷达图,散点图;先获取数据然后再绘制,详细请移步echarts官方:https://echarts.baidu.com/option.html#title

    • 当前项目安装echarts依赖,npm install echarts -save
    • 全局引入/按需引入;
    • 全局:main.js

             import echarts from 'echarts'

             Vue.prototype.$echarts = echarts

    •  按需:page1.vue

             var echarts = require('echarts');

    • 页面使用;

    例:寿光最新价格行情曲线图

    <template>
        <div id="price-quotation" style="width: 6rem; height: 4rem"></div>
    <template>
    
    <script>
        var echarts = require('echarts');
        export default {
            data(){
                return{
                    highPriceList: [], //寿光今日价格数据列表 - 高
                    lowerPriceList: [], //寿光今日价格数据列表 - 低 
                }
            },
            created(){
                var that = this;
                // 先获取接口的价格数据
                that.getPrice();
                window.setInterval(() => {  //每小时请求一次接口
                      setTimeout(that.getPrice, 0)
                }, 360000)
            },
            mounted(){
                //绘制曲线图
                that.drawDataTable1();
            },
            methods:{
                drawDataTable1(){
                    // 基于准备好的dom,初始化echarts实例
                    let myChart1 = echarts.init(document.getElementById('price-quotation'))
                    console.log('图表中获取价格列表====')
                    console.log(this.highPriceList)
                    // 绘制图表
                    myChart1.setOption({
                      title: { text: '' },
                      grid: { 
                          left: '10%', 
                          right: '8%', 
                          top:'20%',
                      },  
                      legend: {
                          top: '3%',
                          textStyle: {color: '#fff'},
                          itemGap: 20,
                          itemHeight: 10,
                          data:[
                            {name: '最高价'}, 
                            {name: '最低价'}
                          ]
                      },
                      color:['#28F2A8','#28D8FF'],
                      xAxis: [
                          {
                              type: 'category',
                              data: ['大红柿子(精品)','贝贝小柿子','大龙茄子','红彩椒','黄彩椒'],
                              boundaryGap: false,
                              axisLabel: {
                                  interval: 0,
                                  textStyle: {
                                      color: '#fff'
                                  },
                              lineHeight: 24
                          },
                          axisLine: { // 坐标轴线
                          lineStyle: {
                              color: 'rgba(85,85,85,0.4)'
                          },
                      },
                      axisTick: {  //刻度线
                          show: false,
                          lineStyle: {
                              color: 'rgba(85,85,85,0.4)'
                          }
                      }, 
                      axisPointer: {
                          type: 'shadow'
                      },                
                  }
              ],
              yAxis: [
                  {
                      type: 'value',
                      name: '元(斤)',
                      min: 0,
                      max: 10,
                      interval: 2.5,
                      nameTextStyle: {
                          color: '#fff',
                      },
                      axisLabel: {
                          formatter: '{value}',
                          textStyle: {
                              color: '#fff'
                          },
                      },
                      axisLine: {
                          lineStyle: {
                              color: 'rgba(85,85,85,0.4)'
                          }
                      },
                      axisTick: {
                          show: false,
                          lineStyle: {
                              color: 'rgba(85,85,85,0.4)'
                          }
                      },
                      splitLine:{ //去除网格线
                          show: true,
                          lineStyle: {
                              color: ['rgba(85,85,85,0.4)']
                          }
                      },   
                  },
                  {
                      type: 'value',
                      axisLine: {
                          lineStyle: {
                              color: 'rgba(85,85,85,0.4)'
                          }
                      }, 
                  },
              ],
              series: [
                  {
                      name: '最高价',
                      type : 'line',
                      label : {
                        show: true,
                        position: 'top',
                        color: '#fff',
                      },
                      itemStyle: {
                          normal: {
                              lineStyle: {
                                  width:2, //调整 线条的宽度 
                                  color : '#28F2A8' //线条颜色 - 绿色
                              }
                          }
                      },
                      // showSymbol: false,
                      smooth: true,
                      barWidth : '20%',
                      data: this.highPriceList,
                  },  
                  {
                      name: '最低价',
                      type : 'line',
                      label : {
                        show: true,
                        position: 'bottom',
                        color: '#fff',
                      },
                      itemStyle: {
                          normal: {
                              lineStyle: {
                                  width:2, //调整 线条的宽度 
                                  color : '#28D8FF' //线条颜色 - 蓝色
                              }
                          }
                      },
                      // showSymbol: false,
                      smooth: true,
                      barWidth : '20%',
                      data: this.lowerPriceList,
                  },    
              ]
            });
          }
        }
    }
    </script>

     

    4、展区监控,菜博会官方使用的海康的摄像头和录像机,且该监控只能内网访问,我们使用的是最简单的办法,将海康的demo放在他们投屏的电脑上,vue中内嵌iframe页面,然后调样式即可;

    <div id="page1-rvm1">
        <iframe src="http://127.0.0.1/en/cbhs2.html" frameborder="0" wmode="opaque" scrolling="no"></iframe>
    </div>

    注意:

    • 海康的demoWeb 控件 V3.0 基于 ActiveX 和 NPAPI 开发,接口封装于 javascript 脚本,以 javascript 接口形式提供用户 集成,支持网页上实现预览、回放、云台控制等功能。该控件开发包仅支持 B/S 网页开发,不适用于 C/S 开发。
    • 安装activex控件,此处坑较多,我的电脑是windows10的系统,IE浏览器始终安装不成功,后再另一台windows7系统的IE10上成功安装了此控件,附上安装失败时的处理方式:https://www.nhxz.com/fanyi/18102974563ba21a90da13da.html

     

    5、产品图展示,图片自动循环轮播,

    • npm install vue-awesome-swiper --save
      /*全局引入*/ 
      import VueAwesomeSwiper from 'vue-awesome-swiper' 
      import 'swiper/dist/css/swiper.css' //这里注意具体看使用的版本是否需要引入样式,以及具体位置
      Vue.use(VueAwesomeSwiper)

       

    • 页面中使用
      <swiper :options="swiperOption" ref="mySwiper">
         <!-- slides -->             
         <swiper-slide v-for="(item,index) in proImgList" :key="index">
             <img class="img-cover" :src="item">
         </swiper-slide>
      </swiper>

       

    • js中配置参数,详细请移步:https://www.swiper.com.cn/api/index.html

       data中:

    swiperOption: {  //绿色果蔬的产品轮播   
            direction: "horizontal",
            observer:true,//修改swiper自己或子元素时,自动初始化swiper 
            observeParents:true,//修改swiper的父元素时,自动初始化swiper 
            autoplay: {
              delay: 1500,          
              stopOnLastSlide: false,          
              disableOnInteraction: false,          
            }, 
            loop: true,    
            loopedSlides: 0,      
            initialSlide: 0,
            slidesPerView: 2,
            spaceBetween: '3.33%',        
            speed: 800, 
    },

     

    监听:

    computed: {
        swiper () {
          return this.$refs.mySwiper.swiper;
        }
    },

     

    6、植物的种植模型,当切到第二屏时调用该函数,每一个阶段显示一定时间切换,图片的淡入淡出用css3控制

    • 页面使用:
      <div class="growing">
         <div class="g-item" v-for="(item,index) in growingList" :key="index" :class="{active: currentIndex==index}">
           <div class="left-title">
                <div class="title-line"></div>
                <div class="flex">
                     <p class="step color-fff">{{item.id}}</p>
                     <div class="color-fff text">
                         <h3>{{item.period}}</h3>
                         <!-- <p>{{item.dataInfo}}</p> -->
                      </div>
                 </div>
            </div>
            <img :src="item.imgSrc" alt="">
          </div>
      </div>   

       

    • js数组及函数

          data中:

    growingList: [  //种植模型
      {id: '01', period: '缓苗期管理', dataInfo: '(定植后1周)', imgSrc: 'static/images/growing1.png'},
      {id: '02', period: '定植期管理', dataInfo: '(定植后2~4周)', imgSrc: 'static/images/growing2.png'},
      {id: '03', period: '开花坐果期管理', dataInfo: '(定植后5~8周)', imgSrc: 'static/images/growing3.png'},
      {id: '04', period: '果实膨大期和成熟期管理', dataInfo: '(定植后9~11周)', imgSrc: 'static/images/growing4.png'},
      {id: '05', period: '采收期管理', dataInfo: '(雌花开放后37~40天采收第一批瓜)', imgSrc: 'static/images/growing4.png'},
    ],

     

    监听:

    watch: {
        currentPage (newValue, oldValue) {
          console.log("currentPage: "+newValue, oldValue);
          if(newValue == 2){
            // 种植模型
            this.plantModelAnt()
            this.pageSwitch2()
          }else{
            // console.log(newValue, oldValue)
            this.pageSwitch1()
          }
        },
    },

     

    函数:

    // 种植模型动画
    plantModelAnt(){
      var that = this;
      setTimeout(() => {
        console.log("当前展示屏===" +that.currentPage)
        if(that.currentIndex < 4){
            that.currentIndex += 1
        }else{
            that.currentIndex = 0
        }
        console.log('currentIndex====' + that.currentIndex)
        that.plantModelAnt()
      },11000)    
      
    },

     

    7、大棚监控,使用的萤石云,在萤石的后台拿到对应的Rtmp流地址

    • 页面使用:
      <video id="myPlayer" playsInline webkit-playsinline autoplay>
           <source src="对应流地址" type="rtmp/flv" />
      </video>

       

    • 将EZuikit.js下载本地引入,修改下

    import { EZuikit } from '../common/js/EZuikit.js'
    mounted(){
        var player = new EZUIKit.EZUIPlayer('myPlayer');
    }

     

    如有不懂请咨询QQ:1294487763,非相关请勿扰,谢谢!
     

    打个广告:

    本人承接微信公众号/微信小程序/可视化大屏/企业官网/管理系统等项目,有需要Q我吧~ (#^.^#)

     

     

     

     

     

    展开全文
  • 图像多维展示效果

    千次阅读 多人点赞 2014-04-12 18:38:28
    在Awwwards上欣赏牛人大作时,看到了一个网站newtonrunning,狠喜欢他的菜单切换效果和球鞋多维展示效果,然后禁不住手痒仿制了一个多维图像展示效果,大家可以欣赏效果,在线研究,下载收藏。本案例主要知识点,1....
    前端开发whqet,csdn,王海庆,whqet,前端开发专家

    Awwwards上欣赏牛人大作时,看到了一个网站newtonrunning,狠喜欢他的菜单切换效果球鞋多维展示效果,然后禁不住手痒仿制了一个多维图像展示效果,大家可以欣赏效果在线研究下载收藏


    本案例主要知识点

    1.css counter计数器的使用

    2.自适应设计(百分比实现)

    3.CSS3 Transition(过渡)

    4.复杂选择器的用法

    好的,开工吧,首先看html,我们用ul>li来作导航的菜单项,里面什么都不要,显示图像的那个元素,我们放到和li并列的层次,以便于以后使用兄弟选择符选中。

    <ul class="menu">
    	<li><a href="#"></a></li>
    	<li><a href="#"></a></li>
    	<li><a href="#"></a></li>
    	<li><a href="#"></a></li>
    	<li><a href="#"></a></li>
    	<li><a href="#"></a></li>
    	<!--图像显示元素,和li放到一块,以便使用兄弟选择符选中-->
    	<div class="pic"></div>
    </ul>
    我们使用了normalize.css来调和浏览器的分歧。

    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    然后我们来进行全局设置,设置页面背景、溢出,列表项和盒子大小模型

    /*
     * 全局设置
     * 页面背景、内容溢出设置
     * 列表项、盒子大小设置
     * */
    body{
    	background: #FCCC46;
    	overflow: hidden;
    }
    li,li::before,li::after{
    	list-style-type: none;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    菜单的设置,我们在这里进行计数器的重置

    /*
     * 菜单整体设置
     * 宽、高、透明度
     * 水平垂直居中设置,大家可以参考本博客CSS居中对齐一文
     * 过渡属性设置
     * 计数器重置
     * */
    .menu{
    	width: 100%;
    	height: 30%;
    	margin: auto;
    	padding: 0;
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	opacity: 0;	
    	-webkit-transition: all 1s;
    	-moz-transition: all 1s;
    	-ms-transition: all 1s;
    	-o-transition: all 1s;
    	transition: all 1s;	
    	counter-reset: liCounter;		
    }
    /*
     * 菜单Hover设置
     * 透明度变化
     * */
    .menu:hover{
    	opacity: 1;
    }
    菜单项的设置,我们需要设置菜单项的宽高、背景色、边框、鼠标样式、过渡属性,我们需要指定计数器增加

    /*
     * 菜单列表项设置
     * 宽、高设置,这里使用百分比实现自适应
     * 背景色、边框、鼠标样式设置
     * 过渡属性设置
     * 计数器增加
     * */
    .menu li{
    	float: left;
    	width: 16.666%;
    	height: 100%;
    	border: 1px dashed rgba(255,255,255,.5);
    	border-width:0 1px 0 0;
    	background-color:rgba(255,255,255,0.05);
    	cursor: pointer;
    	position: relative;
    	counter-increment:liCounter;
    	z-index: 2;
    	-webkit-transition: all 1s;
    	-moz-transition: all 1s;
    	-ms-transition: all 1s;
    	-o-transition: all 1s;
    	transition: all 1s;
    }
    /*
     * 菜单列表项Hover设置
     * 背景色改变
     * */
    .menu li:hover{
    	background-color:rgba(255,255,255,0.1);
    }
    提示文本的设置,使用伪对象实现,需要设置宽、高、背景色、边框、透明度、位置设定、过渡属性等,使用计数器呈现提示文本

    /*
     * 提示文本(伪对象实现)设置
     * 内容设置,使用计数器
     * 宽、高、背景色、边框、透明度
     * 位置设置
     * 过渡属性设置
     * 文字样式设置
     * */
    .menu li::before{
    	content:counter(liCounter)'/6';
    	width: 100%;
    	height: 30px;
    	border: 1px solid rgba(0,0,0,.5);
    	border-width: 0 1px;
    	position: absolute;
    	left:0;
    	top: 0;
    	text-align: center;
    	opacity: 0;
    	-webkit-transition: all 1s;
    	-moz-transition: all 1s;
    	-ms-transition: all 1s;
    	-o-transition: all 1s;
    	transition: all 1s;
    }
    /*
     * 提示文本hover设置
     * 改变位置、透明度
     * */
    .menu li:hover::before{
    	top:40%;
    	opacity: 1;
    }
    图片展示元素的设置

    /*
     * 图片设置
     * 宽、高设置
     * 位置设置
     * 背景设置
     * */
    .menu .pic{
    	width:100%;
    	height:600px;
    	background-position:center center;
    	background-repeat: no-repeat;
    	background-size: 100% auto;
    	position: absolute;
    	left:0;
    	top: 50%;
    	margin-top:-300px;
    	z-index: 1;
    }
    /*
     * hover之后图像设置
     * 每个菜单项的hover之后的图像显示效果
     * */
    .menu li:nth-child(1):hover~ .pic{
    	background-image: url('img/1.jpg');
    }
    .menu li:nth-child(2):hover~ .pic{
    	background-image: url('img/2.jpg');
    }
    .menu li:nth-child(3):hover~ .pic{
    	background-image: url('img/3.jpg');
    }
    .menu li:nth-child(4):hover~ .pic{
    	background-image: url('img/4.jpg');
    }
    .menu li:nth-child(5):hover~ .pic{
    	background-image: url('img/5.jpg');
    }
    .menu li:nth-child(6):hover~ .pic{
    	background-image: url('img/6.jpg');
    }
    OK,That's all, Thank you.

    ---------------------------------------------------------------

    前端开发whqet,关注web前端开发技术,分享网页相关资源。
    ---------------------------------------------------------------

    展开全文
  • jQuery实现动态数字展示效果

    千次阅读 2018-04-25 11:11:01
    本文将结合实例给大家介绍使用jQuery实现动态数字展示效果。HTML代码本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用。在HTML页面中只需定义以下...

    Jq数据列表动态效果,动态更新,支持Ajax动态刷新。

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率,报价等等,前端页面需要实时刷新获取最新数据。本文将结合实例给大家介绍使用jQuery实现动态数字展示效果。

    HTML代码

    本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用。在HTML页面中只需定义以下结构: 


    <div class="count">当前报价:<span id="number"></span></div>

    jQuery代码:

    首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magic_number()自定义函数将代码整合如下:

    function magic_number(value) {   
    var num = $("#number");   num.animate({count: value}, {     duration: 500,     
    step: function() {       num.text(String(parseInt(this.count)));       }  
    }); 
    };


    然后update()函数使用了jQuery的$.getJSON()向后台number.php发送了一个ajax请求,在得到PHP相应后,调用magic_number()展示最新的数字。

    function update() {   $.getJSON("number.php?jsonp=?", function(data) {     magic_number(data.n);   }); }; setInterval(update, 5000); //5秒钟执行一次 update(); PHP

    为了能看到更好的效果,我们使用setInterval()设置代码执行的间隔时间。

    实际项目中,我们会使用PHP获取数据库中的最新数据,然后通过PHP返回给前端。本例为了更好的演示,使用随机数字,最后以json格式返回给前端js,number.php代码如下:

    $total_data = array(   
    'n' => rand(0,999) 
    );   
    echo $_GET['jsonp'].'('.json_encode($total_data) . ')';



    展开全文
  • android listview实现新闻列表展示效果

    万次阅读 2017-10-25 08:29:23
    这篇文章主要为大家详细介绍了android listview实现新闻列表展示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了android listview列表展示效果的具体代码,供大家参考,具体内容...

    这篇文章主要为大家详细介绍了android listview实现新闻列表展示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    本文实例为大家分享了android listview列表展示效果的具体代码,供大家参考,具体内容如下

    1.封装一些新闻数据 
    2.使用listview展示出来 
    3.设置条目点击事件,点击后跳转浏览器查看新闻

    package com.itheima74.newscustom.domain;
     
    import android.graphics.drawable.Drawable;
     
    /**
     * Created by My on 2016/11/8.
     */
     
    public class NewsBean {
      public String title;
      public String des;
      public Drawable icon;
      public String news_url;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    package com.itheima74.newscustom.utils;
     
    import android.content.Context;
     
    import com.itheima74.newscustom.R;
    import com.itheima74.newscustom.domain.NewsBean;
     
    import java.util.ArrayList;
     
    /**
     * Created by My on 2016/11/8.
     */
     
    public class NewsUtils {
      /**
       * @param context 上下文环境
       * @return 新闻集合
       */
      public static ArrayList<NewsBean> getAllNews(Context context) {
        ArrayList<NewsBean> arrayList = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
          NewsBean newsBean1 = new NewsBean();
          newsBean1.title = "鸟瞰暴雨后的武汉 全市已转移16万人次";
          newsBean1.des = "7月5-6日,武汉普降暴雨-大暴雨,中心城区、蔡甸部分地区出现特大暴雨。江夏大道汤逊湖大桥段,被湖水冲破的路障。记者贾代腾飞 陈卓摄";
          newsBean1.icon = context.getResources().getDrawable(R.drawable.wuhan);
          newsBean1.news_url = "http://slide.news.sina.com.cn/s/slide_1_2841_101020.html#p=1";
          arrayList.add(newsBean1);
     
          NewsBean newsBean2 = new NewsBean();
          newsBean2.title = "安徽暴雨 三四十条鳄鱼逃至附近农田";
          newsBean2.des = "因强降雨造成内涝,安徽省芜湖市芜湖县花桥镇鳄鱼湖农庄所养鳄鱼逃跑至附近农田。。据悉,溜出来的鳄鱼为散养的扬子鳄,比较温驯。初步预计有三四十条,具体数量未统计,其中最大的约1.8米长。图为网友拍摄到的农田中的鳄鱼。";
          newsBean2.icon = context.getResources().getDrawable(R.drawable.eyu);
          newsBean2.news_url = "http://slide.news.sina.com.cn/s/slide_1_2841_101024.html#p=1";
          arrayList.add(newsBean2);
     
          NewsBean newsBean3 = new NewsBean();
          newsBean3.title = "暴雨过后 南京理工大学变“奇幻森林”";
          newsBean3.des = "近日,持续强降雨,导致地势低洼的南京理工大学出现严重积水。这一组几张照片,南理工恍若童话世界中。网友:泡在水中的南理工,也可以倔强地刷出颜值新高度。";
          newsBean3.icon = context.getResources().getDrawable(R.drawable.qihuan);
          newsBean3.news_url = "http://slide.news.sina.com.cn/s/slide_1_2841_101010.html#p=1";
          arrayList.add(newsBean3);
        }
        return arrayList;
      }
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    package com.itheima74.newscustom.activity;
     
    import android.content.Intent;
    import android.net.Uri;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.AdapterView;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.ListView;
    import android.widget.TextView;
     
    import com.itheima74.newscustom.R;
    import com.itheima74.newscustom.domain.NewsBean;
    import com.itheima74.newscustom.utils.NewsUtils;
     
    import java.util.ArrayList;
     
    public class MainActivity extends AppCompatActivity {
     
      private ListView lv;
      private ArrayList<NewsBean> mList;
     
      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
     
        initUI();
        initData();
        initAdapter();
      }
     
      private void initAdapter() {
        lv.setAdapter(new NewsAdapter());
      }
     
      private void initData() {
        mList = NewsUtils.getAllNews(this);
      }
     
      private void initUI() {
        lv = (ListView) findViewById(R.id.lv);
     
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
          @Override
          public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Intent intent = new Intent();
            intent.setAction(Intent.ACTION_VIEW);
            intent.setData(Uri.parse(mList.get(position).news_url));
            startActivity(intent);
          }
        });
      }
     
      private class NewsAdapter extends BaseAdapter {
     
        @Override
        public int getCount() {
          return mList.size();
        }
     
        @Override
        public NewsBean getItem(int position) {
          return mList.get(position);
        }
     
        @Override
        public long getItemId(int position) {
          return position;
        }
     
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
          ViewHolder holder;
          if (convertView == null) {
            holder = new ViewHolder();
            convertView = View.inflate(getApplicationContext(), R.layout.listview_item, null);
            holder.tv_title = (TextView) convertView.findViewById(R.id.tv_title);
            holder.tv_des = (TextView) convertView.findViewById(R.id.tv_des);
            holder.iv_icon = (ImageView) convertView.findViewById(R.id.iv_icon);
            convertView.setTag(holder);
          } else {
            holder = (ViewHolder) convertView.getTag();
          }
          NewsBean item = getItem(position);
          holder.tv_title.setText(item.title);
          holder.tv_des.setText(item.des);
          holder.iv_icon.setImageDrawable(item.icon);
          return convertView;
        }
      }
     
      private static class ViewHolder {
        TextView tv_title;
        TextView tv_des;
        ImageView iv_icon;
     
      }
    }

    listview_item.xml:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:orientation="horizontal"
      android:padding="10dp">
     
      <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:src="@mipmap/ic_launcher" />
     
      <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
     
        <TextView
          android:id="@+id/tv_title"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginBottom="3dp"
          android:maxLines="1"
          android:text="新闻标题"
          android:textColor="#000000"
          android:textSize="16sp" />
     
        <TextView
          android:id="@+id/tv_des"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:maxLines="2"
          android:text="新闻内容"
          android:textColor="#666666"
          android:textSize="13sp" />
      </LinearLayout>
     
    </LinearLayout>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    listview_item.xml:

    展开全文
  • 展示效果: 一、分辨率按照1920px*1080px,16:9展示效果最佳,不同分辨率可自适应,但图像可能有拉伸。 二、全屏页面的自适应适配方案采用rem 方案实现自适应,可参考 ...三、背景方案使用网页粒子特效背景,可...
  • yilia 博客部分展示效果 默认的yilia上面的博客每一篇都显示的很多,这样看起来效果很差,我们通过对要发布博客的.md文件中加一个字段就能自由的选择博客要展示部分的大小。如下: --- title: 经典算法--最大存...
  • 一个实现Ken Burns effect图片展示效果的效果android控件。Ken Burns effect是一种图片在切换之前,会缓慢在页面移动或者放大缩小,然后再慢慢切换过去。这样的效果使得每一张静止图片都有动态的效果感觉。类似的...
  • 点击图片缩略图放大展示效果的实现  最近实现的easyUI查询数据列表中有展示图片的功能,为了能更好方便用户查看图片缩略图的内容,增加了点击图片放大的效果,下边是实现后的效果以及实现方法 点击放大的效果...
  • DEVexpress SearchLookUpEdit展示效果

    千次阅读 2017-06-06 16:56:21
    我们注意到,一般在我们选择的时候,界面会弹出一个新的层给我们选择,里面通过列表详细展示相关的信息,还可以支持搜索,非常方便。 当我们完成选择的时候,我们看到界面会只有一个人员名称的显示,不占用额外的...
  • 业务给每个产品提供12张图,就是每30°提供一张,随着手指的滑动,不断切换图片,达到一种3D的展示效果。已上传jitpack,可以直接导入maven { url '...
  • asp.net 左右滚动的图片展示效果

    千次阅读 2010-07-07 15:48:00
    左右滚动的图片展示效果
  • 跪求为什么? 360浏览器兼容模式下使用IP地址访问网页和使用域名访问展示效果不同。 就这么点悬赏了,全部家产!!!
  • php 分类树状展示效果

    千次阅读 2018-08-13 01:37:45
    我们有时候需要将分类数据按树状效果展示出来,能一眼就看出来层级的组织关系,实现如下: 注意:我所讲的分类为无限极分类 ,如下的函数所涉及的表字段名有三个 id pid name ,如果有定义名称不同请查询分类...
  • jquery实现前端分页、select筛选框、查询条件展示效果:以前做的筛选条件是用很笨的方法实现的,如果筛选条件(select)的value值超多的话,我使用的是switch循环的方法,导致代码冗余,最多需要几百行代码或上千行...
  • 因为需求,需要做3维图片墙的相关展示效果,如凹面墙,凸面墙。由于WPF也不会(会一点C#),3D编程一点也不会,一切从零开始学习,看了《精通Windows3D图形编程》一书和参考了网上相关的资料以及MSDN,当然也没有...
  • 在使用WordPress制作...好在WordPress有很多功能插件,可以帮助我们很轻松的实现多样化的相册展示效果,今天就来介绍一下如何利用插件实现产品缩略图幻灯展示。  上面是大致的效果图:  现在实现的结构就
  • 大屏展示效果

    2017-12-20 03:20:20
    前端暂时使用定时器实现效果 后期将会使用websortet进行接口对接,将后台数据实时接收,并且展示在网页上。 基于websorket实现的的一个小聊天室 点击 这里 服务器到期 停止访问 进入聊天室 该聊天室使用vue编写 ...
  • 纯CSS实现图片百叶窗展示效果

    千次阅读 多人点赞 2020-08-18 18:47:25
    首先给大家看一下完成效果 主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标...
  • Android实现列表抽屉展示效果

    万次阅读 2016-11-12 12:52:18
    终于迎来的周末哇,深圳两天的凉雨天终于迎来晴日。早上爬起来异常的累,哎。。每天地铁两小时真是强身健体啊~ 今天给大家分享一篇UI的效果实现,
  • flex展示效果之发光效果学习

    千次阅读 2013-12-23 19:10:01
    1,创建发光体效果对象,设置属性。  var glow:Glow = new Glow();  glow.duration=500;//发光效果的持续时间  glow.alphaFrom=1;//发光效果的起始alpha值  glow.alphaTo=0.6;//发光效果的起结束alpha值  ...
  • cesium之地图切换展示效果

    千次阅读 2018-06-28 10:06:00
    本篇实现cesium地图切换展示功能,效果图如下: 详细的实现过程见:这里  
  • 采用第三方开源代码:iCarousel,可实现图片的多种展示效果(@"直线", @"圆圈", @"反向圆圈", @"圆桶", @"反向圆桶", @"封面展示", @"封面展示2", @"纸牌" ),另需引入 2。图片的移动,拖动:UIIMageView...
  • js实现文字缓慢展示效果

    千次阅读 2018-07-02 17:53:51
    &lt;pre id="show"&gt;&lt;/pre&gt; &lt;...这是一个文字缓慢显示的效果。" &lt;/div&gt;&lt;script src="js/node_modules/_jquery@3.3.1@jqu
  • android 点击图片全屏展示效果

    千次阅读 2019-01-10 16:22:29
    //展示在dialog上面的大图 dialog = new Dialog(MainActivity.this,R.style.FullActivity); WindowManager.LayoutParams attributes = getWindow().getAttributes(); attributes.width = WindowManager....
  • 本人想做个课堂座位展示图功能,后台已获得每个学生的行值和列值,请问前台要怎么弄才能有座位的效果?目前采用表格foreach,可是觉得很不好,求好的方法,求教,在线等。
  • 一个简易的H5数据展示效果【demo】

    千次阅读 2018-02-06 09:55:32
    先上效果图,正常展示: 向上滑动搜索框部分: 向下滑动搜索框部分: 实现代码如下:   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
  • 本篇文章主要给大家介绍一个通讯录列表字母A——Z排序展示效果,其实很多场景都会用到,今天一个同事做城市列表也需要类似这样的效果,于是乎我就给他简单写了一个demo,刚好借此机会将此demo和效果展示给正在学习...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,797
精华内容 19,918
关键字:

展示效果