liMarquee演示12种不同的无缝滚动效果

很实用的一款liMarquee演示12种不同的无缝滚动效果

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>liMarquee演示12种不同的无缝滚动效果-默认效果_sucaihuo</title>
        <link rel="stylesheet" href="css/liMarquee.css">
        <style>
            .sucaihuo { width: 800px; margin: 150px auto; font-size: 14px;}
            .sucaihuo a { margin: 0 15px; color: #333; text-decoration: none;}
            .sucaihuo a:hover { text-decoration: underline;}
        </style>
    </head>

    <body>
        <h1>默认效果</h1>

        <div class="sucaihuo">

            <a href="#">jquery霓虹灯转盘加抽奖提示弹出层</a>
            <a href="#">jQuery大风车转盘转起来</a>
            <a href="#">jQuery抽奖转盘停不下来</a>
            <a href="#">jQuery手机幸运大转盘抽奖</a>
        </div>

        <script src="js/jquery-1.8.3.min.js"></script>
        <script src="js/jquery.liMarquee.js"></script>
        <script>
            $(function() {
                $(‘.sucaihuo‘).liMarquee();
            });
        </script>

        <div class="menu">
            <a class="cur" href="index.html">1、默认效果</a>
            <a href="index2.html">2、向右滚动</a>
            <a href="index3.html">3、向上滚动</a>
            <a href="index4.html">4、向下滚动</a>
            <a href="index5.html">5、滚动速度</a>
            <a href="index6.html">6、非无缝滚动</a>
            <a href="index7.html">7、禁止拖动</a>
            <a href="index8.html">8、内容不足不滚动</a>
            <a href="index9.html">9、鼠标悬停不暂停</a>
            <a href="index10.html">10、反向</a>
            <a href="index11.html">11、自定义事件</a>
            <a href="index12.html">12、图片演示</a>
        </div>

    </body>
</html>

时间： 2024-12-10 02:49:25

liMarquee演示12种不同的无缝滚动效果的相关文章

兼容各种浏览器的文字循环无缝滚动效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>中国站长天空-网页特效-文

图片的无缝滚动效果

代码: ps:图片200*200: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图片的无缝滚动效果</title> 6  7 <link rel="shortcut icon" type="image/x-i

信息无缝滚动效果marquee

横向滚动.纵向滚动 1. 解决滚动的空白向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动上下滚动实现无缝滚动1. innerHTML2. scrollTop3. offsetHeight4. setInterval()5. clearInterval() HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset

JQuery实现文字无缝滚动效果 Marquee插件

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 官方演示,如下: Demo 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript&

无缝滚动效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin:0; padding: 0;} .container { position: relative; width: 712px; height: 108px; margin: 5

jQery无缝滚动效果

思路: 赋值所有li,添加到ul末尾,重新计算ul宽度每次移动一个固定的值,当超出一半时,将ul拉回原位以下代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ disp

javascript小例子：實現四方向文本无缝滚动效果

实现一个文本无缝滚动的效果: <!DOCTYPE html>   <!--[if IE 8 ]

jq封装-无缝滚动效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{ margin:0; padding: 0; } .outer{ position: relative; margin:30px auto; border:1px solid #ccc; border

js实现表格无缝滚动效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>table表格无缝向上滚动</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .tablebox { heigh