首頁 JS特效 jQuery特效 jQuery仿手機新浪微博聊天介面

jQuery仿手機新浪微博聊天介面

jQuery仿手機新浪微博聊天介面

這是一款十分簡潔的微博手機聊天介面模板,jQuery仿手機新浪微博聊天對話式程式碼。

這是一款十分簡潔的微博手機聊天介面模板,jQuery仿手機新浪微博聊天對話式程式碼。
/*發送訊息*/
function send(headSrc,str){
var html="<div class='send'><div class='msg'><img src=" headSrc " />"
"<p><i class='msg_input'></i>" str "</p></div></div>";
upView(html);
}
/*接受訊息*/
function show(headSrc,str){
var html="<div class='show'><div class='msg'><img src=" headSrc " />"
"<p><i class='msg_input'></i>" str "</p></div></div>";
upView(html);
}
/*更新視圖*/
function upView(html){
$('.message').append(html);
$('body').animate({scrollTop:$('.message').outerHeight()-window.innerHeight},200)
}
function sj(){
return parseInt(Math.random()*10)
}
$(function(){
$('.footer').on('keyup','input',function(){
if($(this).val().length>0){
$(this).next().css('background','#114F8E').prop('disabled',true);

}else{
$(this).next().css('background','#ddd').prop('disabled',false);
}
})
$('.footer p').click(function(){
show("./images/touxiangm.png",$(this).prev().val());
test();
})
})

/*測試資料*/
var arr=['我是小Q','好久沒聯絡了! ','你在想我麼','怎麼不跟我說話','跟我聊會天吧'];
var imgarr=['images/touxiang.png','images/touxiangm.png']
test()
function test(){
$(arr).each(function(i){
setTimeout(function(){
send("images/touxiang.png",arr[i])
},sj()*500)
})
}



Jquery是網頁程式設計所需的重要技術之一。 Jquery是繼prototype之後又優秀的Javascrīpt框架,它是輕量級的js函式庫,它相容於CSS3,也相容於各種瀏覽器。 jQuery讓用戶能更方便地處理HTML documents、events、實現動畫效果,並且方便地為網站提供AJAX互動。 jQuery還有一個比較大的優點是,它的文件說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。 jQuery能夠讓使用者的html頁保持程式碼和html內容分離,也就是說,不用再在html裡面插入一堆js來呼叫指令了,只要定義id即可。

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

HTML5仿手機微信聊天介面 HTML5仿手機微信聊天介面

08 May 2018

這篇文章主要為大家詳細介紹了HTML5仿手機微信聊天介面的關鍵程式碼,具有一定的參考價值,有興趣的朋友們可以參考一下

HTML5仿手機微信聊天介面_html5教學技巧 HTML5仿手機微信聊天介面_html5教學技巧

16 May 2016

這篇文章主要為大家詳細介紹了HTML5仿手機微信聊天介面的關鍵程式碼,具有一定的參考價值,有興趣的朋友們可以參考一下

HTML5仿手機微信聊天介面的具體分析 HTML5仿手機微信聊天介面的具體分析

30 Mar 2017

這篇文章主要為大家詳細介紹了HTML5仿手機微信聊天介面的關鍵程式碼,具有一定的參考價值,有興趣的朋友們可以參考一下

HTML5超逼真下雪場景效果 HTML5超逼真下雪場景效果

18 Jan 2017

這是一款以jquery為基礎的超逼真下雪場景特效。此特效使用jquery程式碼來動態外掛程式html5 canvas元素,然後在canvas中製作下雪特效。

jQuery與CSS3超炫漢堡變形動畫特效 jQuery與CSS3超炫漢堡變形動畫特效

18 Jan 2017

這是一款使用jQuery和CSS3來製作的酷炫漢堡包變形動畫特效。此特效透過jQuery來附加按鈕事件,並透過CSS3 transform和animation來製作動畫特效。

jquery打字特效停止回刪 jquery打字特效停止回刪

23 May 2023

隨著網路的普及,打字特效的應用越來越廣泛,jquery打字特效也成為了許多網站開發人員的首選。然而,在實現這種特效的過程中,細節問題常常會影響使用者體驗,例如打字特效的回刪問題。本文將介紹如何利用jquery打字特效停止回刪,提升使用者的瀏覽體驗。 jquery打字特效的實作可以使用現成的插件,如typed.js和jQuery.Typewriter等。這些插件都是基於jquery的

jQuery動畫特效實例教學_jquery jQuery動畫特效實例教學_jquery

16 May 2016

這篇文章主要介紹了jQuery動畫特效,詳細敘述了jQuery動畫特效的實現方法,非常實用,需要的朋友可以參考下

漂亮的jquery提示效果(仿騰訊彈出層)_jquery 漂亮的jquery提示效果(仿騰訊彈出層)_jquery

16 May 2016

jquery提示效果很多,本文也提供一個超漂亮的仿騰訊彈出層效果,熱愛特效的你可千萬不要錯過了啊,希望本文提供的案例對你學習jquery特效有所幫助

jQuery實現玻璃流光質感的手風琴特效_jquery jQuery實現玻璃流光質感的手風琴特效_jquery

16 May 2016

這篇文章主要介紹了jQuery實現玻璃流光質感的手風琴特效,是一款基於jQuery CSS3實現手風琴特效,希望你可以喜歡。

See all articles See all articles

Hot Tools

jQuery2019情人節表白放煙火動畫特效

jQuery2019情人節表白放煙火動畫特效

一款抖音上很火紅的jQuery情人節表白放煙火動畫特效,適合程式設計師、科技宅用來向心愛的女孩告白,無論你選擇願意或不願意,到最後都得同意。

layui響應式動畫登入介面模板

layui響應式動畫登入介面模板

layui響應式動畫登入介面模板

520情人節表白網頁動畫特效

520情人節表白網頁動畫特效

jQuery情人節表白動畫、520表白背景動畫

酷炫的系統登入頁

酷炫的系統登入頁

酷炫的系統登入頁

HTML5卡音樂播放器-CASSETTE PLAYER

HTML5卡音樂播放器-CASSETTE PLAYER

HTML5卡音樂播放器-CASSETTE PLAYER

Hot Article

魯瑪島:如何取得工具代幣
14 Nov 2024 手游攻略
魯瑪島:如何孵化魯瑪
28 Nov 2024 手游攻略
Supervive:伯勞建造指南
27 Nov 2024 手游攻略
盧馬島:所有職業的解釋
28 Nov 2024 手游攻略