js實現向上滾動效果

源碼:

<style type="text/css">
#up_zzjs{border:1px solid #ccc;width:170px;height:182px;line-height:20px;overflow:hidden;}
#up_zzjs #up_li{list-style-type:none;margin:0;padding:0;margin-left:6px;}
/*系統支持ie8就選line-height:16px;,但不支持opera 否則選line-height:20px;*/
#up_zzjs #up_li a{font-size:12px; line-height:16px;}
</style>
<div id="up_zzjs">
<ul id="marqueebox" style="border:1px red solid;">
<li id="up_li">
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#FF0000">滾動文字一號</span></a>
</li>
<li id="up_li">
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#3333FF">滾動文字三號</span></a>
</li>
<li id="up_li">
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#3333FF">滾動文字五號</span></a>
</li>
<li id="up_li">
<a href="http://www.zzjs.net/" target="_blank">
<span style="color:#3333FF">滾動文字七號</span></a>
</li>
</ul>
</div>
<script language="javascript">
function startmarquee(lh,speed,delay) {
var p=false;
var t;
var o=document.getElementById("marqueebox");
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.οnmοuseοver=function(){p=true;}
o.οnmοuseοut=function(){p=false;}
function start(){
t=setInterval(scrolling,speed);
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}
function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0){
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(20,20,1500); // 第一個參數為上升的高度,第二個為速度
</script>


 

轉載于:https://www.cnblogs.com/hsd1727728211/p/5330603.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/257472.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/257472.shtml
英文地址,請注明出處:http://en.pswp.cn/news/257472.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

利用數據的商業智能分析工具

商業智能可以定義為獲取和轉換原始數據的技術和工具&#xff0c;這些信息可以為業務運營提供有意義的好處。 商業智能的發展 商業智能&#xff08;BI&#xff09;是一個可追溯到19世紀中期的術語&#xff0c;基本上是一樣的定義。但作為結構化數據的自動化處理的參考&#xff0…

管理之道(三) - 不要吝惜贊美

多一句贊美 人們相互希望得越多&#xff0c;想要給予對方的越多……就必定越親密。   幾天前&#xff0c;我和一位朋友在紐約搭計程車&#xff0c;下車時&#xff0c;朋友對司機說&#xff1a;“謝謝&#xff0c;搭你的車十分舒適。”這司機聽了愣了一愣&#xff0c;然后說&a…

優酷視頻整段代理php,thinkphp仿優酷帶數據源碼|php仿優酷視頻源碼帶后臺功能強大...

本項目是仿優酷官網&#xff0c;優酷官網是一個集多種知識面為一體的網站&#xff0c;能全面的鍛煉我們的技能,所以我們決定仿優酷網。本項目后臺主要實現了&#xff1a;用戶管理、分類管理、視頻管理、評論管理、權限管理、輪播管理、網站配置和廣告管理以及登錄退出等模塊。前…

Centos7安裝Oracle JDK

查看Linux是否自帶的JDK&#xff0c;如有openJDK&#xff0c;則卸載1 java -version 1 rpm -qa | grep -E ^open[jre|jdk]|j[re|dk] 卸載openjdk1 su root 2 3 yum -y remove java java-1.7.0-openjdk 下載oracle jdk1 wget --no-cookies --header "Cookie: oraclelice…

前端每周清單第 30 期:WebVR 指南,Vue 代碼分割范式,理想的 React 架構特性

前端每周清單專注前端領域內容&#xff0c;以對外文資料的搜集為主&#xff0c;幫助開發者了解一周前端熱點&#xff1b;分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號&#xff08;ID&#xff1a;frontshow&#xff…

Oracle(3)——Oracle圖形界面工具創建數據庫

具體操作步驟詳情&#xff1a; 1.圖形界面工具首界面 Database Configuration Assistant 點擊下一步 2.默認 點擊下一步 3.默認 點擊下一步 4.設置全局數據庫名、SID 為新建數據庫起一個“全局數據庫名”&#xff0c;比如這里對數據庫名和SID&#xff1a;FKXT 點擊下一步 5.設置…

rsa 加密 js php,security.js+RSA做出加密功能

這次給大家帶來security.jsRSA做出加密功能&#xff0c;的注意事項有哪些&#xff0c;下面就是實戰案例&#xff0c;一起來看一下。在項目中遇到要對用戶輸入的密碼進行RSA加密的需求&#xff0c;總結一下實現過程&#xff1a;JS rsa加密加密//引入security.js文件var btn doc…

多線程面試題系列(12):多線程同步內功心法——PV操作上

上面的文章講解了在Windows系統下實現多線程同步互斥的方法&#xff0c;為了提高在實際問題中分析和思考多個線程之間同步互斥問題的能力&#xff0c;接下來將講解PV操作&#xff0c;這也是操作系統中的重點和難點。本文將會先簡要介紹下PV操作的來源和基本使用方法&#xff0c…

兩離散序列卷積matlab,離散序列卷積和(用matlab實現)

數字信號處理實驗報告實驗一離散時間序列卷積和MATLAB實現(一)實驗目的&#xff1a;學會用MATLAB對信號與系統分析的方法&#xff0c;理解離散序列卷積和的計算對進行離散信號與系統分析的重要性。(二)實驗原理&#xff1a;1、離散時間序列f1(k)和f2(k)的卷積和定義&#xff1a…

linux命令學習-4-lsof

lsof&#xff08;list open files&#xff09;是一個列出當前系統打開文件的工具。在linux環境下&#xff0c;任何事物都以文件的形式存在&#xff0c;通過文件不僅僅可以訪問常規數據&#xff0c;還可以訪問網絡連接和硬件。 在終端下輸入lsof即可顯示系統打開的文件&#xff…

IOS6+ 下,使用position:sticky實現粘性布局

回顧一下 開通博客之后&#xff0c;潦草的寫了幾篇&#xff0c;之后由于沒時間&#xff0c;加上文筆不好等等&#xff08;好吧&#xff0c;都是借口&#xff09;&#xff0c;基本上就沒怎么寫過了&#xff0c;其實平時也做了一些記錄&#xff0c;但就是犯懶&#xff0c;沒有去整…

SQL游標使用方法SQL游標使用方法(轉)

1. 為何使用游標&#xff1a;    使用游標(cursor)的一個主要的原因就是把集合操作轉換成單個記錄處理方式。用SQL語言從數據庫中檢索數據后&#xff0c;結果放在內存的一塊區域中&#xff0c;且結果往往是一個含有多個記錄的集合。游標機制允許用戶在SQL server內逐行地訪問…

matlab銑削,基于MATLAB的微細銑削力分析

2010年 12月第 38卷 第 23期 機床與液壓 MACH INE TOOL & HYDRAUL ICS Dec2010Vol38 No123DO I: 10. 3969 / jissn11001 - 38812010231037 收稿日期 : 2009 - 11 - 05 作者簡介 : 張衛鋒 (1978—) , 男 , 講師 , 研究領域為機器人技術、仿真技術、特種加工。電話: 13656487…

軟件測試作業——三

作業見《軟件測試基礎》中文版49頁第7題。英文版63頁 a) b) 令MAXPRIMES 4&#xff0c;t1不能檢查出錯誤&#xff0c;t2發生數組越界&#xff0c;使得t2比t1更容易發現。 c)t3(n1) d)節點覆蓋&#xff1a;TR{1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0…

細說Java主流日志工具庫

目錄 概述??java.util.logging (JUL)??Log4j??Logback??Log4j vs Logback??common-logging??slf4j??common-logging vs slf4j??總結實施日志解決方案??引入jar包????slf4j直接綁定日志組件????slf4j兼容非slf4j日志組件????spring 集成 slf4j??…

SQL2008使用json.net實現XML與JSON互轉

借助CLR&#xff0c;首先實現字符串的互轉&#xff0c;然后使用存儲過程實現JSON2table public class JsonFunction { /// <summary> /// XML轉JSON /// </summary> /// <param name"xml"></param> /// <returns></returns> ///…

黑胡桃木php,揭秘美國黑胡桃木的美

家具是藝術和文化的載體&#xff0c;人們對木的喜愛&#xff0c;是一種與生俱來的情懷。好的木材淳厚質樸、溫潤堅定&#xff0c;有著不動聲色的力量。美國黑胡桃木(亦稱黑核桃木)便是如此&#xff0c;“身體”中散發著讓人無法抗拒的魅力&#xff01;美國黑胡桃木體現的是“深…

c mysql備份還原數據庫,MySQL數據庫備份與恢復方法

常有新手問我該怎么備份數據庫&#xff0c;下面介紹3種備份數據庫的方法&#xff1a;(1)備份數據庫文件MySQL中的每一個數據庫和數據表分別對應文件系統中的目錄和其下的文件。在Linux下數據庫文件的存放目錄一般為/var/lib/mysql。在Windows下這個目錄視MySQL的安裝路徑而定&a…

第四篇:白話tornado源碼之褪去模板外衣的前戲

加班程序員最辛苦&#xff0c;來張圖醒醒腦吧&#xff01; ... ... ... 好了&#xff0c;醒醒吧&#xff0c;回歸現實看代碼了&#xff01;&#xff01; 執行字符串表示的函數&#xff0c;并為該函數提供全局變量 本篇的內容從題目中就可以看出來&#xff0c;就是為之后剖析tor…

生活常識

雷雨天野外要關手機 溫漢華介紹&#xff0c;雷雨天&#xff0c;山頂空曠處容易遭雷電襲擊。 他同時提醒&#xff0c;若游客在山上游覽時&#xff0c;遭遇到電閃雷鳴的暴雨天氣時&#xff0c;一定要注意以下事項&#xff1a; 其一&#xff0c;關停自己的手機。 其二&#xff0c;…