jquery　向上滚动

最新推荐文章于 2021-07-29 08:48:39 发布
最新推荐文章于 2021-07-29 08:48:39 发布
阅读量785 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruizhengyun/article/details/45060141
版权 


<!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>jQuery文字无缝滚动效果代码</title>  
<style>  
*{margin:0;padding:0;font-size:12px;}  
body{background:none;}  
input,button,select,textarea{outline:none;}  
ul,li,dl,ol{list-style:none;}  
a{color:#666;text-decoration:none;}  
/* bcon */  
.bcon{width:270px;border:1px solid #eee;margin:30px auto;}  
.bcon h2{border-bottom:1px solid #eee;padding:0 10px;}  
.bcon h2 b{font:bold 14px/40px '瀹嬩綋';border-top:2px solid #3492D1;padding:0 8px;margin-top:-1px;display:inline-block;}  
.list_lh{height:400px;overflow:hidden;}  
.list_lh li{padding:10px;}  
.list_lh li.lieven{background:#F0F2F3;}  
.list_lh li p{height:24px;line-height:24px;}  
.list_lh li p a{float:left;}  
.list_lh li p em{width:80px;font:normal 12px/24px Arial;color:#FF3300;float:right;display:inline-block;}  
.list_lh li p span{color:#999;float:right;}  
.list_lh li p a.btn_lh{background:#28BD19;height:17px;line-height:17px;color:#fff;padding:0 5px;margin-top:4px;display:inline-block;float:right;}  
.btn_lh:hover{color:#fff;text-decoration:none;}  
</style>  
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>  
<script type="text/javascript">  
;(function($){  
    $.fn.myScroll = function(options){  
        var defaults ={  
            speed:40,  
            rowHeight:24  
        };  
        var opts = $.extend({},defaults,options),intId = [];  
        function marquee(obj,rowHeight){  
            obj.find('ul').stop('true').animate({'marginTop':'-=1'},0,function(){  
                var s = Math.abs(parseInt($(this).css('marginTop')));  
                if(s>=rowHeight){  
                    $(this).find('li').slice(0,1).appendTo($(this)).parents('ul').css('marginTop',0);  
                }  
            });  
        }  
        return this.each(function(i){  
            var rowHeight = opts.rowHeight,  
                speed = opts.speed,  
                _this = $(this);  
            intId[i] = setInterval(function(){  
                if(_this.find('ul').height() <= _this.height()){  
                    clearInterval(intId[i]);  
                }else{  
                    marquee(_this,rowHeight);  
                }  
            },speed);  
            _this.hover(function(){  
                clearInterval(intId[i]);  
            },function(){  
                intId[i] = setInterval(function(){  
                    if(_this.find('ul').height() <= _this.height()){  
                        clearInterval(intId[i]);  
                    }else{  
                        marquee(_this,rowHeight);  
                    }  
                },speed);  
            });  
        });  
    }  
})(jQuery);  
$(document).ready(function(){  
    $('.list_lh li:even').addClass('lieven');  
    $("div.list_lh").myScroll({  
    speed:40, //数值越大，速度越慢  
    rowHeight:68 //li的高度  
    });  
})  
</script>  
</head>  
<body>  
<div class="bcon">  
    <h2><b>逍遥叹</b></h2>  
    <!-- 代码开始 -->  
    <div class="list_lh">  
        <ul>  
            <li>  
                <p><a href="javascript:;">1000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">2000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">3000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">4000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">5000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">6000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">7000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">8000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">9000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">1000000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">1100000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
            <li>  
                <p><a href="javascript:;">1200000</a><a href="javascript:;" class="btn_lh">逍遥叹</a><em>牵挂</em></p>  
                <p><a href="javascript:;" class="a_blue">江湖再见</a><span>17:28:05</span></p>  
            </li>  
        </ul>  
    </div>  
    <!-- 代码结束 -->  
</div>  
</body>  
</html>


编程之上
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery表格信息自动向上滚动代码.zip
01-11
jQuery表格自动向上滚动代码，鼠标悬浮停止，离开自动继续滚动 jQuery表格自动向上滚动代码，鼠标悬浮停止，离开自动继续滚动
html表格 行 自动向上,jQuery table表格无缝向上滚动效果
weixin_28984379的博客
05-31 740
HtmlCssJs排名地市纯枪量(吨)1大连2470.482大连22470.483大连32470.484大连42470.485大连52470.486大连62470.487大连72470.488大连82470.489大连92470.4810大连102470.4811大连112470.4812大连122470.4813大连132470.4814大连142470.4815大连152470.48table...
jQuery实现表格行数据滚动效果
qq_41927979的博客
07-29 1087
啥也不说了，直接整代码 HTML代码： <div class="box"> <div class="box-header"> <div class="col">位置</div> <div class="col">温度(℃)</div> <div class="col">湿度(%RH)</div> <div class="col">状态</div>
利用JQuery一步步打造无缝滚动新闻
weixin_34331102的博客
05-10 107
利用JQuery一步步打造无缝滚动新闻 首先，我们这里有这么一段html代码，很简洁，如下所示： 1<divid="tag">2<ul>3<li>你说我是好人吗，我是好人啊</li>4<li>哈哈，我真的不知道说什么了</li>5<li&...
JQ获取动态数据渲染表格数据向上滚动
qq_39047060的博客
04-02 434
实现效果： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #title { width: 915px; height: 735px;
jquery 文字向上滚动
09-15
文字在文本框中能自动向上滚动，支持移动端
jquery无缝向上滚动实现代码
10-27
向上滚动的效果想必大家都见过吧!无缝间歇向上滚动应该也不会陌生吧，接下来为大家介绍下jquery实现无缝间歇滚动，感兴趣的朋友可以参考下哈，希望可以帮助到你们
jquery单行文字向上滚动效果示例
10-26
主要介绍了jquery实现的单行文字向上滚动效果,需要的朋友可以参考下
jquery向上循环滚动特效特效代码
03-20
jquery向上循环滚动特效是一款文字行向上循环滚动jquery插件，兼容主流浏览器。
jquery自动滚动表格
qq_38872934的博客
09-30 2523
想要做出日志表格自动滚动的样式，百度一下，发现大部分都是通过jQuery和定时器结合去实现的，记下来记下来~ 注意点 1.主要通过$obj.css()，改变top(结合position)或者margin-top属性，产生滚动效果。 2.滚动的操作对象主要是tr，因此thead的tr也有可能会受到影响，所以最好在html代码中设置2个table，1个放thead，1个放tbody，滚动操作第2个。 ...
jquery自下而上循环滚动table
12-14
jquery自下而上循环滚动table
jQuery实现表头固定表格内容滚动效果
11-02
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果
【js与jquery】jquery循环滚动新闻
PHP在线开发笔记
09-02 1685
1.效果如图：   2.html代码： 最新动态 甜美宽松毛衣今秋一定红. 秋装百搭小马甲不到50元. 修身韩版小西装万人疯抢. 夏末雪纺店主含泪大甩卖. 瑞丽都疯狂推荐的秋装. 48元长款针织小开衫卖疯啦. 长袖雪纺衫单穿内搭都超美.   3.jquery代码： /*新闻滚动*/ $(function(){
jquery实现云朵飘动
江湖再见
07-07 2677
每天一个小动画。
侧边固定悬浮导航
江湖再见
03-31 1718
侧边固定悬浮导航
jquery 控制textArea 随文本增加而变高
江湖再见
04-15 1669
jquery 控制textArea 随文本增加而变高 *{margin:0; padding: 0;} .f-wrap{ width: 1000px; margin:30px auto; } textarea{ text-indent: 2em; border:1px solid #ddd; width: 100%; height:150px
canvas 烟花
江湖再见
04-14 1576
canvas 烟花 /* basic styles for black background and crosshair cursor */ body { background: #000; margin: 0; } canvas { cursor: crosshair; display: block; } Canvas is not supported in your browser.
表单操作-复选框
江湖再见
06-04 1513
前端web开发表单交互功能
jquery 页面搜索例子
江湖再见
04-13 1118
页面搜索实例 table{border-collapse:collapse;} table td,table th{ border:1px solid #ddd; line-height: 30px; padding: 0 0 0 10px;} 姓名 性别 职位 手机号码 张三 男 前端开发 13432349833 张歆艺
jquery 向上连续滚动代码
最新发布
05-31
您可以尝试以下代码实现jquery向上连续滚动： HTML部分： ``` 内容1 内容2 内容3 内容4 内容5 内容6 ``` CSS部分： ``` .scroll { height: 100px; overflow: hidden; } .scroll ul { margin: 0; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值