《双陈记》情侣博客

位置:主页 > 折腾WP > 《双陈记》情侣博客底部面板

《双陈记》情侣博客底部面板

《双陈记》情侣博客的底部面板也上线几天了,今天把所用代码全部分享出来。这个底部工具栏是根据国外某高人的仿facebook面板为基础,《双陈记》情侣博客修改美化而成。

功能如下:网站导航,动态显示公告(可以自己修改调用微博),欢迎滑出界面,搜索框,听歌,显示最新留言,调用微博,弹出菜单内可以任意放置想要折腾的东西。

废话不给力,直接来代码:

首先HTML代码:

<div id=“footpanel”>
<ul id=“mainpanel”>
<li><a href=“http://love730.com”><small>首页</small></a></li><li><a href=‘#’ class=‘osx’>Demo</a></li>
<li><a href=“http://love730.com/photos”>Photo <small>相册</small></a></li>
<li><a href=“http://love730.com/archives”>Contacts <small>网站地图</small></a></li>
<li><a href=“http://love730.com/guestbook”>Messages (10) <small>留言板</small></a></li>
<li><a href=“http://love730.com/theme”>Theme <small>情侣主题</small></a></li>
<li><a href=“http://feed.love730.com/”>Feed <small>订阅双陈记</small></a></li>
<li>
<form name=“form” id=“searchform” action=“http://love730.com/search” method=“get”>
<input type=“text” value=“搜搜更给力…” name=“q” id=“search_input” onfocus=“this.value = this.value == this.defaultValue ? ” : this.value” onblur=“this.value = this.value == ” ? this.defaultValue : this.value” />
<input type=“submit” id=“searchsubmit” value=“” title=“搜索”/>
</form>
</li>
<li> <span> <a href=“#” onclick=“openwin()”><small>听听吧</small>Music</a></span></li>
<li> <ul id=“twitter”>
<li>《双陈记》情侣博客欢迎您的光临!</li>
<li>您可以尽情地鼓掌或拍砖,肆意挥洒您的口水。</li>
<li>《双陈记》情侣博客底部工具栏测试中…</li>
</ul></li>
<li title=“返回顶部”></li>
<li id=“chatpanel”> <a href=“#”><small>疼逊微博</small>疼逊微博(<strong></strong>) </a>
<div>
<h3><span> &ndash; </span>微博</h3>
<ul><li>
<div id=“sidebar-tab”>
<div id=“tab-title”><span id=“tab-1″>陈大浩</span><span id=“tab-2″>陈小燕</span> </div>
<div id=“tab-content”>
<ul><li>
<iframe frameborder=“0” scrolling=“no” src=“http://v.t.qq.com/show/show.php?n=chenhao1986514&amp;w=202&amp;h=402&amp;fl=2&amp;l=4&amp;o=21&amp;c=0&amp;si=88e4b049096e8fb3119628e9448afba856ba4887″ width=“202” height=“402”></iframe>
</li></ul>
<ul><li>
<iframe frameborder=“0” scrolling=“no” src=“http://v.t.qq.com/show/show.php?n=carol_209&amp;w=198&amp;h=398&amp;fl=2&amp;l=4&amp;o=17&amp;c=2&amp;si=edd0b2a7589feb3d3b3c296b4f7c685b29dbe44f” width=“198” height=“398”></iframe>
</li> </ul>
</div>
</div></li>
</ul>
</div>
</li>
<li id=“alertpanel”><a href=“#”><small>最新留言</small>Alerts留言</a>
<div>
<h3>留言<span><a href=“http://love730.com/guestbook”> 留言</a></span></h3>
<ul>
<li><a href=“#”>View All</a></li>
<li>
<ul> <?php
global $wpdb;
$sql = “SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved,comment_author_email, comment_type,comment_author_url, SUBSTRING(comment_content,1,25) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = ‘1’ AND comment_type = ” AND comment_author != ‘陈大浩’ AND post_password = ” ORDER BY comment_date_gmt DESC LIMIT 10″;
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
foreach ($comments as $comment) {
$output .= \n<li><img width=\”25\” height=\”25\” src=\”http://love730.com/avatar/”.md5(strtolower($comment->comment_author_email)). “.jpg \” alt=’avatar’/><a href=\” . get_permalink($comment->ID) . “#comment-“ . $comment->comment_ID . \” title=\” . $comment->post_title . ” 上的评论\”>”. strip_tags($comment->comment_author) .“: “. strip_tags($comment->com_excerpt) .“</a></li>”;
}
$output .= $post_HTML;
$output = convert_smilies($output);
echo $output;
?></ul>
</li>
</ul>
</div>
</li>
</ul>
</div>

《双陈记》情侣博客是把以上代码放在footer.php里的。

然后轮到CSS代码了:

#footpanel {
position: fixed;
bottom: 0;
left: 0;
z-index: 9999; /*–Keeps the panel on top of all other elements–*/
background:url(images/footpanel.png) repeat-x;
border: 1px solid #ccc;
border-bottom: none;
width: 94%;
margin: 0 3%;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
box-shadow: 5px 5px 10px #000;
}
*html #footpanel { /*–IE6 Hack – Fixed Positioning to the Bottom–*/
margin-top: -1px; /*–prevents IE6 from having an infinity scroll bar – due to 1px border on #footpanel–*/
position: absolute;
top:expression(eval(document.compatMode &&document.compatMode==‘CSS1Compat’) ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
} 

#scroll-container{color:#000; line-height:20px; height: 20px;width:400px;overflow: hidden; float:left; background:url(images/notice_icon.gif) no-repeat left ;padding:2px 0 0 15px;}
#scroll-container li { float:none; display:block}
#footpanel ul {
padding: 0;
margin: 0;
float: left;
width: 100%;
list-style: none;
border-top: 1px solid #fff; /*–Gives the bevel feel on the panel–*/
font-size: 1.1em;
}
#footpanel ul li {
padding: 0;
margin: 0;
float: left;
position: relative;
}
#footpanel ul li a {
padding: 5px;
float: left;
text-indent: -9999px;
height: 16px;
width: 16px;
text-decoration: none;
color: #333;
position: relative;
}
html #footpanel ul li a:hover {

}
html #footpanel ul li a.active { /*–Active state when subpanel is open–*/
background-color: #fff;
height: 17px;
margin-top: -2px; /*–Push it up 2px to attach the active button to subpanel–*/
border: 1px solid #555;
border-top: none;
z-index: 200; /*–Keeps the active area on top of the subpanel–*/
position: relative;
}
#footpanel a.home {
background: url(images/home1.png) no-repeat center;
width: 30px;
padding-left:20px;
border-right: 1px solid #bbb;
text-indent: 0; /*–Reset text indent–*/
}
a.profile {
background: url(images/user.png) no-repeat center ;
}
a.maps {
background: url(images/maps.png) no-repeat center ;
}
a.theme {
background: url(images/theme.png) no-repeat center ;
}
a.feed {
background: url(images/feed.png) no-repeat center ;border-right: 1px solid #bbb;margin-right:20px;
}
a.messages {
background: url(images/mail1.png) no-repeat center ;
}
a.photos {
background: url(images/photos.png) no-repeat center ;
}
a.osx {background: url(images/heart_about.png) no-repeat center ;}
#footpanel a.chat {
background: url(images/qqweibo.png) no-repeat 16px center;
width: 126px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
padding-left: 40px;
text-indent: 0; /*–Reset text indent–*/
}
a.alerts {
background: url(images/user-share.png) no-repeat center center;
}
#footpanel li#chatpanel, #footpanel li#alertpanel {
float: right;
} /*–Right align the chat and alert panels–*/
#footpanel a small { /*–panel tool tip styles–*/
text-align: center;
width: 70px;
background: url(images/pop_arrow.png) no-repeat center bottom;
padding: 5px 5px 11px;
display: none; /*–Hide by default–*/
color: #000;
font-size: 12px;
text-indent: 0;
}
#footpanel a:hover small {
display: block; /*–Show on hover–*/
position: absolute;
top: -35px; /*–Position tooltip 35px above the list item–*/
left: 50%;
margin-left: -40px; /*–Center the tooltip–*/
z-index: 9999;
}
#footpanel ul li div a { /*–Reset link style for subpanel links–*/
text-indent: 0;
width: auto;
height: auto;
padding: 0;
float: none;
color: #00629a;
position: static;
}
#footpanel ul li div a:hover {
text-decoration: underline;
} /*–Reset link style for subpanel links–*/
#footpanel .subpanel {
position: absolute;
left: 0;
bottom: 27px;
display: none;    /*–Hide by default–*/
width: 198px;
border: 1px solid #555;
background: #fff;
overflow: hidden;
padding-bottom: 2px;
height:400px;
}
#footpanel h3 {
background: #526ea6;
padding: 5px 10px;
color: #fff;
font-size: 1.1em;
cursor: pointer;
}
#footpanel h3 span {
font-size: 1.5em;
float: right;
line-height: 0.6em;
font-weight: normal;
}
#footpanel .subpanel ul {
padding: 0;
margin: 0;
background: #fff;
width: 100%;
overflow: auto;
}
#footpanel .subpanel li {
float: none; /*–Reset float–*/
display: block;
padding: 0;
margin: 0;
overflow: hidden;
clear: both;
background: #fff;
position: static/*–Reset relative positioning–*/
font-size: 0.9em;
}
#chatpanel .subpanel li {
background: url(images/dash.gif) repeat-x left center;
}
#chatpanel .subpanel li span {
padding: 5px;
background: #fff;
color: #777;
float: left;
}
#chatpanel .subpanel li a img {
float: left;
margin: 0 5px;
}
#chatpanel .subpanel li a {
padding: 3px 0;
margin: 0;
line-height: 22px;
height: 22px;
background: #fff;
display: block;
}
#chatpanel .subpanel li a:hover {
background: #3b5998;
color: #fff;
text-decoration: none;
}
#alertpanel .subpanel {
right: 0;
left: auto; /*–Reset left positioning and make it right positioned–*/
}
#alertpanel .subpanel li {
border-top: 1px solid #f0f0f0;
display: block;
}
#alertpanel .subpanel li p {
padding: 5px 10px;
}
#alertpanel .subpanel li a.delete {
background: url(images/delete_x.gif) no-repeat;
float: right;
width: 13px;
height: 14px;
margin: 5px;
text-indent: -9999px;
visibility: hidden; /*–Hides by default but still takes up space (not completely gone like display:none;)–*/
}
#alertpanel .subpanel li a.delete:hover {
background-position: left bottom;
}
#footpanel #alertpanel li.view {
text-align: right;
padding: 5px 10px 5px 0;
}
#sidebar-tab {
border:1px solid #ccf;
margin-bottom:1.5em;
overflow:hidden;
}
#tab-title .current {
color:#356aa0;
border-bottom:0px;
padding:5px 14px;
} /* 当前选中标题时的样式 */
#tab-title h3 {
color:#666;
font-size:15px;
font-weight:400;
}
#tab-1, #tab-2, #tab-3 {
padding:5px 7px;
border-bottom:1px solid #ccf;
cursor:pointer;
}
#tab-2 {
border:1px solid #ccf;
border-top:none;
}
.tab-2, .tab-3 {
display:none;
} /* 这句是用让class=”tab-2″”tab-3″的先隐藏,用CSS控制的好处是没有延迟;如果用jQuery控制会出现只有当页面全部加载完后,tab-2tab-3中的内容才隐藏 */
#tab-content ul {
padding:5px 10px;
overflow:hidden;
}
#tab-content ul li {
padding-top:5px;

}

#osx-modal-content, #osx-modal-data {display:none;}

/* Overlay */
#osx-overlay {background-color:#000; cursor:wait;}

/* Container */
#osx-container {background-color:none; color:#fff; font: 16px/24px “Lucida Grande”,Arial,sans-serif; padding-bottom:4px; width:600px; -moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-right-radius:6px; border-radius:0 0 6px 6px; -moz-box-shadow:0 0 64px #000; -webkit-box-shadow:0 0 64px #000; box-shadow:0 0 64px #000;}
#osx-container a {color:#ddd;}
#osx-container #osx-modal-title {color:#ff399a; background-color:none; border-bottom:1px solid #ccc; font-weight:bold; padding:6px 8px; text-shadow:0 1px 0 #f4f4f4;}
#osx-container .close {display:none; position:absolute; right:0; top:0;}
#osx-container .close a {display:block; color:#777; font-weight:bold; padding:6px 12px 0; text-decoration:none; text-shadow:0 1px 0 #f4f4f4;}
#osx-container .close a:hover {color:#000;}
#osx-container #osx-modal-data {font-size:12px; padding:6px 12px;}
#osx-container h2 {margin:10px 0 6px;}
#osx-container p {margin-bottom:10px;}
#osx-container span {color:#777;}

#search_input {width:110px;height:20px;border:1px dashed #ff399a; background:none;margin-top:2px; }
#searchsubmit {border:none; background:url(images/search.png) no-repeat;width:30px; height:20px; cursor:pointer; }
.mp3 {padding-top:5px;padding-left:20px; background:url(images/music.png) no-repeat left;float:right;}

#tab-content ul li a { font:12px;}
#tab-content h2 { font:14px;}

ul#twitter {background:url(images/notice_icon.gif) no-repeat left;color:#000; line-height:26px;}
ul#twitter li {padding-left:20px;}

#footpanel ul li.gotop {
margin-top:4px;
height:20px;
width:16px;
line-height:20px;
display:block;
background:url(images/gotop.png) no-repeat center;
cursor:pointer;
border-left:1px solid #ddd;
float:right;*float:none;
}

貌似css代码有点多,可能有的代码可以精简,有代码洁癖的童鞋,可以折腾折腾。

最后剩下jQuery代码:

/*底部公告*/

$(“#twitter li:not(:first)”).css(“display”,“none”);
var B=$(“#twitter li:last”);
var C=$(“#twitter li:first”);
setInterval(function(){
if(B.is(“:visible”)){
C.fadeIn(1000).addClass(“in”);B.hide()
}else{
$(“#twitter li:visible”).addClass(“in”);
$(“#twitter li.in”).next().fadeIn(1000);
$(“li.in”).hide().removeClass(“in”)}
},5000);

/* 弹出页面*/
var OSX = {
container: null,
init: function () {
$(“input.osx, a.osx”).click(function (e) {
e.preventDefault();

$(“#osx-modal-content”).modal({
overlayId: ‘osx-overlay’,
containerId: ‘osx-container’,
closeHTML: null,
minHeight: 80,
opacity: 65,
position: [‘0’,],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
self.container = d.container[0];
d.overlay.fadeIn(‘slow’, function () {
$(“#osx-modal-content”, self.container).show();
var title = $(“#osx-modal-title”, self.container);
title.show();
d.container.slideDown(‘slow’, function () {
setTimeout(function () {
var h = $(“#osx-modal-data”, self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
200,
function () {
$(“div.close”, self.container).show();
$(“#osx-modal-data”, self.container).show();
}
);
}, 300);
});
})
},
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:“-“ + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
);
}
};

OSX.init();

/*底部面板*/
$.fn.adjustPanel = function(){
$(this).find(“ul, .subpanel”).css({ ‘height’ : ‘auto’}); //Reset subpanel and ul height
var windowHeight = $(window).height(); //Get the height of the browser viewport
var panelsub = $(this).find(“.subpanel”).height(); //Get the height of subpanel
var panelAdjust = windowHeight - 100; //Viewport height – 100px (Sets max height of subpanel)
var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel)
if ( panelsub >= panelAdjust ) { //If subpanel is taller than max height…
$(this).find(“.subpanel”).css({ ‘height’ : panelAdjust }); //Adjust subpanel to max height
$(this).find(“ul”).css({ ‘height’ : ulAdjust}); //Adjust subpanel ul to new size
}
else if ( panelsub < panelAdjust ) { //If subpanel is smaller than max height…
$(this).find(“ul”).css({ ‘height’ : ‘auto’}); //Set subpanel ul to auto (default size)
}
};
$(“#chatpanel”).adjustPanel(); //Run the adjustPanel function on #chatpanel
$(“#alertpanel”).adjustPanel(); //Run the adjustPanel function on #alertpanel
$(window).resize(function () {
$(“#chatpanel”).adjustPanel();
$(“#alertpanel”).adjustPanel();
});
$(“#chatpanel a:first, #alertpanel a:first”).click(function() { //If clicked on the first link of #chatpanel and #alertpanel…
if($(this).next(“.subpanel”).is(‘:visible’)){ //If subpanel is already active…
$(this).next(“.subpanel”).hide(); //Hide active subpanel
$(“#footpanel li a”).removeClass(‘active’); //Remove active class on the subpanel trigger
}
else { //if subpanel is not active…
$(“.subpanel”).hide(); //Hide all subpanels
$(this).next(“.subpanel”).toggle(); //Toggle the subpanel to make active
$(“#footpanel li a”).removeClass(‘active’); //Remove active class on all subpanel trigger
$(this).toggleClass(‘active’); //Toggle the active class on the subpanel trigger
}
return false; //Prevent browser jump to link anchor
});
$(document).click(function() { //Click anywhere and…
$(“.subpanel”).hide(); //hide subpanel
$(“#footpanel li a”).removeClass(‘active’); //remove active class on subpanel trigger
});
$(‘.subpanel ul’).click(function(e) {
e.stopPropagation(); //Prevents the subpanel ul from closing on click
});
$(“#alertpanel li”).hover(function() {
$(this).find(“a.delete”).css({‘visibility’: ‘visible’}); //Show delete icon on hover
},function() {
$(this).find(“a.delete”).css({‘visibility’: ‘hidden’}); //Hide delete icon on hover out
});

/* 划出页面所需js*/

(function(d){var k=d.browser.msie&&parseInt(d.browser.version)===6&&typeof window.XMLHttpRequest!==“object”,m=d.browser.msie&&parseInt(d.browser.version)===7,l=null,f=[];d.modal=function(a,b){return d.modal.impl.init(a,b)};d.modal.close=function(){d.modal.impl.close()};d.modal.focus=function(a){d.modal.impl.focus(a)};d.modal.setContainerDimensions=function(){d.modal.impl.setContainerDimensions()};d.modal.setPosition=function(){d.modal.impl.setPosition()};d.modal.update=function(a,b){d.modal.impl.update(a,
b)};d.fn.modal=function(a){return d.modal.impl.init(this,a)};d.modal.defaults={appendTo:“body”,focus:true,opacity:50,overlayId:“simplemodal-overlay”,overlayCss:{},containerId:“simplemodal-container”,containerCss:{},dataId:“simplemodal-data”,dataCss:{},minHeight:null,minWidth:null,maxHeight:null,maxWidth:null,autoResize:false,autoPosition:true,zIndex:1E3,close:true,closeHTML:‘<a title=”Close”></a>’,closeClass:“simplemodal-close”,escClose:true,overlayClose:false,position:null,
persist:false,modal:true,onOpen:null,onShow:null,onClose:null};d.modal.impl={d:{},init:function(a,b){var c=this;if(c.d.data)return false;l=d.browser.msie&&!d.boxModel;c.o=d.extend({},d.modal.defaults,b);c.zIndex=c.o.zIndex;c.occb=false;if(typeof a===“object”){a=a instanceof jQuery?a:d(a);c.d.placeholder=false;if(a.parent().parent().size()>0){a.before(d(“<span></span>”).attr(“id”,“simplemodal-placeholder”).css({display:“none”}));c.d.placeholder=true;c.display=a.css(“display”);if(!c.o.persist)c.d.orig=
a.clone(true)}}else if(typeof a===“string”||typeof a===“number”)a=d(“<div></div>”).html(a);else{alert(“SimpleModal Error: Unsupported data type: “+typeof a);return c}c.create(a);c.open();d.isFunction(c.o.onShow)&&c.o.onShow.apply(c,[c.d]);return c},create:function(a){var b=this;f=b.getDimensions();if(b.o.modal&&k)b.d.iframe=d(‘<iframe src=”javascript:false;”></iframe>’).css(d.extend(b.o.iframeCss,{display:“none”,opacity:0,position:“fixed”,height:f[0],width:f[1],zIndex:b.o.zIndex,top:0,left:0})).appendTo(b.o.appendTo);
b.d.overlay=d(“<div></div>”).attr(“id”,b.o.overlayId).addClass(“simplemodal-overlay”).css(d.extend(b.o.overlayCss,{display:“none”,opacity:b.o.opacity/100,height:b.o.modal?f[0]:0,width:b.o.modal?f[1]:0,position:“fixed”,left:0,top:0,zIndex:b.o.zIndex+1})).appendTo(b.o.appendTo);b.d.container=d(“<div></div>”).attr(“id”,b.o.containerId).addClass(“simplemodal-container”).css(d.extend(b.o.containerCss,{display:“none”,position:“fixed”,zIndex:b.o.zIndex+2})).append(b.o.close&&b.o.closeHTML?d(b.o.closeHTML).addClass(b.o.closeClass):
“”).appendTo(b.o.appendTo);b.d.wrap=d(“<div></div>”).attr(“tabIndex”,-1).addClass(“simplemodal-wrap”).css({height:“100%”,outline:0,width:“100%”}).appendTo(b.d.container);b.d.data=a.attr(“id”,a.attr(“id”)||b.o.dataId).addClass(“simplemodal-data”).css(d.extend(b.o.dataCss,{display:“none”})).appendTo(“body”);b.setContainerDimensions();b.d.data.appendTo(b.d.wrap);if(k||l)b.fixIE()},bindEvents:function(){var a=this;d(“.”+a.o.closeClass).bind(“click.simplemodal”,function(b){b.preventDefault();a.close()});
a.o.modal&&a.o.close&&a.o.overlayClose&&a.d.overlay.bind(“click.simplemodal”,function(b){b.preventDefault();a.close()});d(document).bind(“keydown.simplemodal”,function(b){if(a.o.modal&&b.keyCode===9)a.watchTab(b);else if(a.o.close&&a.o.escClose&&b.keyCode===27){b.preventDefault();a.close()}});d(window).bind(“resize.simplemodal”,function(){f=a.getDimensions();a.o.autoResize?a.setContainerDimensions():a.o.autoPosition&&a.setPosition();if(k||l)a.fixIE();else if(a.o.modal){a.d.iframe&&a.d.iframe.css({height:f[0],
width:f[1]});a.d.overlay.css({height:f[0],width:f[1]})}})},unbindEvents:function(){d(“.”+this.o.closeClass).unbind(“click.simplemodal”);d(document).unbind(“keydown.simplemodal”);d(window).unbind(“resize.simplemodal”);this.d.overlay.unbind(“click.simplemodal”)},fixIE:function(){var a=this,b=a.o.position;d.each([a.d.iframe||null,!a.o.modal?null:a.d.overlay,a.d.container],function(c,h){if(h){var g=h[0].style;g.position=“absolute”;if(c<2){g.removeExpression(“height”);g.removeExpression(“width”);g.setExpression(“height”,
‘document.body.scrollHeight > document.body.clientHeight ? document.body.scrollHeight : document.body.clientHeight + “px”‘);g.setExpression(“width”,‘document.body.scrollWidth > document.body.clientWidth ? document.body.scrollWidth : document.body.clientWidth + “px”‘)}else{var e;if(b&&b.constructor===Array){c=b[0]?typeof b[0]===“number”?b[0].toString():b[0].replace(/px/,“”):h.css(“top”).replace(/px/,“”);c=c.indexOf(“%”)===-1?c+‘ + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + “px”‘:
parseInt(c.replace(/%/,“”))+‘ * ((document.documentElement.clientHeight || document.body.clientHeight) / 100) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + “px”‘;if(b[1]){e=typeof b[1]===“number”?b[1].toString():b[1].replace(/px/,“”);e=e.indexOf(“%”)===-1?e+‘ + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + “px”‘:parseInt(e.replace(/%/,“”))+‘ * ((document.documentElement.clientWidth || document.body.clientWidth) / 100) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + “px”‘}}else{c=
‘(document.documentElement.clientHeight || document.body.clientHeight) / 2 – (this.offsetHeight / 2) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + “px”‘;e=‘(document.documentElement.clientWidth || document.body.clientWidth) / 2 – (this.offsetWidth / 2) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + “px”‘}g.removeExpression(“top”);g.removeExpression(“left”);g.setExpression(“top”,
c);g.setExpression(“left”,e)}}})},focus:function(a){var b=this;a=a&&d.inArray(a,[“first”,“last”])!==-1?a:“first”;var c=d(“:input:enabled:visible:”+a,b.d.wrap);setTimeout(function(){c.length>0?c.focus():b.d.wrap.focus()},10)},getDimensions:function(){var a=d(window);return[d.browser.opera&&d.browser.version>“9.5”&&d.fn.jquery<“1.3”||d.browser.opera&&d.browser.version<“9.5”&&d.fn.jquery>“1.2.6”?a[0].innerHeight:a.height(),a.width()]},getVal:function(a,b){return a?typeof a===“number”?a:a===“auto”?0:
a.indexOf(“%”)>0?parseInt(a.replace(/%/,“”))/100*(b===“h”?f[0]:f[1]):parseInt(a.replace(/px/,“”)):null},update:function(a,b){var c=this;if(!c.d.data)return false;c.d.origHeight=c.getVal(a,“h”);c.d.origWidth=c.getVal(b,“w”);c.d.data.hide();a&&c.d.container.css(“height”,a);b&&c.d.container.css(“width”,b);c.setContainerDimensions();c.d.data.show();c.o.focus&&c.focus();c.unbindEvents();c.bindEvents()},setContainerDimensions:function(){var a=this,b=k||m,c=a.d.origHeight?a.d.origHeight:d.browser.opera?
a.d.container.height():a.getVal(b?a.d.container[0].currentStyle.height:a.d.container.css(“height”),“h”);b=a.d.origWidth?a.d.origWidth:d.browser.opera?a.d.container.width():a.getVal(b?a.d.container[0].currentStyle.width:a.d.container.css(“width”),“w”);var h=a.d.data.outerHeight(true),g=a.d.data.outerWidth(true);a.d.origHeight=a.d.origHeight||c;a.d.origWidth=a.d.origWidth||b;var e=a.o.maxHeight?a.getVal(a.o.maxHeight,“h”):null,i=a.o.maxWidth?a.getVal(a.o.maxWidth,“w”):null;e=e&&e<f[0]?e:f[0];i=i&&i<
f[1]?i:f[1];var j=a.o.minHeight?a.getVal(a.o.minHeight,“h”):“auto”;c=c?a.o.autoResize&&c>e?e:c<j?j:c:h?h>e?e:a.o.minHeight&&j!==“auto”&&h<j?j:h:j;e=a.o.minWidth?a.getVal(a.o.minWidth,“w”):“auto”;b=b?a.o.autoResize&&b>i?i:b<e?e:b:g?g>i?i:a.o.minWidth&&e!==“auto”&&g<e?e:g:e;a.d.container.css({height:c,width:b});a.d.wrap.css({overflow:h>c||g>b?“auto”:“visible”});a.o.autoPosition&&a.setPosition()},setPosition:function(){var a=this,b,c;b=f[0]/2-a.d.container.outerHeight(true)/2;c=f[1]/2-a.d.container.outerWidth(true)/
2;if(a.o.position&&Object.prototype.toString.call(a.o.position)===“[object Array]”){b=a.o.position[0]||b;c=a.o.position[1]||c}else{b=b;c=c}a.d.container.css({left:c,top:b})},watchTab:function(a){var b=this;if(d(a.target).parents(“.simplemodal-container”).length>0){b.inputs=d(“:input:enabled:visible:first, :input:enabled:visible:last”,b.d.data[0]);if(!a.shiftKey&&a.target===b.inputs[b.inputs.length-1]||a.shiftKey&&a.target===b.inputs[0]||b.inputs.length===0){a.preventDefault();b.focus(a.shiftKey?“last”:
“first”)}}else{a.preventDefault();b.focus()}},open:function(){var a=this;a.d.iframe&&a.d.iframe.show();if(d.isFunction(a.o.onOpen))a.o.onOpen.apply(a,[a.d]);else{a.d.overlay.show();a.d.container.show();a.d.data.show()}a.o.focus&&a.focus();a.bindEvents()},close:function(){var a=this;if(!a.d.data)return false;a.unbindEvents();if(d.isFunction(a.o.onClose)&&!a.occb){a.occb=true;a.o.onClose.apply(a,[a.d])}else{if(a.d.placeholder){var b=d(“#simplemodal-placeholder”);if(a.o.persist)b.replaceWith(a.d.data.removeClass(“simplemodal-data”).css(“display”,
a.display));else{a.d.data.hide().remove();b.replaceWith(a.d.orig)}}else a.d.data.hide().remove();a.d.container.hide().remove();a.d.overlay.hide();a.d.iframe&&a.d.iframe.hide().remove();setTimeout(function(){a.d.overlay.remove();a.d={}},10)}}}})(jQuery);
/* 弹出音乐窗口*/
function openwin() { window.open (“http://love730.com/wp-content/themes/newlove/music.html”, “newwindow”, “height=360, width=250, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no”)
}

代码就到这里完了。

剩下来就是那几个背景图片素材:

图片打包后的下载地址:http://u.115.com/file/f74b556d72

PS:其实这篇文章的草稿已经写了好久了,一直觉得这代码感觉太多鸟,都不想贴出来的,可能也没几个童鞋需要,路过的都支持一个吧,要折腾的就折腾吧!



无觅相关文章插件

已经有25位童鞋留言了,还不来盖楼!

  1. 我起要用“哈“`可是有点看不明“`

  2. 底部的那个横条啊,也不知道我的主题支持不?

  3. 很漂亮的背景,拿去试试。

  4. 里面竟然用到了iframe,这个少用啊。

  5. 这情侣主题让人感觉很幸福……呵呵

  6. 这个主题好看,情侣博客也很给力

  7. 博主的模板做得很好看 :roll:

  8. 太嫩了,看不懂、 :!: :!: :!:

  9. 陈日伦

    :!: 下载链接过期,能否续一下期,看到这个工具栏真不错,想试试

  10. Joy

    :!: 下载过期了,可以续吗?谢谢拉哇。。。

  11. long

    哥哥 俺也是IT的 别的不知道 就是审美观太差了 你的太亮了 俺也想做个 能借用你的素材用下么。。。

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片