Jquery layer用戶留言便簽無規則排列的浮動層用戶留言墻紙代碼



112 445 149



特效描述:用戶留言便簽 無規則排列 浮動層 用戶留言墻紙,

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layer.min.js"></script>
<script type="text/javascript" src="js/code.min.js"></script>

2. HTML代碼

<ul class="liuyan">
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">admin:</div>
        <div class="ly_content"><p>靈活運用layer的參數,可輕松地實現很多效果</p><p><a href="http://dijiuzhanzhang.com" target="_blank">返回layer官網</a></p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">賢心:</div>
        <div class="ly_content"><p>希望layer能夠幫助大家解決更多問題。</p><p>好吧,這個留言墻已經被廣告占領了。需要在此發廣告的聯系我</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">回頭是愛:</div>
            <div class="ly_content">
				<p>我愛好很廣,只是目前還單身,真誠求妹紙一枚? 聯系qq:1597053395</p>
			</div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">宇天:</div>
            <div class="ly_content"><p>hello,歡迎大家來我的blog:http://yutent.com。另外出售vps</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">老婆:</div>
            <div class="ly_content"><p style="font-size:50px;">我</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">初戀:</div>
        <div class="ly_content"><p style="font-size:50px;">愛</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">情人:</div>
            <div class="ly_content"><p style="font-size:50px;">你</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">妻子:</div>
            <div class="ly_content"><p>愛情的美滿是所有幸福的基礎。</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">關于layer:</div>
            <div class="ly_content"><p>layer作為一種web彈層解決方案,最早發布于2012年6月6號,短短一年間,已經贏得了上萬名web開發者所青睞。</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">前端開發:</div>
            <div class="ly_content"><p>前端開發曾是計算機領域最具有爭議的工種之一,但經過一批人多年的努力,目前已經赫然成為一種重量級職業,它以html、css、javascript為基礎語言,致力于提供更人性化的交互體驗,是當今互聯網產品血拼的重要領域</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">NodeJs:</div>
            <div class="ly_content"><p>用來編寫高性能的服務端javascript工具集,它使得前端開發有了更開闊的領域!</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">賢心:</div>
            <div class="ly_content"><p>水火因獨有的特性而彼此吸引,然而卻難以共存,因為大自然早已對他們賦予了永恒的公式:水火不容。于是他們選擇了另一種平衡:遺忘。</p></div>
    </li>
	<li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">賢心:</div>
            <div class="ly_content"><p>傍晚漫步西湖,突然迎來一場雨,只見眾人倉促,而我淡坐在石椅,心中默念:太不懂得感受天公之美了,少年們!</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">鳳凰網:</div>
            <div class="ly_content"><p>曾經倍受關注,大步前進,紅極一時…來,舞臺之上,一出紅色的獨唱;去,看臺之下,一個慘淡的收場。</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">only:</div>
            <div class="ly_content"><p>每一個技術人員都會有一個單純的過去,那時的他們,會為偶像精堪的代碼而著迷,心中默默地樹立起一個又一個標桿。直到他們從業多年,才發現神壇這個東西是始終在變換的。你還擁有他們,說明你正當年輕。</p></div>
    </li>
    <li class="ly_list">
        <div class="ly_titleBg"></div><div class="ly_titleTxt">Chengguan:</div>
            <div class="ly_content"><p>Chengguan is the best fighter and I don't think you can beat them</p></div>
    </li>
</ul>
<!-----------------  此處代碼可以無視  ----------------->
<div class="layer_code">
<pre id="liu">
/************************
 * 基于layer組件的留言墻
 * 2012.10.13
 * By 賢心
 ***********************/
!function(L){
var LYQ = {line: 4, width: 180};
LYQ._class = ['yellow' , 'green' , 'blue', 'color4'];
LYQ.view = function(index, value, othis){
	var nos = Math.floor(Math.random()*4), left ,fade;
	L(othis).addClass(this._class[nos]);
	L.layer({
		type : 1,
		page : {dom : othis},
		fix : false,
		area : ['180px', 'auto'],
		offset : ['100px','260px'],
		zIndex: layer.zIndex,
		move : ['.ly_titleTxt' , true],
		shade : [0],
		bgcolor: '',
		title : false,
		closeBtn : false,
		border : [0],
		success : function(layerE){
			var _e = Math.ceil((index+1)/LYQ.line) - 1 , time ,  lLen = L('.xubox_layer').length;
			if(index > (LYQ.line-1)){
				var left = 50+LYQ.width*(index-LYQ.line*_e) , extop, nlayer = L('.xubox_layer').eq(index-LYQ.line);
				!-[1,] ? extop = nlayer.offset().top + 30 : extop = 20*_e + 100*_e;
				var top = nlayer.outerHeight() + extop;
			}else{
				var left = 50+LYQ.width*index;	
			}
			!-[1,] ? time = 0 : 500;
			var mate = {left : left , top : top , marginLeft : 0};
			if(!-[1,]){
				layerE.hide().animate(mate , time);
				index === lLen - 1 && layerE.show();
			}else{
				layerE.animate(mate , time);	
			}
			layer.setTop(layerE);
		}
	});
};
LYQ.run = function(){
	var li = L('.liuyan>li');
	L.each(li, function(index,value){
		LYQ.view(index, value, this);
	});
};
if(-[1,]){
	LYQ.run();
}else{
	layer.ready(function(){
		layer.msg('IE瀏覽器查看效果將會不佳    您可以選擇chrome或者firefox等瀏覽器訪問該頁面', 2, 13, function(){
        	layer.msg('您可以選擇chrome或者firefox等瀏覽器訪問該頁面', 2, 8, function(){
            LYQ.run();
            });
		});
	});
}
L('.layer_code').code();
}($);
</pre>
</div>
<script type="text/javascript">
new Function($('#liu').text())();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 圖片拖動 圖片拖拽 圖片廣告
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子