如何用jquery制作选框 [英] How to make marquee with jquery

问题描述

我需要将文本向上移动，并从数据库中检索此文本。我已经尝试过marquee标签但是没有显示整个文本，直到文本到达它停止并重新开始的上升点结束。当我尝试使用JQuery但没有工作时



下面的代码就是我试过的内容

请帮助



我尝试过：



< divclass>

< asp ：DataListID =dlIdeaDataSourceID =SqlDataSource2runat =server

Width =100％Horizo​​ntalAlign =LeftCellPadding =2>

< itemtemplate>

< divclass>

< divclass>

< spanclass>< iclass>



< divclass>

< muted>'<％＃Eval（date）％> ;'




< ahref>'<％＃Eval（Ntitle）％>'：< asp：LabelID =Label8 runat =serverText ='<％＃Eval（news）％>'>

< asp：SqlDataSourceID =SqlDataSource2runat =server ConnectionString =<％$ ConnectionStrings：ConnectionString％>

SelectCommand =SELECTTOP（4）* FROM [N ews] ORDERBY [date] DESC>



< scriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1 /jquery.min.js\"></script>

< scriptsrc =jquery.marquee.js>< / script>

< scriptsrc =jquery.pause.js>< / script>

< scriptsrc =jquery.easing.min.js>< / script>

< script>

$（function（）{

$（'。marquee'）。marquee（{

allowCss3Support：true ，

//workswhenallowCss3Supportissettotrue-forfulllistseehttp://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function

css3easing ：'线性'，

//requiresjQueryeasingplugin.Defaultis'linear'

缓和：'线性'，

// trueorfalse-应该重新连接到连续流的影响

重复：false，

// pausetimebeforenextanimationturninmilliseconds

delayBeforeStart：1000，

方向：'up'，

// tru eorfalse-shouldthemarqueebeduppedtoshowaneofcontinagesflow

重复：false，

// speedinmillisecondsoftmarqueeinmilliseconds

持续时间：5000，

// gapinpixelsbetweenthetickers

缺口：20，

// oncyclepausethemarquee

pauseOnCycle：false，

// onhoverpausethemarquee-usingjQuerypluginhttps：// github.com/tobia/Pause

pauseOnHover：false，

// themarqueeisvisibleinitiallypositionednexttothebordertowardsitwillbemoving

startVisible：false

} ）;

}）;

< / script>

解决方案

ConnectionStrings：ConnectionString％>

SelectCommand =SELECTTOP（4）* FROM [News] ORDERBY [date] DESC>



< scriptsrc =https ：//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>

< scriptsrc =jquery.marquee.js >< / script>

< scriptsrc =jquery.pause.js>< / script>

< scriptsrc =jquery.easing.min.js>< / script>

< script>

（function（）{

（'。marquee'）。marquee（{

allowCss3Support：true，

//workswhenallowCss3Supportissettotrue-forfulllistseehttp://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function

css3easing： '线性'，

//requiresjQueryeasingplugin.Defaultis'linear'

缓和：'线性'，

// trueorfalse-应该重新连接到连续流的影响
重复：false，

// pausetimebeforenextanimationturninmillisesec

delayBeforeStart：1000，

方向：'up'，

// trueorfalse-shouldthemarqueebeduplicatedtoshowaneffectofcontinuesflow

重复：false，

// speedinmillisecondsoftmarqueeinmilliseconds

持续时间：5000，

// gapinpixelsbetweenthetic kers

缺口：20，

// oncyclepausethemarquee

pauseOnCycle：false，

// onhoverpausethemarquee-usingjQuerypluginhttps： //github.com/tobia/Pause

pauseOnHover：false，

// themarqueeisvisibleinitiallypositionednexttothebordertowardsitwillbemoving

startVisible：false

}）;

}）;

< / script>

I do need to make text move up and this text is retrieved from database. I have tried marquee tag but no displaying whole text till it ends just when text reaches the up point it stops and starts again. when I tried JQuery but not working

the code below is what I have tried
Please help

What I have tried:

<divclass>
<asp:DataListID="dlIdea"DataSourceID="SqlDataSource2"runat="server"
Width="100%"HorizontalAlign="Left"CellPadding="2">
<itemtemplate>
<divclass>
<divclass>
<spanclass><iclass>

<divclass>

<muted>'<%#Eval("date")%>'


<ahref>'<%#Eval("Ntitle")%>':<asp:LabelID="Label8"runat="server"Text='<%#Eval("news")%>'>

<asp:SqlDataSourceID="SqlDataSource2"runat="server"ConnectionString="<%$ConnectionStrings:ConnectionString%>"
SelectCommand="SELECTTOP(4)*FROM[News]ORDERBY[date]DESC">

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<scriptsrc="jquery.marquee.js"></script>
<scriptsrc="jquery.pause.js"></script>
<scriptsrc="jquery.easing.min.js"></script>
<script>
$(function(){
$('.marquee').marquee({
allowCss3Support:true,
//workswhenallowCss3Supportissettotrue-forfulllistseehttp://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing:'linear',
//requiresjQueryeasingplugin.Defaultis'linear'
easing:'linear',
//trueorfalse-shouldthemarqueebeduplicatedtoshowaneffectofcontinuesflow
duplicated:false,
//pausetimebeforethenextanimationturninmilliseconds
delayBeforeStart:1000,
direction:'up',
//trueorfalse-shouldthemarqueebeduplicatedtoshowaneffectofcontinuesflow
duplicated:false,
//speedinmillisecondsofthemarqueeinmilliseconds
duration:5000,
//gapinpixelsbetweenthetickers
gap:20,
//oncyclepausethemarquee
pauseOnCycle:false,
//onhoverpausethemarquee-usingjQuerypluginhttps://github.com/tobia/Pause
pauseOnHover:false,
//themarqueeisvisibleinitiallypositionednexttothebordertowardsitwillbemoving
startVisible:false
});
});
</script>

解决方案

ConnectionStrings:ConnectionString%>"
SelectCommand="SELECTTOP(4)*FROM[News]ORDERBY[date]DESC">

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<scriptsrc="jquery.marquee.js"></script>
<scriptsrc="jquery.pause.js"></script>
<scriptsrc="jquery.easing.min.js"></script>
<script>

(function(){

('.marquee').marquee({
allowCss3Support:true,
//workswhenallowCss3Supportissettotrue-forfulllistseehttp://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing:'linear',
//requiresjQueryeasingplugin.Defaultis'linear'
easing:'linear',
//trueorfalse-shouldthemarqueebeduplicatedtoshowaneffectofcontinuesflow
duplicated:false,
//pausetimebeforethenextanimationturninmilliseconds
delayBeforeStart:1000,
direction:'up',
//trueorfalse-shouldthemarqueebeduplicatedtoshowaneffectofcontinuesflow
duplicated:false,
//speedinmillisecondsofthemarqueeinmilliseconds
duration:5000,
//gapinpixelsbetweenthetickers
gap:20,
//oncyclepausethemarquee
pauseOnCycle:false,
//onhoverpausethemarquee-usingjQuerypluginhttps://github.com/tobia/Pause
pauseOnHover:false,
//themarqueeisvisibleinitiallypositionednexttothebordertowardsitwillbemoving
startVisible:false
});
});
</script>

这篇关于如何用jquery制作选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！