vue 新聞列表滾動效果
<div class="scroll-wrap">
<div class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
<p v-for="item in prizeList"><a :href="item.src">{{item.name}}</a></p>
<div>
<div>
export default {
name: 'complexTable',
data() {
return {
prizeList: [
{ name: '城軌採購網',src:'http://www.railunique.com'},
{ name: '天津地鐵電子採購平臺',src:'http://www.railunique.com' },
{ name: '南昌地鐵',src:'http://www.railunique.com' },
{ name: '南昌地鐵',src:'http://www.railunique.com' },
{ name: '蘭州地鐵招標資訊',src:'http://www.railunique.com' },
{ name: '西安公共資源交易中心',src:'http://www.railunique.com' },
],
activeIndex: 0,
intnum: undefined
}
},
computed: {
top() {
return - this.activeIndex * 50 + 'px';
}
},
created() {
this.ScrollUp();
},
methods: {
ScrollUp(){
this.intnum = setInterval(_ => {
if (this.activeIndex < this.prizeList.length) {
this.activeIndex += 1;
} else {
this.activeIndex = 0;
}
}, 1000);
},
Stop(){
clearInterval(this.intnum);
},
Up(){
this.ScrollUp();
}
}
}
<style>
.scroll-wrap{
height: 150px;、、
overflow: hidden;
}
.scroll-content {
position: relative;
transition: top 0.5s;
}
.scroll-content p{
line-height: 50px;
text-align: center;
}
</style>
相關推薦
vue 新聞列表滾動效果
<div class="scroll-wrap"> <div class="scroll-content" :style="{ top }" @mouseent
vue列表過渡效果
hit ali AC 如果 列表 是個 spa 一個 back <transition-group></transition-group> ① 列表 <transition-group> </transition-group>
vue利用better-scroll實現通訊錄式列表滾動和左右聯動效果(2)
3.右邊字母列表滑動或者點選時對應的字母高亮 _calculateHeight () { this.listHeight = [] const list = this.$refs.listgroup let height = 0
vue 2.0 實戰移動音樂app(六)歌手頁面列表滾動 無法正確滾動
listview.vue <template> <scroll class="listview" :data='data' ref="listview"> <ul> <li v-for='group in data' class=
vue實現訊息的無縫滾動效果
export default { data() { return { animate:false, items:[ {name:"馬雲"}, {name:"雷軍"}, {name:"王勤"}
vue中數字變化滾動效果
滾動元件部分程式碼如下: <template> <div class="number-grow-warp"> <span ref="numberGrow" :
HTML文字滾動效果<marquee>
spa down 開始 一次 alternate 設置 離開 rec sta <marquee></marquee> 屬性:(1)behavior:設置滾動方式 a)alternate:在邊框之間來回滾動 b)Scroll:循
marquee實現滾動效果
har 一段 對齊方式 頁面 head 發現 vsp 包括 org 頁面的自動滾動效果,可由javascript來實現,但是今天無意中發現了一個html標簽 - <marquee></marquee>可以實現多種滾動效果,無需js控制。 使用marq
JavaScript-html標題滾動效果
charset 設置 script split dsm ctype java title document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
仿qq會話列表滑動效果
滑動事件 style 執行 位移 記錄 htm kit lis rem 一、功能分析 qq會話列表可以向左滑動,然後出現刪除按鈕 二、知識點 touch事件,css3的transform屬性 三、實現思路 為每個列表項綁定touch事件,計算touch移動的距離,在touc
圖片的無縫滾動效果
-- adding margin image left offset mage lang cti 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met
JS實現圖片滾動效果
settime .cn itl family .text rgba plus ++ san 源碼參考菜鳥教程:<iframe width="100%" height="300" src="https://c.runoob.com/iframe/2037" allo
關於vue中滾動監聽失效問題
top scrolltop ont bsp .cn vue 資料 index document 在vue項目中, 監聽window滾動失效;並且document.body.scrollTop一直是0的情況! 查找了許多資料;並沒有找到合理的解決方案; 最中發現,在in
純css3實現文字間歇滾動效果
vue gin span 需要 display () app counter happy 場景: 假設有4條數據或者標題,視口中只顯示兩條,采用每次向上滾動一條數據來展示所有的數據。效果如圖: 用JavaScript也很容易實現,但是需要操作DOM,可以參考這篇博客。考慮
jq封裝-無縫滾動效果
over == line tac 表示 動效 dir app timer <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <
【2018-01-23】HTML-插入視頻、音樂,簡單滾動效果
視頻 embed blog 默認 loop alternate idt 方向 範圍 插入視頻:在優酷等視頻網站,找到分享位置,復制html代碼,貼入網頁中自動播放:swf後面?VideoIDS=XNDA3OTM4NA=&isAutoPlay=true&isS
AngularJS 指令 實現文本水平滾動效果
inner 滾動效果 dom對象 定時任務 oot 水平 ack -i .org <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
HTML標簽marquee實現滾動效果
int pro return set gin 緩存 wip select lex <?phpinclude "../library/mFunction.php"; /**************選取商品一級分類**********/$result=mysql_que
全屏背景視覺差滾動效果
get resize ans 滾動條 效果 mas city eight 視覺 <div class="wrap"> <div class="one item"> <di
27.jquery模擬滾動效果
頁面 light 一次 win 定時 request slide asc created <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"