스크립트 & 소스코드 공유

因需求要做一个，横向的文字从右到左的跑马灯 ,鼠标移动上去暂停，参考其他大大的跑马灯不太适用所以，自己再次封装了一个跑马灯，分享给大家也方便自己下次直接使用，我自己用的JQ版本为3.3.1（jquery-3.3.1.min.js）
先上效果图

代码部分为

HTML部分

<div style="padding: 0 1rem;">
<div id="container_small_tip">
<div id="content_small_tip"></div>
</div>
</div>

CSS部分

#container_small_tip{
background:#ffffff;
position:relative;
overflow:hidden;
width:100%;
height:36px;
line-height:36px;
}
#content_small_tip{
position:absolute;
left:0;
top:0;
white-space:nowrap;
color: #EBEEF7;
}

JS部分

调用方式为

var content = "自8888年8月8日起原基础强化班和原全面提升班合并升级为全面提分班，原全面提升班和原全面提升班所剩课时在升级后的全面提分班自动顺延";
$("#content_small_tip").html(content);
roll(2,"#container_small_tip","#content_small_tip");

跑马灯函数封装为

//跑马灯插件start
function roll(speed=1,fatherselect,select){
if ($(fatherselect) == null) return;
var $container = $(fatherselect);//#container_small_tip
var $content = $(select);//#content_small_tip
var init_left = $container.width();
$content.css({ left: parseInt(init_left) + "px" });
var This = this;
var time = setInterval(function () {move($container, $content, speed); }, 20);                //setInterval会改变this指向，即使加了This=this，也要用匿名函数封装

$container.bind("mouseover", function () {
clearInterval(time);
});
$container.bind("mouseout", function () {
time = setInterval(function () {move($container, $content, speed); }, 20);
});
// setTimeout(function () { $("#container").slideUp(); }, 30000);  //毫秒单位，显示30s后消失
return this;
};
function move($container, $content, speed){
var container_width = $container.width();
var content_width = $content.width();
if (parseInt($content.css("left")) + content_width > 0) {
$content.css({ left: parseInt($content.css("left")) - speed + "px" });
$content.css({color:"#02A0E9"})//改变字体颜色
}
else {
$content.css({ left: parseInt(container_width) + "px" });
$content.css({color:"#02A0E9"})//改变字体颜色
}
}
//跑马灯插件end

根据滚动条下拉而延迟加载显示图片特效，通过jquery来实现这个图片延迟加载显示特效，当用户下拉滚动条时才加载图片。

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
var $winH = $(window).height();
var $img = $("#show img");
var $imgH = parseInt($img.height()/2);
var $srcDef = "/data/editor/2103/5637885820110126103051018_CYJbtpaHLA.gif";
runing();
$(window).scroll(function(){
runing();
})
function runing(){
$img.each(function(i){
var $src = $img.eq(i).attr("original");
var $scroTop = $img.eq(i).offset();
if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)
{
if($img.eq(i).attr("src") == $srcDef){
$img.eq(i).hide();
}
$img.eq(i).attr("src",function(){return $src}).fadeIn(300);
}
})
}
})
</script>

*{ border:0;}
a{ display:inline; float:left; margin:55px; background:#ccc; overflow:hidden; font-size:0;}

<div id="show">
<a href="#"><img src="/data/editor/2103/5637885820110126103051018_CYJbtpaHLA.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>

<a href="#"><img src="/data/editor/2103/5637885820110126103051018_CYJbtpaHLA.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
</div>