无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

百度微信小程序如何_js完成音讯滚动效果

时间:2021-01-12 15:00来源:百度微信小程序如何 作者:jianzhan 点击:
js完成信息翻转实际效果 文中关键共享了js完成信息翻转实际效果的实例编码。具备一定的参照使用价值,下边跟随网编一起來看看吧今日教大伙儿做下信息翻转的小作用。完成的
js实现消息滚动效果       本文主要分享了js实现消息滚动效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧

今天教大家做个消息滚动的小功能。实现的很简单。自己都有点意想不到呢~  哈哈

1.实现的中心思想,如图所示:

2.图片移动,用的是appendTo()这个方法。这个方法是先将标签从父标签中删除,然后拼接到某个标签后面,所以也就是替我们实现了,remove()这个方法。所以用这个方法是极好的~

3.然后就会用到定时器了。用定时器每次调用移动方法,让 ul 每次执行一个动画,改变它的margin-top值,执行完动画后,再将它的margin-top变为初始值;

4.触摸 ul 标签清除定时器,离开后,继续执行。

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 滚动信息 /title 
 style 
 margin: 0;
 padding:0;
 .scroll-box{
 width: 400px;
 height: 200px;
 border: 2px solid #000;
 margin: 20px auto;
 overflow: hidden;
 .scroll-box ul{
 list-style: none;
 width: 100%;
 height: 100%;
 .scroll-box ul li{
 width: 100%;
 height: 40px;
 box-sizing: border-box;
 line-height: 40px;
 text-align: center;
 /style 
 script src="libs/jquery/2.1.4/jquery.min.js" /script 
 script 
 $(function () {
 //获得当前 ul 
 var $uList = $(".scroll-box ul");
 var timer = null;
 //触摸清空定时器
 $uList.hover(function () {
 clearInterval(timer);
 },function () {//离开启动定时器
 timer = setInterval(function () {
 scrollList($uList);
 },1000);
 }).trigger("mouseleave"); //自动触发触摸事件
 //滚动动画
 function scrollList(obj) {
 //获得当前 li 的高度
 var scrollHeight = $("ul li:first").height();
 //滚动出一个 li 的高度
 $uList.stop().animate({marginTop:-scrollHeight},600,function () {
 //动画结束后,将当前 ul marginTop置为初始值0状态,再将第一个 li 拼接到末尾。
 $uList.css({marginTop:0}).find("li:first").appendTo($uList);
 /script 
 /head 
 body 
 div 
 li 1好消息!好消息!本店所有商品全部白送1 /li 
 li 2好消息!好消息!本店所有商品全部白送2 /li 
 li 3好消息!好消息!本店所有商品全部白送3 /li 
 li 4好消息!好消息!本店所有商品全部白送4 /li 
 li 5好消息!好消息!本店所有商品全部白送5 /li 
 li 6好消息!好消息!本店所有商品全部白送6 /li 
 li 7好消息!好消息!本店所有商品全部白送7 /li 
 li 8好消息!好消息!本店所有商品全部白送8 /li 
 /ul 
 /div 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信