我正在尝试将此Simple Marquee plugin用于新闻自动收录器。我已经做了一切作为文档。但是,我仍然收到一条错误消息,“未捕获的ReferenceError:未定义createMarquee ”。为什么我收到此错误。怎么解决这个问题?
$(function (){
createMarquee();
});
.container {
width: 100%;
background: #4FC2E5;
float: left;
display: inline-block;
overflow: hidden;
box-sizing: border-box;
height: 45px;
position: relative;
cursor: pointer;
}
.marquee-sibling {
padding: 0;
background: #3BB0D6;
width: 20%;
height: 45px;
line-height: 42px;
font-size: 12px;
font-weight: normal;
color: #ffffff;
text-align: center;
float: left;
left: 0;
z-index: 2000;
}
.marquee,
*[class^="marquee"] {
display: inline-block;
white-space: nowrap;
position: absolute;
}
.marquee { margin-left: 25%; }
.marquee-content-items {
display: inline-block;
padding: 5px;
margin: 0;
height: 45px;
position: relative;
}
.marquee-content-items li {
display: inline-block;
line-height: 35px;
color: #fff;
}
.marquee-content-items li:after {
content: "|";
margin: 0 1em;
}
<div class="container">
<div class="marquee-sibling"> Breaking News </div>
<div class="marquee">
<ul class="marquee-content-items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://rawgit.com/conradfeyt/Simple-Marquee/master/js/marquee.js"></script>
答案 0 :(得分:1)
您从github使用的版本与您链接的演示版本不同。
现在你需要以这种方式调用插件:
$( '简单选取框容器。')SimpleMarquee();
请注意,此插件所需的HTML和CSS也会更改。
$(function (){
$('.simple-marquee-container').SimpleMarquee();
});
.simple-marquee-container *{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.simple-marquee-container {
width: 100%;
background: grey;
float: left;
display: inline-block;
overflow: hidden;
box-sizing: border-box;
height: 45px;
position: relative;
cursor: pointer;
}
.simple-marquee-container .marquee-sibling {
padding: 0;
background: rgb(61, 61, 61);
width: 20%;
height: 45px;
line-height: 42px;
font-size: 12px;
font-weight: normal;
color: #ffffff;
text-align: center;
float: left;
left: 0;
z-index: 2000;
}
.simple-marquee-container .marquee, .simple-marquee-container *[class^="marquee"] {
display: inline-block;
white-space: nowrap;
position:absolute;
}
.simple-marquee-container .marquee{
margin-left: 25%;
}
.simple-marquee-container .marquee-content-items{
display: inline-block;
padding: 5px;
margin: 0;
height: 45px;
position: relative;
}
.simple-marquee-container .marquee-content-items li{
display: inline-block;
line-height: 35px;
color: #fff;
}
.simple-marquee-container .marquee-content-items li:after{
content: "|";
margin: 0 1em;
}
<div class="simple-marquee-container">
<div class="marquee-sibling">
I am here to iritate you
</div>
<div class="marquee">
<ul class="marquee-content-items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://rawgit.com/conradfeyt/Simple-Marquee/master/js/marquee.js"></script>