jquery连续滚动-低调大师

jquery连续滚动

2018-06-04 603

　　本文非常详细的讲解在jquery里实现图片或文字的连续循环滚动的方法。

连续循环滚动是我们在网页开发中经常要用到的特效，在jquery里，我们要实现文字或图片的连续循环滚动是非常简单的。出处：http://www.aijquery.cn

第一步：HTML结构和CSS样式：

<style type="text/css"> 
#byc ul li {width:100px;height:80px} 
</style>
<div id="byc" class="mx-auto" style="width:402px;height:80px;overflow:hidden;border:1px solid red">
<ul class="list-unstyled">
<li class="border float-left">Lorem ipsum</li>
<li class="border float-left">Phasellus iaculis</li>
<li class="border float-left">Nulla volutpat</li>
<li class="border float-left">Nulla </li>
<li class="border float-left">volutpat</li>
</ul>
</div>

结构很简单，div是展示的框架界面，根据自己的网页，设置好宽高，超出的部分隐藏，图片或文字信息全放在ul列表里，CSS样式的话，让li浮动，并且设置好li的宽高就行。

第二步：编写JS代码：

function GunDong(v){
var $ul=v.find("ul");
var _w=$ul.find("li").eq(0).outerWidth();
$ul.width(_w*$ul.find("li").length);
this.Go=function(){
$ul.animate({marginLeft:"-"+_w},1000,function(){
$ul.css({marginLeft:0}).find("li:first").appendTo($ul);
});
};
this.autoScroll=function(){
var self=this;
var g=setInterval(self.Go,1500);
$ul.mouseover(function(){
clearInterval(g);
}).mouseout(function(){
g=setInterval(self.Go,1500);
});
}
}

代码很简单，共四个过程：

更改ul的宽度，这是为了让超出显示范围的图片或文字并排成一排，这样滚动的时候才会“连续性”；

设置滚动一次的动作函数Go;用jquery里的animate很容易实现，如果要向右滚动，上面代码里改成marginRight；

通过setInterval来循环调用上面的动作函数Go，实现图片或文字的连续滚动；

通过jquery里的mouseover和mouseout来设置当鼠标放上去和移开时，停止滚动和继续滚动；

第三步：调用代码并运行：

var a=new GunDong($("#byc"));
a.autoScroll();

微信关注我们

原文链接：https://yq.aliyun.com/articles/643710

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

freemarker模板修改后不生效

昨天用springboot+freemarker开发一个项目，已经设置热部署了，之前修改freemarker模板时，一刷新就会变化；但是不知道为啥修改后，刷新没有变化，重新启动springboot就可以看到变化。在网上查了半天都说是因为缓存，各种方法都试了，还是没有解决。偶然发现我修改了java，但是eclipse没有自动编译。一看果然，eclipse的自动编译选项没有打开，开启后，修改模板，刷新就变化了。

2018-06-04

862

本文和大家分享一个jquery的实例，这个实例实现的是点击网页里的按钮或链接，第一次和第二次会执行不同的事件，也就是两个事件会轮流执行。 <script language="javascript"> $(function(){ var f = false; $("#aijquery1").click(function(){ if(f == !f){ alert(1) }else{ alert(2) } }); }); </script> 上面的代码，第一次点击会执行"alert(1)",第二次"alert(2)",第三次“alert(1)”... 和大家分析一下这个效果是如何实现的。其实很简单，只要弄明白在js里，=和==的区别就行了，在js里，=是用来赋值的，而==是用来比较的，在上面的实例里，f=!f这一句的意思就是把f的值赋予成和他相反的值，所以在第一次点击的时候，f就变成了true，那么就会执行alert(1),在第二次点击的时候，f就成了false，就会执行alert(2). 这个实现虽然简单，但通过这个实例的学习，可以开拓我们的思路。

2018-06-04

1122

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。