Home > Article > Web Front-end > Example of jQuery implementing news broadcast scrolling and fade-in and fade-out effects
Example of jQuery implementing news broadcast scrolling and fade-in and fade-out effects
- 亚连Original
- 2018-05-29 11:14:442607browse
This article mainly introduces jQuery to implement news broadcast scrolling and fade-in and fade-out effects, and analyzes the related operating techniques of dynamic transformation of page elements based on jQuery plug-in in the form of examples. Friends in need can refer to the examples in this article
It describes how jQuery implements news broadcast scrolling and fade-in and fade-out effects. Share it with everyone for your reference, the details are as follows:
The following is the up and down scrolling source code
<!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>www.jb51.net 向上滚动代码带上下翻按钮滚动特效</title>
<style type="text/css">
body{ color:#333; font-size:13px;}
h3,ul,li{margin:0;padding:0; list-style:none;}
.scrollbox{ width: 340px; margin: 0 auto; overflow: hidden; border: 1px solid #CFCFCF; padding: 10px; }
#scrollp{width:340px;height:359px; overflow:hidden;}/*这里的高度和超出隐藏是必须的*/
#scrollp li{max-height:90px; width:300px; padding:0 20px;background:url(ico-4.gif) no-repeat 10px 23px; overflow:hidden; vertical-align:bottom; zoom:1; border-bottom:#B7B7B7 dashed 1px;}
#scrollp li h3{ height:24px; padding-top:13px; font-size:14px; color:#353535; line-height:24px; width:300px;}
#scrollp li h3 a{color:#353535; text-decoration:none}#scrollp li h3 a:hover{ color:#F00}
#scrollp li p{ height:36px; width:300px; color:#416A7F; line-height:18px; overflow:hidden}
#scrollp li p a{ color:#416A7F; text-decoration:none}
.scroltit{ height:26px; line-height:26px; padding-bottom:4px; margin-bottom:4px;}
.scroltit h3{ width:100px; float:left;}
.scroltit .updown{float:right; width:32px; height:22px; margin-left:4px}
#but_up{ background:url(up.gif) no-repeat 0 0; text-indent:-9999px}
#but_down{ background:url(down.gif) no-repeat 0 0; text-indent:-9999px}
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}
.test{
margin-top: 50px;
background: #CCCCCC;
border: .5px solid #ddd;
overflow: hidden;
height: 44px;
width: 100px;
}
.test li{
height: 44px;
width: 100%;
float: left;
line-height: 44px;
font-size: 18px;
border-top: .5px solid #ddd;
}
</style>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jq_scroll.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#scrollp").Scroll({line:1,speed:500,timer:2000,up:"but_up",down:"but_down"});
(function(){
var lineH = $(".test").find("li:first").height();
var appendTo = function(){
$(".test").find("li:first").appendTo($(".test"));
$(".test ul").css("marginTop", 0);
};
var animate = function(){
$(".test ul").eq(0).animate({
marginTop: -lineH
},500,appendTo)
};
var delayer = setInterval(animate, 2000);
})()
});
</script>
</head>
<body>
<p align="center"><strong>特效效果如下：</strong></p>
<p> </p>
<p class="scrollbox">
<p id="scrollp">
<ul>
<li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">移动娱乐业务突飞</a></h3></li>
<li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">不停转动向上滚动可控制向上向下滚动特效</a></h3> <p>p CSS JS自动不断向上一个一个滚动可控制向上向下滚动特效... </p></li>
<li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">全国涂料总产量呈现直线下滑态势</a></h3> <p>我国涂料工业将面临涂料消费税征收全面铺开，环保压力持续增加，2015年的形势不容乐观... </p></li>
<li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">镂空渔网超吸睛</a></h3> <p>镂空罩衫，短短的版型穿起来显高又俏皮，内搭长款连衣裙，非常大方哦... </p></li>
<li><h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="linktit">主题创业街亮相</a></h3> <p>目前已有包括咖啡厅、酒吧、餐厅、瑜伽室在内的8家商铺入驻该火车... </p></li>
</ul>
</p>
<p class="scroltit"><p class="updown" id="but_down">向上</p><p class="updown" id="but_up">向下</p></p>
</p>
<p class="test">
<ul>
<li>sections1</li>
<li>sections2</li>
<li>sections3</li>
<li>sections4</li>
</ul>
</p>
</body>
</html>
The following is the jq plug-in source code
/*
jQ向上滚动带上下翻页按钮
*/
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
var timerID;
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(), //获取行高,此处行高固定但是当文字伟一行或者两行时，要动态获取吧？？
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
//滚动函数
var scrollUp=function(){
_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
_this.animate({
//当滚动的元素height为max-height时，实时获取元素height
marginTop:-_this.find("li:first").height()
},speed,function(){
// for(i=1;i<=line;i++){
// _this.find("li:first").appendTo(_this);
// }
_this.find("li:first").appendTo(_this);
_this.css({marginTop:0});
_btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
});
}
//Shawphy:向下翻页函数
var scrollDown=function(){
_btnDown.unbind("click",scrollDown);
for(i=1;i<=line;i++){
_this.find("li:last").show().prependTo(_this);
}
_this.css({marginTop:-_this.find("li:first").height()});
_this.animate({
marginTop:0
},speed,function(){
_btnDown.bind("click",scrollDown);
});
}
//Shawphy:自动播放
var autoPlay = function(){
if(timer)timerID = window.setInterval(scrollUp,timer);
};
var autoStop = function(){
if(timer)window.clearInterval(timerID);
};
//鼠标事件绑定
_this.hover(autoStop,autoPlay).mouseout();
_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
_btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
}
})
})(jQuery);
Post another copy, the deleted script
/*
jQ向上滚动带上下翻页按钮
*/
(function($){
$.fn.extend({
txtScroll:function(opt,callback){
//参数初始化
if(!opt) var opt={};
var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
var timerID;
var _this=this.eq(0).find("ul:first");
speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):2000; //滚动的时间间隔（毫秒）
//滚动函数
var scrollUp=function(){
_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
_this.animate({
//当滚动的元素height为max-height时，实时获取元素height
marginTop: -_this.find("li:first").height()
},speed,function(){
_this.find("li:first").appendTo(_this);
_this.css({"marginTop":0});
_btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
});
}
//Shawphy:向下翻页函数
var scrollDown=function(){
_btnDown.unbind("click",scrollDown);
_this.find("li:last").show().prependTo(_this);
_this.css({marginTop:-_this.find("li:first").height()});
_this.animate({
marginTop:0
},speed,function(){
_btnDown.bind("click",scrollDown);
});
}
//Shawphy:自动播放
var autoPlay = function(){
if(timer) setIntervalT = window.setInterval(scrollUp,timer);
};
var autoStop = function(){
if(timer)window.clearInterval(setIntervalT);
};
//鼠标事件绑定
_this.hover(autoStop,autoPlay).mouseout();
_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
_btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
}
})
})(jQuery);
The running effect is as follows:
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
About the difference between v-if and v-show in vuejs and the problem that v-show does not work
Using iview to customize the verification keyword input box in vue Problems and solutions
The problem of adding expressions to v-show in Vue (determining whether to display)
The above is the detailed content of Example of jQuery implementing news broadcast scrolling and fade-in and fade-out effects. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn