如何将滚动文本jquery添加到ASP.NET并允许VB.NET更改消息？ [英] How do I add scrolly text jquery to ASP.NET and allow VB.NET to change message?

问题描述

我刚刚学习，但有一个用Asp.Net编写的网站& VB.Net我想添加一些'Scroll Text'代码。我不想使用'Marquee'，因为它没有得到很好的支持。我需要找到一种方法来将代码添加到我的页面，并能够让它滚动标签，以便我可以以编程方式更改文本。这是我在Codepen上找到的代码...

 <   div     id   = 促销通知 >  
 <   ul  >  
 < span class =code-keyword><   li  >  ** CURRENT PROMO **买5送1只限时间！ 
 <   / li  >  
 <   li  >  **当前促销**推荐20位朋友并获得100美元的礼券！<   / li  >  
 <   / ul  >  
 <   / div  >  

   
 jQuery（文档）。ready（ function  （$）{
  var  promoticker =  function （）{
  var  window_width =  window  .innerWidth; 
  var  speed =  12  * window_width; 
 $（' ＃promo-notifications li：first'）。animate（{left： '   -  980px'}，速度，
  '  linear'， function （）{
 $（ this ）。detach（）。appendTo（' ＃promo-notifications ul' ）。css（'  left'，   100％）; 
 promoticker（）; 
}）; 
}; 
  if （$（ ＃promo-通知li）。长度>  1 ）{
 promoticker（）; 
} 
}）; 

  html ， body  { margin   ：  0;   padding  ：  0;   width  ：  100％; } 
＃促销通知 {
 背景 ： ＃F4A8BE;  
  font-size  ：  18px;  
  width  ：  100％;  
 字体 - 家庭 ： 'Helvetica-Neue'，Helvetica，Arial，sans-serif;  
} 
 
＃促销通知  ul  {
 < span class =code-attribute> width  ：  100％;  
  height  ：  35px;  
  position  ：  relative;  
 溢出 ： 隐藏;  
 } 
 
＃促销通知  li  {
  width  ：  980px;  
  line-height  ：  35px;  
  height  ：  35px;  
  position  ： 绝对;  
  top  ：  0;  
  left  ：  100％;  
  text-align  ：  center;  
  list-style  ：  none;  
} 

我添加了CSS代码到我的CSS文件然后将HTML和JQuery代码放在我的Asp.Net前端但它不起作用......



一旦工作我希望能够使用用它来标记标签或者有一些方法我可以用VB代码更改文本。



非常感谢任何帮助。



我的尝试：

<％@ Page Title =Language =VBMasterPageFile =〜/ Site2.masterAutoEventWireup =falseCodeFile =contact-us.aspx.vbInherits =contact_us％> 
 
< asp：Content ID =Content1ContentPlaceHolderID =HeadContentRunat =Server> 
< / asp：Content> 
< asp：Content ID =Content2ContentPlaceHolderID =MainContentRunat =Server> 
 
 jQuery（document）.ready（function（$）{
 var promoticker = function（）{
 var window_width = window.innerWidth; 
 var speed = 12 * window_width; 
 $（'＃promo-notifications li：first'）。animate（{left：' -  980px'}，speed，'linear'，function（）{
 $（this）。 detach（）。appendTo（'＃promo-notifications ul'）。css（'left'，100％）; 
 promoticker（）; 
}）; 
}; 
 if（$（＃promo-notifications li）。length> 1）{
 promoticker（）; 
} 
}）; 
 
< div id =promo-notifications> 
< ul> 
< li> **当前促销**买5送1〜仅限时间！< / li> 
< li> **当前促销**推荐20位朋友并获得100美元的礼券！< / li> 
< / ul> 
< / div> 
< / asp：Content> 

解决方案

100！< / li >
< ; / ul >
< / div >

   
 jQuery（ document ）。 ready（ function （

）{
var promoticker = function （）{
var window_width = window .innerWidth;
var speed = 12 * window_width;

（' ＃promo-notifications li：first'）。animate （{left：' - 980px'}，速度，
' linear'， function （）{

I'm just learning but have a website written in Asp.Net & VB.Net to which I wish to add some 'Scroll Text' code. I don't want to use 'Marquee' as it is not well supported. I need to figure out a way to add the code to my page and be able to have it scroll a 'Label' so that I can change the text programatically. Here's the code I found on Codepen...

<div id="promo-notifications">
  <ul>  
    <li>**CURRENT PROMO** Buy 5 and get 1 free ~ Only for a limited time! 
    </li>
    <li>**CURRENT PROMO** Refer 20 friends and get a gift certificate for $100!</li>
  </ul>
</div>

jQuery(document).ready(function($) {
  var promoticker = function() {
  var window_width = window.innerWidth;
  var speed = 12 * window_width;
  $('#promo-notifications li:first').animate( {left: '-980px'}, speed, 
 'linear', function() {
  $(this).detach().appendTo('#promo-notifications ul').css('left', "100%");
  promoticker();
    });
  };
  if ($("#promo-notifications li").length > 1) {
    promoticker();
  }
});

html, body {margin:0; padding: 0; width: 100%;}
#promo-notifications{
    background: #F4A8BE;
    font-size: 18px;
  width: 100%;
  font-family: 'Helvetica-Neue', Helvetica, Arial, sans-serif;
}

#promo-notifications ul{
    width: 100%;
    height: 35px;
    position: relative;
    overflow: hidden;
}

#promo-notifications li{
    width: 980px;
    line-height: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    left: 100%;
    text-align: center;
    list-style: none;
}

I have added the CSS code to my CSS file and then put the HTML and JQuery code just in my Asp.Net front end but it doesn't work...

Once working I wish to be able to use a 'Label' with it or have some way that I can change the text from the VB code.

Many thanks for any help at all.

What I have tried:

<%@ Page Title="" Language="VB" MasterPageFile="~/Site2.master" AutoEventWireup="false" CodeFile="contact-us.aspx.vb" Inherits="contact_us" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

jQuery(document).ready(function($) {
  var promoticker = function() {
    var window_width = window.innerWidth;
    var speed = 12 * window_width;
    $('#promo-notifications li:first').animate( {left: '-980px'}, speed, 'linear', function() {
      $(this).detach().appendTo('#promo-notifications ul').css('left', "100%");
      promoticker();
    });
  };
  if ($("#promo-notifications li").length > 1) {
    promoticker();
  }
});

<div id="promo-notifications">
    <ul>  
    <li>**CURRENT PROMO** Buy 5 and get 1 free ~ Only for a limited time!</li>
    <li>**CURRENT PROMO** Refer 20 friends and get a gift certificate for $100!</li>
  </ul>
</div>
</asp:Content>

解决方案

100!</li> </ul> </div>

jQuery(document).ready(function(

) { var promoticker = function() { var window_width = window.innerWidth; var speed = 12 * window_width;

('#promo-notifications li:first').animate( {left: '-980px'}, speed, 'linear', function() {

这篇关于如何将滚动文本jquery添加到ASP.NET并允许VB.NET更改消息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！