1. 程式人生 > >網頁文字框中游標閃動過快的解決辦法

網頁文字框中游標閃動過快的解決辦法

引言  (游標閃動過快,都有點看不太清游標的位置,問我能不能調慢一點。這個問題我也早就發現了,一直以為是自己開發的編輯器有可能是js程式碼的問題,有可能自己開發的玩意就是不如別人開發的好吧,感覺這個查起來應該是很麻煩的事情,所以就放下沒管。

        昨天無意開啟tv150的使用者中心釋出產品頁面,竟然發現這裡的游標並沒有論壇裡的閃動那般快,於是斷定自己開發的編輯器沒有問題,即便是js問題也應該是和頁面裡其它的js衝突了,於是晚上有時間想辦法排查一下這個問題。

        最簡單的辦法莫過於把程式碼一段一段刪除掉,然後只放一個編輯器,再一點點往上加,這樣逐漸就可以排查到問題的所在了,經過幾分鐘的排查,竟然發現問題出現在編輯器的qq表情上。我將表情全部刪除掉之後,游標就會正常閃動,若將表情放到編輯器的邊上,游標則閃個不停。

         等我仔細的觀察了一下竟然發現游標的閃動速度和某個閃動頻繁的表情一個頻率,於是想到是不是瀏覽器的問題,把這個問題拿到百度和谷歌上搜索了一個遍,竟然沒有人遇到和我一樣的問題,於是我又去其它的幾個論壇裡看了看,逐漸的才把情況分析明白。

為什麼輸入框裡的游標會閃動過快?

         我們都知道一個連續動作的圖片組合起來就可以變成動畫,電影就是由若干個連續圖片組成,那麼想要播放這一幀一幀的圖片就需要有一個重新整理動作,只不過這個重新整理動作過快我們很難看清楚,比如我們桌面的重新整理速度一般是七十/秒以上,如果不能達到這個重新整理頻率那麼就會出現拖軌現象,所以我感覺這個應該和瀏覽器能顯示gif圖片的原理是一樣的,而游標屬於瀏覽器的一個元素,所以瀏覽器在顯示gif動畫的每一幀的時候會根據gif動畫的頻率來重新整理顯示,這時候就導致游標會受到這個重新整理的影響,從而變快。

         假如我們把gif或flash以及一此js特效的閃動過快的東西從頁面上去掉的話,會發現游標就又會回到正常的閃動狀態。

         有了這個想法之後我就想用iframe把表情展示出現,結果發現無論怎麼展示,只要是顯示則就會影響到游標,這時候我在百度有啊裡看到有啊社群的編輯器左側表情竟然是靜態的,我想會不會也是因為這個閃動的問題才給做成靜態的呢,真沒有想到百度竟然也無法解決這個問題。

         後來沒辦法,我也只能把第一屏的表情做成了靜態的,滑動門後面的幾屏還是動態的,所以當滑鼠放到第二欄以後游標就會立刻變快,而放到第一欄上的時候就會變慢。

網頁輸入框游標閃動過快的解決辦法

         如果你遇到了和我一樣的問題,那請檢視一下頁面上是否有gif閃圖(一般指閃動過快的那種),或flash,js特效閃動等元素,如果有的話,問題就在於此,把閃動的東西去掉或改變一種方式即可。

解決:原創

原因 游標 與 js 滾動圖片衝突

<script>
  var speed=5//速度數值越大速度越慢
  www_qpsh_com2.innerHTML=www_qpsh_com1.innerHTML
  function Marquee(){
  if(www_qpsh_com2.offsetWidth-www_qpsh_com.scrollLeft<=0)
  www_qpsh_com.scrollLeft-=www_qpsh_com1.offsetWidth
  else{
  www_qpsh_com.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  www_qpsh_com.onmouseover=function() {clearInterval(MyMar)}
  www_qpsh_com.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
   
  
   function StopMove()
  {
  clearInterval(MyMar)
  }
 
  function StartMove()
  {
    MyMar=setInterval(Marquee,speed)
  }
 
  </script> 

文字框:

       this.name.Attributes.Add("onblur", "StartMove()");
       this.name.Attributes.Add("onfocus", "StopMove()");
       this.pwd.Attributes.Add("onblur", "StartMove()");
       this.pwd.Attributes.Add("onfocus", "StopMove()");
       this.code.Attributes.Add("onblur", "StartMove()");
       this.code.Attributes.Add("onfocus", "StopMove()");