js滑動(dòng)提示效果代碼分享

更新時(shí)間：2016年03月10日 16:13:29 作者：我_愛(ài)編程

這篇文章主要為大家分享了js滑動(dòng)提示效果代碼，實(shí)現(xiàn)方法簡(jiǎn)單，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js滑動(dòng)提示效果，供大家參考，具體內(nèi)容如下

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

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");
 }

前臺(tái)代碼，寫(xiě)在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">請(qǐng)完善信息</div>

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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