js滑動提示效果代碼分享

更新時間：2016年03月10日 16:13:29 作者：我_愛編程

這篇文章主要為大家分享了js滑動提示效果代碼，實現方法簡單，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js滑動提示效果，供大家參考，具體內容如下

js代碼漂亮的動畫效果；在靠右上角：背景顏色為紅，字體顏色為白色滑動變大上移緩慢漸變消失

function tishi() {

  $("#tishi").attr("style", "border: 1px solid #000;position: absolute; z-index: 10; width:200px; height: 30px;color:white;background-color:Red;border-radius:25px;-moz-border-radius:25px; text-align:center;left:70%; top:10%; display: none");

  $("#tishi").show().animate({
  width: '300px',
  height: '37px',
  top: '-=10px'
  , opacity: '0.8'
  }, "slow");
  $("#tishi").show().animate({
  top: '-=10px'
  , opacity: '0.6'

  }, "slow");
  $("#tishi").show().animate({
  top: '-=10px'
  , opacity: '0.4'
  }, "slow");
  $("#tishi").show().animate({
  top: '-=10px'
  , opacity: '0.2'
  }, "slow");
  $("#tishi").show().animate({
  top: '-=10px'
  , opacity: '0.0'
  }, "slow");
 }

前臺代碼，寫在body里：

<div id="tishi" style="border: 1px solid #000;
position: absolute; z-index: 10; width:200px; 
height: 30px;color:white;
background-color:Red;border-radius:25px;
 -moz-border-radius:25px; /* 老的 Firefox */
text-align:center;left:70%; 
top: 10%; 
display: none">請完善信息</div>

希望本文所述對大家學習javascript程序設計有所幫助。

您可能感興趣的文章:

ES6新特性之函數的擴展實例詳解
這篇文章主要介紹了ES6新特性之函數的擴展,實例形式較為詳細的分析了ES6針對函數參數、運算符及相關新特性的擴展操作與注意事項,需要的朋友可以參考下
2017-04-04
JS中強制類型轉換的實現
JavaScript中有幾種強制類型轉換的方法，可以將一個數據類型轉換為另一個數據類型，具有一定的參考價值，感興趣的可以了解一下
2023-05-05
IE8利用自帶的setCapture和releaseCapture解決iframe的拖拽事件方法
最近有個需求須要實現左右拖拽功能，頁面右邊是個iframe頁面，在chrome測試通過之后，發(fā)現在ie8上面效果不是很理想，查閱相關資料找到可以使用ie自帶的setCapture和releaseCapture來解決,需要的朋友可以參考下
2016-10-10
bootstrap IE8 兼容性處理
這篇文章主要為大家詳細介紹了bootstrap IE8 兼容性處理，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
JavaScript 常見的繼承方式匯總
這篇文章主要匯總了JavaScript 常見的繼承方式，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-09-09
JavaScript中的 new 命令
這篇文章主要介紹了JavaScript中的new 命令，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-05-05
詳解JavaScript基于面向對象之繼承實例
這篇文章主要介紹了JavaScript基于面向對象之繼承實例,需要的朋友可以參考下
2015-12-12
Bootstrap 源代碼分析(未完待續(xù))
這篇文章主要為大家詳細分析了Bootstrap部分源代碼，先提供給大家學習，感興趣的小伙伴們可以參考一下
2016-08-08
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(五)可移動地圖的實現
首先來說，我對游戲開發(fā)可以算是不怎么深入，因為現在的程序員愛用canvas，我卻就只會拿幾個div湊和。不過沒關系，因為做出來的同樣是游戲。哈！廢話最近有點多，感興趣的朋友可以了解下
2013-01-01
js的indexOf方法使用
indexOf() 方法可返回數組中某個指定的元素位置，本文就來介紹一下js的indexOf方法使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2023-05-05