demo.css
.box{ width:400px; margin:0 auto;}
.bcon{ width:270px; border:1px solid #eee; margin:30px auto;}
.bcon h1{ border-bottom:1px solid #eee; padding:0 10px;}
.bcon h1 b{ font-size:14px; line-height: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;}
scroll.js
(function($){
$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:40, //滚动速度,值越大速度越慢
rowHeight:24 //每行的高度
};
var opts = $.extend({}, defaults, options),intId = [];
function marquee(obj, step){
obj.find("ul").animate({
marginTop: '-=1'
},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}
this.each(function(i){
var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, 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, sh);
}
}, speed);
});
});
}
})(jQuery);
demo.html
<!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>
<link type="text/css" href="css/base.css" rel="stylesheet" />
<link type="text/css" href="css/demo.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript">
$(function(){
$('.list_lh li:even').addClass('lieven');
$("div.list_lh").myScroll({
speed:40, //数值越大，速度越慢
rowHeight:68 //li的高度
});
});
</script>
</head>
<body>
<div class="box">
<div class="bcon">
<h1><b>文字无缝上下滚动</b></h1>
<!-- begin -->
<div class="list_lh">
<ul>
<li>
<p><a href="###" target="_blank">1000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">2000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">3000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">4000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">5000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">6000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">7000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">8000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">9000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">1000000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">1100000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
<li>
<p><a href="###" target="_blank">1200000</a><a href="###" target="_blank" class="btn_lh">详情</a><em>推荐</em></p>
<p><a href="###" target="_blank" class="a_blue">阅谁问君诵，水落清香浮</a><span>17:28:05</span></p>
</li>
</ul>
</div>
<!-- end -->
</div>
</div>
</body>
</html>
效果图：
相关推荐
在前端开发中，实现动态效果是提升用户体验的重要手段之一，比如文字无缝滚动效果。这个代码资源就是基于jQuery库实现的，适用于创建一个在鼠标悬停时暂停，鼠标离开后继续滚动的文字滚动效果，同时它还兼容了古老的...
**jQuery排名文字无缝循环向上滚动代码详解** 在网页设计中，动态效果往往能吸引用户的注意力，提高用户体验。jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现各种动态效果，其中包括文字无缝循环滚动。...
4. **jQuery代码实现**：编写JavaScript代码来控制跑马灯的滚动效果。这包括初始化位置、设置定时器进行滚动、处理过渡动画等。 ```javascript $(document).ready(function() { var slider = $('#slider'); var ...
推荐一个JQuery的无缝文字滚动效果，同时也可以滚动图片，也叫做跑马灯效果。 此jquery插件，依托jquery库，能实现各种滚动效果，且让HTML代码符合W3C标准。 使用方法如下： 1、加载javascript。 [removed][removed...
这个函数将负责切换图片的显示状态，实现无缝滚动效果： ```javascript $(document).ready(function() { var slider = $('#slider'); var images = slider.children('img'); var currentIndex = 0; function ...
总的来说，这个压缩包提供了一个实用的jQuery插件，适用于那些希望在网站上创建动态、吸引人的文字滚动效果的开发者。通过学习和理解这个示例，开发者可以进一步掌握jQuery动画机制，提高自己的前端开发技能。
在本文中，我们将深入探讨如何使用jQuery库来实现图片的平滑滚动效果，这是一个常见的网页动态效果，可以增强用户体验。标题中的"jq实现图片滚动（平滑滚动）.rar"是一个压缩包，其中包含了实现这一功能的代码示例，...
在网页设计中，动态效果是吸引用户注意力的重要手段之一，其中文字滚动效果尤为常见。"jQuery文字不断向上滚动代码（兼容火狐）"是一个典型的JavaScript库应用案例，它利用jQuery库实现文字信息在页面上持续不断地...
1. **jQuery选择器**：jQuery提供了丰富的选择器，用于快速、准确地选取页面中的DOM元素，如ID选择器(#id)，类选择器(.class)等，它们在实现滚动效果时用于获取和操作需要滚动的元素。 2. **jQuery动画**：jQuery的...
同时，可以设置定时器实现自动滚动效果，如每隔一段时间自动向左或向右滚动一个公告项。 为了使效果更佳，代码可能还包含了一些优化措施，比如防止滚动过快导致的用户体验不佳，或者在达到最后一项时自动切换回第一...
在本案例中，jQuery将用于创建一个动态的表格滚动效果。 1. **jQuery选择器与DOM操作**： 在实现自动滚动前，我们需要先获取表格元素。jQuery提供了丰富的选择器，如ID选择器（`#id`）、类选择器（`.class`）等，...
css 代码如下: <style> .xMarquee{border:1px solid #ccc;height:25px;width:500px; margin:50px auto; background:#ffffff; overflow:hidden;} .xMarquee ol{list-style-type:none; margin:0px;...
总的来说，"jQuery 文字由左向右滚动 走马灯"是一个利用jQuery库和CSS样式实现的动态文本展示技术，通过精心调整动画参数和布局设置，可以创造出各种各样的滚动效果，增强网站的交互性和吸引力。在实际应用中，还...
jQuery的`.animate()`方法可以用来创建平滑的滚动效果，通过设定时间间隔（如每隔一定毫秒）改变表格的 scrollTop 属性，从而达到信息自动向上滚动的效果。而当用户将鼠标悬停在表格上时，可以通过`.mouseover()`和`...
标题 "jquery单行文字循环滚动特效代码" 涉及的是使用jQuery库来实现一...通过结合这些技术，可以创建出一个动态且引人注目的单行文字滚动效果。在实际应用中，还需要考虑代码的可维护性、性能优化以及跨浏览器兼容性。
1. **无缝轮播技术**：无缝轮播是指在列表或图片展示过程中，当最后一个元素滚动出去时，第一个元素能够立即跟进，形成一种连续不间断的效果。这种技术主要通过JavaScript或CSS3动画实现，确保滚动过程平滑且无明显...
**cxScroll插件**：cxScroll是一款基于jQuery的插件，其主要功能是实现页面元素的无缝滚动效果。该插件支持水平和垂直滚动，并提供了丰富的自定义选项，包括滚动速度、方向、暂停、触发方式等，使得开发者可以根据...
无缝轮播是一种特殊的轮播形式，指的是当用户浏览到最后一个元素时，能平滑过渡到第一个元素，没有任何明显的变化，实现连续不间断的滚动效果。此外，为了提升用户体验，通常还会在轮播图上加入左右点击（点击前一张...
这里使用jquery实现评论滚动效果，仿新浪微博大厅文字滚动效果，以前有不少人膜拜的效果，现在被模仿的到处都是啦，呵呵，今天这个仍是模仿的，评论和头像一起向下滚动，最新的一条带渐变淡入淡出，无缝循环向下滚动...