示例代碼下載
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Web開發網--圖片無間隙滾動</title> <meta name="Keywords" content="圖片無間隙滾動"/> <meta name="Description" content="圖片無間隙滾動"/> <mce:style type="text/css"><!-- body{font-size:12px;} #wapper{margin:100px auto;width:600px;border:solid 1px black;padding:20px;} .design{width:100%;padding:5px 0px 5px 0px;overflow:hidden;} .design a{color:#97450f;display:block;margin-top:5px;} .design li{width:245px;border:solid 1px #949494;height:125px;float:left;text-align:center;margin-left:5px !important;margin-right:5px !important;margin-left:4px;margin-right:4px;} .design li a.word{margin-top:0px;background:none no-repeat center center;width:100%;border-bottom:solid 1px #949494;height:100px;} --></mce:style><style type="text/css" mce_bogus="1"> body{font-size:12px;} #wapper{margin:100px auto;width:600px;border:solid 1px black;padding:20px;} .design{width:100%;padding:5px 0px 5px 0px;overflow:hidden;} .design a{color:#97450f;display:block;margin-top:5px;} .design li{width:245px;border:solid 1px #949494;height:125px;float:left;text-align:center;margin-left:5px !important;margin-right:5px !important;margin-left:4px;margin-right:4px;} .design li a.word{margin-top:0px;background:none no-repeat center center;width:100%;border-bottom:solid 1px #949494;height:100px;} </style> </head> <body> <div id="wapper"> <div class="design" id="dvMarquee" οnmοuseοver="mStop()" οnmοuseοut="mStart(event)"> <ul id="ulDemo"> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160410102_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160410102_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail55.html" mce_href="http://www.w3dev.cn/designdetail55.html"></a><a href="http://www.w3dev.cn/designdetail55.html" mce_href="http://www.w3dev.cn/designdetail55.html">的士車車身系列</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160326297_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160326297_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail54.html" mce_href="http://www.w3dev.cn/designdetail54.html"></a><a href="http://www.w3dev.cn/designdetail54.html" mce_href="http://www.w3dev.cn/designdetail54.html">的士車車身系列</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160222613_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625160222613_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail53.html" mce_href="http://www.w3dev.cn/designdetail53.html"></a><a href="http://www.w3dev.cn/designdetail53.html" mce_href="http://www.w3dev.cn/designdetail53.html">的士車車身系列</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625153717892_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625153717892_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail52.html" mce_href="http://www.w3dev.cn/designdetail52.html"></a><a href="http://www.w3dev.cn/designdetail52.html" mce_href="http://www.w3dev.cn/designdetail52.html">全友傢俬</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625152659533_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625152659533_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail51.html" mce_href="http://www.w3dev.cn/designdetail51.html"></a><a href="http://www.w3dev.cn/designdetail51.html" mce_href="http://www.w3dev.cn/designdetail51.html">中國移動通信集團</a></li> <li><a style="background-image:url(http://www.w3dev.cn/imgdesign/2009625152609840_s.jpg);" mce_style="background-image:url(http://www.w3dev.cn/imgdesign/2009625152609840_s.jpg);" class="word" href="http://www.w3dev.cn/designdetail50.html" mce_href="http://www.w3dev.cn/designdetail50.html"></a><a href="http://www.w3dev.cn/designdetail50.html" mce_href="http://www.w3dev.cn/designdetail50.html">鴻矛藥酒</a></li> </ul> </div></div> <mce:script type="text/javascript"><!-- var Showbo={author:'Showbo'}; //是否爲ie瀏覽器 Showbo.IsIE=!!document.all; //ie瀏覽器版本 Showbo.IEVersion=(function(){ if(!Showbo.IsIE)return -1; try{ return parseFloat(/msie ([/d/.]+)/i.exec(navigator.userAgent)[1]); }catch(e){return -1;}})(); //按id獲取對象 Showbo.$=function(Id,isFrame){var o;if("string"==typeof(Id))o= document.getElementById(Id);else if("object"==typeof(Id))o= Id;else return null;return isFrame?(Showbo.IsIE?frames[Id]:o.contentWindow):o;} //按標籤名稱獲取對象 Showbo.$s=function(){var o,tag;if(arguments.length==1){o=document;tag=arguments[0];}else{o=arguments[0];tag=arguments[1];}return o.getElementsByTagName(tag);} var dvMarquee=Showbo.$('dvMarquee'),ulDemo=Showbo.$('ulDemo'),lis=Showbo.$s(ulDemo,'li'),demoWidth=0,mTimer=null,mDelay=50,mScrollLeft=0; function mScroll(){ mScrollLeft++; dvMarquee.scrollLeft=mScrollLeft; if(mScrollLeft==demoWidth)mScrollLeft=Showbo.IsIE&&Showbo.IEVersion<7?3:2;//這裏也要修改ie6的問題，設置爲3/2比較流暢，如果設置爲0會頓一下 } function mStop(){if(mTimer){clearInterval(mTimer);marqueeTimer=null;}} function mStart(e){ if("object"==typeof(e)){ var refO=e.toElement||e.relatedTarget; if(refO&&!dvMarquee.contains(refO))mTimer=setInterval('mScroll()',mDelay); } else mTimer=setInterval('mScroll()',mDelay); } if(lis.length>=3){//大於2張圖片時執行滾動 demoWidth=(Showbo.IsIE&&Showbo.IEVersion<7?256:257)*lis.length;//注意ie6和ie7+及firefox的框架模型不一致，這裏要修正大小 ulDemo.style.width=demoWidth*2+'px'; ulDemo.innerHTML+=ulDemo.innerHTML; mStart(true); } // --></mce:script> </body> </html>
本文來自http://www.w3dev.cn/article/20130101/294.aspx
雖然頭條現在非常強大，但是我還是不得不吐槽一下頭條的博客發佈，居然不支持markdown格式。 並且在某些瀏覽器上還會出現編輯頁面打不開的情況，讓我一度懷疑是我瀏覽器的問題。 不過，這都不重要，重要的是blog-auto-publishin
一、背景 上週小組有個需求上線牽扯9個應用（小組目前維護了26個服務，由於團隊系統業務屬性特徵基於高可用、高性能原則拆分，有些是合理的，有些不是很合理的），同時上週OpsReview的一個微服務濫用典範案例（Promise服務A調用服務B，
一、重構背景 1.1、退款 京東秒送秒送退款有2套結構，代碼邏輯混亂； 其中秒送、天選部分售後單是和平生pop交互退款，部分是和售後中臺交互退款；並且兼容3套邏輯； 痛點：代碼繁重，缺乏合理性的設計，後續迭代開發以及維護成本高，同時增加
自動裝配原理分析 條件註冊機制 spring-context模塊中有兩個組件：Condition接口和@Conditional註解，在@Conditional註解中可以指定一組Condition實現， 通常@Conditional是和@Co
終於要講解我們親愛的掘金了。掘金是一個非常不錯的平臺。所以很多朋友會把博客發佈到掘金上。 發佈到掘金要填寫的內容也比較多。今天給大家介紹一下如何用blog-auto-publishing-tools這個工具自動把博客發佈到掘金平臺上去。 前
文｜趙真靈（花名：有濟） Koupleless 項目負責人螞蟻集團技術專家 本文 3724 字 閱讀 10 分鐘 聯繫作者/加入共建/使用產品 本篇文章屬於「Koupleless 進階系列文章」之一，默認讀者對 Koupleless
一.Vue文件內容 <template> </template> <script> </script> <style> </style>
CSDN應該是大家接觸到最多的博客平臺了，所以一款能夠發佈到CSDN的自動化工具還是非常有必要的。 今天給大家講講自動化CSDN博客發佈的思路和一些問題的解決辦法。 解決問題的思路一定是最重要的，知識是死的，問題是活的，如何在工作中解決遇
鴻蒙原生應用已超4000個！ 來自 HarmonyOS 微博近期消息，#鴻蒙千帆起# 重大里程碑！目前已有超4000個應用加入鴻蒙生態。從今年1月18日華爲宣佈首批200多家應用廠商正在加速開發鴻蒙原生應用，到3月底超4000個應用，短短
鴻蒙原生應用再添新丁！瑞幸咖啡 入局鴻蒙 來自 @HarmonyOS 微博1月23日消息，國內擁有超過1.3萬家門店、累計服務超過2億客戶的瑞幸咖啡，已完#成鴻蒙原生應用#核心功能開發，大家以後可以隨時隨地在多種#HarmonyOS#終端
鴻蒙原生應用再添一批新丁！阿里旗下11款應用、廣汽傳祺、嵐圖汽車、零跑汽車、凱翼汽車 入局鴻蒙 來自 HarmonyOS 微博近期消息，阿里旗下閒魚、1688、飛豬、餓了麼、盒馬、菜鳥、點淘、淘寶特價版、大麥、淘票票、燈塔專業版共1
鴻蒙原生應用再添新丁！萬達 入局鴻蒙 來自 @HarmonyOS 微博1月11日消息，#萬達酒店及度假村啓動鴻蒙原生應用及元服務開發# 作爲具有中國特色的國牌服務酒店標杆之一，@萬達酒店及度假村Wanda 將帶來全新的服務和交互方式，
2024年1月18日，華爲舉行的鴻蒙生態千帆啓航儀式，會上宣佈HarmonyOS NEXT鴻蒙星河版系統開發者預覽版開放申請。據介紹，鴻蒙星河版將實現原生精緻、原生應用、原生流暢、原生安全、原生智能、原生互聯六大極致原生體驗。Harmony
前端面試題 - vue的雙向綁定原理是什麼？ vue2的雙向數據綁定是通過數據劫持結合發佈者訂閱者模式的方式來實現。 通過object.defineProperty來劫持各個屬性的setter，getter，在數據變化時發佈消息給訂閱者，
原方法 /** * 動態更新form * @param form */ updateForm(form) { this.form.manholeId = form.manholeId; this.form
