基于jQuery圖片平滑連續(xù)滾動插件
更新時間:2009年04月27日 02:35:23 作者:
彥磊基于jQuery圖片平滑滾動插件(2009.04)
在IE6/IE7/Mozilla 5.0(Firefox 3.0.5)中測試通過
* 此插件要求運行在jQuery v1.3 或更高版本上
* 插件可以實現(xiàn)圖片平滑向上或向左滾動
* 如果您需要更多的效果或在使用中本插件存在BUG,可以給在彥磊的博客上留言,彥磊將盡自己最大努力完善此插件
* 您留言前請先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下載jcarousellite插件
* 來和彥磊圖片平滑滾動的插件相互補充使用以獲取更多的圖片效果
* 彥磊圖片平滑滾動插件只是對jcarousellite插件的補充
*
*
* 技術(shù)支持:HTTP://HI.BAIDU.COM/DPXDQX
* 此為自由拷貝版本,您可以在此基礎(chǔ)上添加任何功能
* 彥磊建議您將修改過的版本或發(fā)布地址發(fā)到彥磊博客上以共享,也建議您保留部分彥磊的信息
*
*
* 此插件沒有象jcarousellite插件樣對相關(guān)元素的CSS全自動設(shè)置,部分CSS樣式需要您為設(shè)置
* 原因很簡單:您需要考慮部分用戶的瀏覽器不支持JAVASCRIPT或相關(guān)功能被禁用
* 您需要讓您的頁面元素布局在此時也能顯示正確,因此必要的CSS設(shè)置還需要您自己來做。
*
* 使用前您一定要引入jQurey及本腳本,如
* <script type="text/javascript" src="js/jquery_last.js"></script>
* <script type="text/javascript" src="js/YlMarquee.js">
* 使用方法:
*
* 1、為您要設(shè)置滾動的對象設(shè)置容器,并命名class,如class="ylMarquee"
* 2、將您要滾動的對象置入<ul></ul>中,并添加li標(biāo)簽,li標(biāo)簽中可以是圖片、文字或表格……
* 3、此版本需要您設(shè)置每個li列表的寬度或高度一至
* <div class="ylMarquee">
* <ul>
* <li><img src="image/1.jpg" alt="1"></li>
* <li><img src="image/2.jpg" alt="2"></li>
* <li><img src="image/3.jpg" alt="3"></li>
* </ul>
* </div>
* 4、設(shè)置ylMarquee的height或width樣式——向上滾動必須設(shè)置height的大小,向左滾動必須設(shè)置width的大小,否則頁面將顯示不正常。
* 5、在頁面中添加jQuery語句,調(diào)用此插件,并對相關(guān)參數(shù)進行設(shè)置,如:
* <script type="text/javascript">
* $(document).ready(function(){
* $(".stroll").jMarquee({
* visible:3,
* step:1,
* direction:"left"
* });
*});
* </script>
* 6、插件相關(guān)參數(shù):
* visible:頁面可見元素(圖片)個數(shù),默認(rèn)為1,必須參數(shù)。
* step:滾動步長,整數(shù),默認(rèn)為1,增大此數(shù)可加快滾動速度,設(shè)為0,則不進行滾動。
* direction:滾動方向,有"left"(向左滾動)和"up"(向上滾動)兩個參數(shù),注意設(shè)置時一定要加英文的雙引("")號或單引號('')。
*/
演示地址:http://img.jb51.net/online/jquery_pic/jquery_pic.htm
下載地址 http://img.jb51.net/online/jquery_pic/jquery_pic_files/YlMarquee.js
* 插件可以實現(xiàn)圖片平滑向上或向左滾動
* 如果您需要更多的效果或在使用中本插件存在BUG,可以給在彥磊的博客上留言,彥磊將盡自己最大努力完善此插件
* 您留言前請先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下載jcarousellite插件
* 來和彥磊圖片平滑滾動的插件相互補充使用以獲取更多的圖片效果
* 彥磊圖片平滑滾動插件只是對jcarousellite插件的補充
*
*
* 技術(shù)支持:HTTP://HI.BAIDU.COM/DPXDQX
* 此為自由拷貝版本,您可以在此基礎(chǔ)上添加任何功能
* 彥磊建議您將修改過的版本或發(fā)布地址發(fā)到彥磊博客上以共享,也建議您保留部分彥磊的信息
*
*
* 此插件沒有象jcarousellite插件樣對相關(guān)元素的CSS全自動設(shè)置,部分CSS樣式需要您為設(shè)置
* 原因很簡單:您需要考慮部分用戶的瀏覽器不支持JAVASCRIPT或相關(guān)功能被禁用
* 您需要讓您的頁面元素布局在此時也能顯示正確,因此必要的CSS設(shè)置還需要您自己來做。
*
* 使用前您一定要引入jQurey及本腳本,如
* <script type="text/javascript" src="js/jquery_last.js"></script>
* <script type="text/javascript" src="js/YlMarquee.js">
* 使用方法:
*
* 1、為您要設(shè)置滾動的對象設(shè)置容器,并命名class,如class="ylMarquee"
* 2、將您要滾動的對象置入<ul></ul>中,并添加li標(biāo)簽,li標(biāo)簽中可以是圖片、文字或表格……
* 3、此版本需要您設(shè)置每個li列表的寬度或高度一至
* <div class="ylMarquee">
* <ul>
* <li><img src="image/1.jpg" alt="1"></li>
* <li><img src="image/2.jpg" alt="2"></li>
* <li><img src="image/3.jpg" alt="3"></li>
* </ul>
* </div>
* 4、設(shè)置ylMarquee的height或width樣式——向上滾動必須設(shè)置height的大小,向左滾動必須設(shè)置width的大小,否則頁面將顯示不正常。
* 5、在頁面中添加jQuery語句,調(diào)用此插件,并對相關(guān)參數(shù)進行設(shè)置,如:
* <script type="text/javascript">
* $(document).ready(function(){
* $(".stroll").jMarquee({
* visible:3,
* step:1,
* direction:"left"
* });
*});
* </script>
* 6、插件相關(guān)參數(shù):
* visible:頁面可見元素(圖片)個數(shù),默認(rèn)為1,必須參數(shù)。
* step:滾動步長,整數(shù),默認(rèn)為1,增大此數(shù)可加快滾動速度,設(shè)為0,則不進行滾動。
* direction:滾動方向,有"left"(向左滾動)和"up"(向上滾動)兩個參數(shù),注意設(shè)置時一定要加英文的雙引("")號或單引號('')。
*/
演示地址:http://img.jb51.net/online/jquery_pic/jquery_pic.htm
下載地址 http://img.jb51.net/online/jquery_pic/jquery_pic_files/YlMarquee.js
相關(guān)文章
使用jQuery加載html頁面到指定的div實現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘Query加載html頁面到指定的div實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07jQuery實現(xiàn)的手風(fēng)琴側(cè)邊菜單效果
這篇文章主要介紹了jQuery實現(xiàn)的手風(fēng)琴側(cè)邊菜單效果,涉及jQuery事件響應(yīng)及元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-03-03從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集
在使用jQuery選擇器獲取到j(luò)Query包裝集后, 我們需要對其進行操作. 本章首先講解如何動態(tài)的創(chuàng)建元素, 接著學(xué)習(xí)如何管理jQuery包裝集, 比如添加,刪除,切片等.2011-02-02關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法
這篇文章主要介紹了關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法,需要的朋友可以參考下2017-03-03jQuery中彈出iframe內(nèi)嵌頁面元素到父頁面并全屏化的實例代碼
這篇文章主要介紹了jQuery中彈出iframe內(nèi)嵌頁面元素到父頁面并全屏化的實例代碼,需要的朋友可以參考下2016-12-12jQuery實現(xiàn)菜單感應(yīng)鼠標(biāo)滑動動畫效果的方法
這篇文章主要介紹了jQuery實現(xiàn)菜單感應(yīng)鼠標(biāo)滑動動畫效果的方法,實例分析了jQuery中鼠標(biāo)事件及animate的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02jQuery 1.3 和 Validation 驗證插件1.5.1
jQuery 1.3已經(jīng)新鮮出爐了,你可以通過jQuery 的官方博客查看相關(guān)細節(jié)。jQuery三歲了!2009-07-07