网站首页 网站建设 IT知识 IT知识教程 jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

2021-05-26 21:23:57
以下代码，运行后，需要刷新下，才能加载jquery,要不然看不到效果。
1、单行滚动效果

无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;}
  • 百度
  • www.jb51.net
  • 这是公告标题的第三行
  • 这是公告标题的第四行
  • 这是公告标题的第五行
  • 这是公告标题的第六行
  • 这是公告标题的第七行
  • 这是公告标题的第八行
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
三、可控制向前向后的多行滚动

无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;}

多行滚动演示：

  • 这是公告标题的第一行
  • 这是公告标题的第二行
  • 这是公告标题的第三行
  • 这是公告标题的第四行
  • 这是公告标题的第五行
  • 这是公告标题的第六行
  • 这是公告标题的第七行
  • 这是公告标题的第八行
向前  向后 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章

使用jquery实现的循环连续可停顿滚动实例
使用jquery实现的循环连续可停顿滚动，并应用于滚动图片，滚动层。记得一定要有jquery库哦~一、单行滚动无标题文档ul,li{margin:0;paddi
基于jquery实现点击左右按钮图片横向滚动
点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面：效果图如下：复制代码代码如下:点击左右按钮图片横向滚动
jquery实现多行文字图片滚动效果示例代码
今儿分享一个jquery实现多行滚动效果。我看一些论坛网站上面，公告处用的较多。代码如下//多行滚动(function($){$.fn.extend({Scro
一个jquery实现的不错的多行文字图片滚动效果
今儿分享一个jquery实现多行滚动效果。我看一些论坛网站上面，公告处用的较多。代码如下//多行滚动(function($){$.fn.extend({Scro
jquery简单实现纵向的无缝滚动代码实例
简单实现纵向无缝滚动（不要忘记引入jquery文件哦）看效果：1、HTML代码简单的jQuery无缝向上滚动效果简单的jQuery无缝向上滚动效果简单的jQue

最新文章

载入进度条 效果
邮件发送简单例子-html文件
详解关于html，css，js三者的加载顺序问题
限制复选框的最大可选数
随鼠标上下滚动的jquery代码

hot 热门文章

python模拟登陆Tom邮箱示例分享
苹果11抖音怎么投屏? iphone将投影投屏到电视的技巧
蚂蚁森林节气签怎么领
华为mate30怎么更新系统？华为mate30更新手机系统教程
小米电视怎么下载斗鱼

猜你喜欢

JavaScript 命名空间 使用介绍
javascript ���名规则 变量命名规则
javascript 秒表计时器实现代码
Javascript 面向对象之重载
JavaScript 面向对象之命名空间
以上产品还未完全满足我的所有需求，在下方提交我的专属需求
我的专属需求：
*手机号：
*验证码：
img
咨询报价
现在咨询
img

在线咨询

建站在线咨询
img

获取方案

获取建站报价/方案

我们联系您img

img

微信咨询

扫一扫添加
动力姐姐微信
img
img

TOP

我们尽快联系您