经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue实现列表跑马灯效果
来源:jb51  时间:2022/4/11 18:16:06  对本文有异议

本文实例为大家分享了Vue实现列表跑马灯效果的具体代码,供大家参考,具体内容如下

Vue文件中:

  1. <ul class="GZDT_list clearfix active" @mouseover="stopScroll" @mouseout="startScroll">
  2. ? ? <li v-for ="item in gzdtList" >
  3. ?? ??? ?<a :href="item.url" rel="external nofollow" target="_blank" :title="item.title" >
  4. ?? ??? ??? ?<span class="GZDTtitle">
  5. ?? ??? ??? ??? ?{{item.title | ellipsis}}
  6. ?? ??? ??? ?</span>
  7. ?? ??? ?</a>
  8. ?? ??? ?<span class="right date">{{item.date}}</span>
  9. ? ? </li>
  10. </ul>

js:

  1. <script>
  2. ?? ?export default{
  3. ?? ?data:function(){
  4. ?? ??? ?return {
  5. ?? ??? ??? ?timeId:null,
  6. ?? ??? ??? ?// 跑马灯
  7. ?? ??? ??? ?animate:false,
  8. ?? ??? ?};
  9. ?? ?},
  10. ?? ?filters: {},
  11. ?? ?methods:{
  12. ?? ??? ?// 跑马灯
  13. ?? ??? ?scroll(){
  14. ?? ??? ??? ?this.animate =true;// 因为在消息向上滚动的时候需要添加css3过渡动画,所以这里需要设置true
  15. ?? ??? ??? ?setTimeout(()=>{ ? ?// ?这里直接使用了es6的箭头函数,省去了处理this指向偏移问题,代码也比之前简化了很多
  16. ?? ??? ? ? ? ? ?this.TZGGList.push(this.TZGGList[0]); // 将数组的第一个元素添加到数组的
  17. ?? ??? ? ? ? ? ?this.TZGGList.shift(); //删除数组的第一个元素
  18. ?? ??? ? ? ? ? ?this.animate = false // margin-top 为0 的时候取消过渡动画,实现无缝滚动
  19. ?? ??? ? ? ? ?}, 1000)
  20. ?? ??? ?},
  21. ?? ??? ?
  22. ?? ??? ?//鼠标悬停,停止滚动
  23. ?? ??? ?stopScroll () {
  24. ?? ??? ??? ?var target = this.$refs.con1;
  25. ?? ??? ??? ?clearInterval(this.timeId)
  26. ?? ??? ?},
  27. ?? ??? ?
  28. ?? ??? ?//鼠标移开 ,接着滚动
  29. ?? ??? ?startScroll () {
  30. ?? ??? ??? ?var target = this.$refs.con1;
  31. ?? ??? ??? ?this.timeId = setInterval(this.scroll,1500); ?// 设置滑动速度
  32. ?? ??? ?},
  33. ?? ?},
  34. ?? ?mounted: function() {
  35. ?? ??? ?this.init();
  36. ?? ??? ?this.timeId=setInterval(this.scroll,1500);
  37. ?? ?},
  38. }
  39. </script>

css:

  1. /*跑马灯*/
  2. <style>
  3. ?? ?#box{
  4. ?? ??? ?height: 238px;
  5. ?? ??? ?overflow: hidden;
  6. ?? ??? ?border: 1px solid #ffffff;
  7. ?? ??? ?margin-top: 0px;
  8. ?? ?}?
  9. ?? ?.anim{
  10. ?? ??? ?transition: all 2s;
  11. ?? ?}
  12. ?? ?
  13. ?? ?#con1 li{
  14. ?? ??? ?list-style: none;
  15. ?? ??? ?line-height: 35px;
  16. ?? ??? ?height: 35px;
  17. ?? ?}
  18. </style>

运行过程中发现走马灯title可以滚动改变但是对应的span标签的内容不变,可能是因为浏览器版本过高,可更换浏览器或降低浏览器版本试试

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号