遗失的天空

随笔- 16 文章- 0 评论- 39

2012年5月30日

底部固定栏目有时还是蛮需要的，有些浏览器兼容性不是很好

又来整个，表示可以实现。

jquery博客实现底部固定类似人人校内似的，只是个模糊状态

具体还是要慢慢写的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<TITLE>jquery博客实现底部固定类似人人校内似的</TITLE>

<meta name="keywords" content="底部固定,人人校内" >

<meta name="description" content="jQuery吧,Write Less, Do More,注重前端开发,web前端开发">

<META http-equiv=Content-Type content="text/html; charset=GBK">

<STYLE type=text/css>

*{margin:0;padding:0}

.fixed {RIGHT: 15px; BACKGROUND: #ccc; LEFT: 15px; BOTTOM: 0; LINE-HEIGHT: 30px; POSITION: fixed; HEIGHT: 30px

}

#iefixed {

	MARGIN: -1px 15px 0px; OVERFLOW: hidden; ZOOM: 1; HEIGHT: 1px

}

</STYLE>

<!--[if lt IE 7]>

<script type="text/javascript">

            function _fixBackground(){

				var body = document.body;

				var BLANK_GIF;

                if (body.currentStyle.backgroundAttachment != "fixed") {

                    if (body.currentStyle.backgroundImage == "none") {

                        body.runtimeStyle.backgroundImage = "url("+BLANK_GIF+")"; // dummy

						body.runtimeStyle.backgroundAttachment = "fixed";

                    }

                }

            }

			window.onload = function(){

				_fixBackground();

				}

        </script>

        <style type="text/css">

        	.fixed{

            position: absolute;

    bottom: auto;

    clear: both;

    width:expression(document.getElementById('iefixed').clientWidth);

	left:expression(document.getElementById('iefixed').offsetLeft);

    top:expression(eval(document.compatMode &&

        document.compatMode=='CSS1Compat') ?

        documentElement.scrollTop

        +(documentElement.clientHeight-this.clientHeight) 

        : document.body.scrollTop

        +(document.body.clientHeight-this.clientHeight));

}

        </style>

	<![endif]-->

</HEAD>

<BODY>

<div style="margin:0 auto;text-align:center"><script type="text/javascript">/*DEMO728*90，创建于2012-5-15*/ var cpro_id = 'u897038';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></div>

<div style="margin:0 auto;text-align:center"><script type="text/javascript">/*468*60，创建于2012-5-7*/ var cpro_id = 'u883919';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></div>

<h1><a href="http://www.jqueryba.com/" target="_blank" title="jquery,jquery博客,jquery效果,前端开发,web前端,web前端开发,设计,前端资源,html+CSS,JavaScript,html5,css3,浏览器兼容">jQuery吧</a></h1>

<h2><a href="http://www.jqueryba.com/396.html" target="_blank">jquery博客实现底部固定类似人人校内似的</a></h2>





<!--[if lt IE 7]><div id="iefixed"></div><![endif]-->

<div style="width:960px;height:2000px;margin:0 auto"></div>

<DIV class=fixed>这里是position:fixed部分.我又不动啦</DIV>



<div style="width:100%;height:600px;margin:0 auto"></div>

<script type="text/javascript">/*DEOM120*270，创建于2012-5-12*/ var cpro_id = 'u893319';</script><script src="http://cpro.baidu.com/cpro/ui/f.js" type="text/javascript"></script>	<script type="text/javascript">/*DEMO728*15，创建于2012-5-15*/ var cpro_id = 'u897027';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>

</BODY>

</HTML>

　　在线效果jquery

posted @ 2012-05-30 23:00 遗失的天空阅读(82) 评论(0) 编辑

2012年3月19日

仿麦包包首页table轮换图jQuery

仿麦包包首页table轮换图jQuery
前几天,天外飞仙闲着无意打开麦包包，看到简洁的焦点图，觉得有意思，试试自己练手下。
刚开始，做的有些问题，里面有个样式，我是直接.bks的，不管如何都无法渲染该样式
在蓝色理想上发了帖子，很快有朋友帮忙改了
在该class前加个标签li.bks就可以实现
经过百度谷歌的帮助下，对css优先级有认识

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>仿麦包包首页图片切换效果jquery版本</title>

<meta name="keywords" content="jQuery切换,table切换,简洁轮换效果,自动切换" >

<meta name="description" content="jQuery吧,Write Less, Do More,重注前端开发,web前端开发">

<style type="text/css">

body,div,ul,li,a,img,h1{margin:0;padding:0}

img{border:none}

ul,li{list-style-type:none}

body{margin:20px auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#373737;background:#fff}

.boxx{width:698px;height:338px;margin:0 auto;position:relative;border:1px #ccc solid}

	.boxx_con{width:100%;position:absolute;z-index:10}

	.boxx_title{width:250px;height:50px;position:absolute;top:313px;left:545px;z-index:100;}			

			.boxx_title li{width:15px;height:15px;float:left;margin-left:10px;display:inline;cursor:pointer;line-height:15px;text-align:center;background:#f7f6f2;color:#373737}

			li.bks{color:#fff;background:#ce2329;}<!--css优先级,慎用直接.bks-->

</style>

</head>



<body>

<h1><a href="http://jqueryba.com/" target="_blank" title="jQuery吧,前端开发,web前端,web前端开发,前端开发工程师,前端开发攻城师,设计,前端资源,html+CSS,JavaScript,Ajax,jQuery学习,html5,css3,浏览器兼容,网页布局制作">jQuery吧</a></h1>

<h2><a href="http://jqueryba.com/jquery/mbaobao/mbaobao.html" target="_blank">仿麦包包首页图片切换效果jquery版本</a></h2>

<div class="boxx">

	<ul class="boxx_con" id="boxx_con">

		<li><a href=""><img src="images/1.jpg"/></a></li>

		<li style="display:none"><a href=""><img src="images/2.jpg"/></a></li>

		<li style="display:none"><a href=""><img src="images/3.jpg"/></a></li>

		<li style="display:none"><a href=""><img src="images/4.jpg"/></a></li>

		<li style="display:none"><a href=""><img src="images/5.jpg"/></a></li>

	</ul>

	<ul class="boxx_title" id="boxx_title">

		<li class="bks">1</li>

		<li>2</li>

		<li>3</li>

		<li>4</li>

		<li>5</li>

	</ul>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

	var p=0;

	var timeInterval=3000;

	var $bli=$("#boxx_con li");

	var $pli=$("#boxx_title li");

	

	$bli.hide();

	$($bli[0]).show();

	function play(){

		p<$bli.length-1?p++:p=0;

		$bli.eq(p).show().siblings().hide(); 

		$pli.eq(p).addClass("bks").siblings().removeClass("bks");   

	}

	set = window.setInterval(play,timeInterval);

	$pli.mouseover(function(){

			window.clearInterval(set);

			p=$(this).index();

			$bli.eq(p).show().siblings().hide(); 

			$pli.eq(p).addClass("bks").siblings().removeClass("bks"); 

			set = window.setInterval(play,timeInterval);  

		});   

})

</script>

</body>

</html>

再次感谢帮助我的朋友 泥巴巴
在线效果DEMO

posted @ 2012-03-19 20:25 遗失的天空阅读(351) 评论(1) 编辑

2012年2月17日

好久没用css hack了，回顾下

好久没用css hack了，刚来的新环境，有些不是自己写的，上面催命似的，没办法 css hack吧

平时css hack用的少

为了速度点，看人家代码实在纠结

拿个css hack用用吧

IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。书写顺序，一般是将识别能力强的浏览器的CSS写在后面

浏览器优先级别:FF < IE7 < IE6 , CSS hack书写顺序一般为FF IE7 IE6

margin-top:10px;*margin-top:20px;_margin-top:30px;

解释为

firefox中margin-top为10px

IE7中margin-top为20px

IE6中margin-top为30px

当然不推荐用css hack以后浏览器升级也许就没用了。

posted @ 2012-02-17 15:43 遗失的天空阅读(216) 评论(2) 编辑

2012年2月16日

自己东手写个jquery图片轮换效果

过年换个新环境，离家超近，开车10分钟就搞定，可以天天回家，爽歪歪。

话说，过来很忙，10几个java，就咱一个前端，天天苦逼的命。

新的项目上线，首页里面啥都搞好了，差个图片轮换效果，用网上现成插件，我了去，不兼容。

一打听，那哥们居然是jQuery 1.3.2，那哥哥既然用了3年了，无语，佩服中。。。。

给那哥们普及了下jquery发展势头，换成最新的1.7.1，反正新项目就用新版本吧。

那插件不用了，不知道哪边有问题，老是显示出错，纠结啊。

还是自己东东手吧，不然都冻僵了。

先给个效果图看看

大致效果就是图片自动轮换，或者点击右下角那几个小图也会去相应的。

后端催命似的，代码写的不是很完善，就图个实现，兼容IE6 IE7 IE8 firefox chrome safari浏览器，IE9没条件测试，还是xp中，大家帮忙提点意见，感激啊。

丑代码出来见人咯。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,div,ul,li,a,img{margin:0;padding:0}
img{border:none}
ul,li{list-style-type:none}
body{margin:0 auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#828282;background:#fff}
.boxx{width:750px;height:400px;margin:0 auto;position:relative}
    .boxx_con{width:100%;position:absolute;z-index:10}
    .boxx_title{width:200px;height:50px;position:absolute;top:365px;left:510px;z-index:100;}
        .boxx_title li{width:32px;height:32px;float:left;margin-left:10px;display:inline;cursor:pointer}
            .boxx_title li img{width:32px;height:32px;float:left;}
            .bks{border:1px #ccc solid}
</style>
</head>

<body>
<div class="boxx">
    <ul class="boxx_con" id="boxx_con">
        <li><a href="http://www.cnblogs.com/"><img src="http://img02.taobaocdn.com/imgextra/i2/388921303/T249ylXXNaXXXXXXXX_!!388921303.jpg" width="750" height="400"/></a></li>
        <li style="display:none"><a href="http://www.cnblogs.com/divcss/"><img src="http://img01.taobaocdn.com/imgextra/i1/388921303/T2r.elXhhXXXXXXXXX_!!388921303.jpg" width="750" height="400"/></a></li>
        <li style="display:none"><a href="http://www.cnblogs.com/"><img src="http://img03.taobaocdn.com/imgextra/i3/388921303/T2gEilXgXXXXXXXXXX_!!388921303.jpg" width="750" height="400"/></a></li>
        <li style="display:none"><a href="http://lifesky.taobao.com"><img src="http://img03.taobaocdn.com/imgextra/i3/T223VnXfFNXXXXXXXX-72683792.gif" width="750" height="400"/></a></li>
    </ul>
    <ul class="boxx_title" id="boxx_title">
        <li><img src="http://img02.taobaocdn.com/imgextra/i2/388921303/T249ylXXNaXXXXXXXX_!!388921303.jpg" width="32" height="32"/></li>
        <li><img src="http://img01.taobaocdn.com/imgextra/i1/388921303/T2r.elXhhXXXXXXXXX_!!388921303.jpg" width="32" height="32"/></li>
        <li><img src="http://img03.taobaocdn.com/imgextra/i3/388921303/T2gEilXgXXXXXXXXXX_!!388921303.jpg" width="32" height="32"/></li>
        <li><img src="http://img03.taobaocdn.com/imgextra/i3/T223VnXfFNXXXXXXXX-72683792.gif" width="32" height="32" /></li>
    </ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("a").attr("target","_blank");
    var p=0;
    var timeInterval=3000;
    var $bli=$("#boxx_con li");
    var $pli=$("#boxx_title li");
    
    $bli.hide();
    $($bli[0]).show();
    function play(){
        p<$bli.length-1?p++:p=0;
        $bli.eq(p).show().siblings().hide(); 
        $pli.eq(p).addClass("bks").siblings().removeClass("bks");   
    }
    set = window.setInterval(play,timeInterval);
    $pli.mouseover(function(){
            window.clearInterval(set);
            p=$(this).index();
            $bli.eq(p).show().siblings().hide(); 
            $pli.eq(p).addClass("bks").siblings().removeClass("bks"); 
            set = window.setInterval(play,timeInterval);  
        });   
})
</script>
</body>
</html>

提供个下载地址猛击此处

posted @ 2012-02-16 09:55 遗失的天空阅读(1539) 评论(8) 编辑

2012年2月2日

target="_blank"不符合规范，用神马替代

今天看书，关注到target="_blank"不符合DOCTYPE规范，菜鸟一个的我愣了半天，以前一直target="_blank"的，现在才晓得。

有朋友问为什么不允许使用target="_blank"？这个属性很方便啊。呵呵，不知道W3C的专家们是怎么想的，据我所知，主要是“易用性、友好性”的问题，因为老外觉得不经过用户同意，没有明确提示就打开一个新窗口是不礼貌的。先不管这个取消是否合理。

继续关注书书，有几个解决办法无非是javascript解决的。

关注个最合理的，学习下，留点字迹，方便以后查看。

<html>
    <head>
        <title></title>
    </head>
    <body>
        <a href="http://www.cnblogs.com/" onclick="pupr(this.href);return false;">博客园</a><br>
    </body>
    <script type="text/javascript">
        function pupr(url){
            window.open(url);
        }
    </script>
</html>

步骤分解

1，发生onclick事件，执行pupr函数

2，返回false阻止默认动作href

注：当嵌入的onclick事件属性中返回false时，告诉浏览器停止并忽视执行链中其余事件，包括默认动作。在这种情况下，浏览器会停止默认动作执行，不再打开href属性中的链接。

posted @ 2012-02-02 11:30 遗失的天空阅读(2667) 评论(20) 编辑

2012年1月18日

依然上班中，写个图片透明度jQuery插件

摘要: Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需阅读全文

posted @ 2012-01-18 11:24 遗失的天空阅读(88) 评论(0) 编辑

2011年12月23日

参考百度百科配置smarty出错了，菜鸟伤不起啊

摘要: 下午看smarty，配置不会，有百度嘛，第一个是百科知识。跟着配置吧。　(1) 在根目录下建立了新的目录learn/，再在learn/里建立一个目录smarty/。将刚才解压缩出来的目录的libs/拷贝到smarty/里，再在smarty/里新建templates目录，templates里新建cache/，templates/，templates_c/， config/。 (2) 新建一个模板文件：index.tpl，将此文件放在learn/smarty/templates/templates目录下，代码如下： <!DOCTYPE HTML PUBLIC "-//W3C//DT阅读全文

posted @ 2011-12-23 17:45 遗失的天空阅读(54) 评论(0) 编辑

2011年12月9日

看PHP100视频做留言板，list.php一直显示空白

摘要: 是个菜鸟没什么好说的，遇到个问题，应该也是粗心所致。看PHP100视频做留言板，list.php一直显示空白。数据库连接都是木有问题的，代码也是好好的。 1 <?php 2 /* 3 * Created on 2011-12-6 4 * 5 * To change the template for this generated file go to 6 * Window - Preferences - PHPeclipse - PHP - Code Templates 7 */ 8 include("conn.php"); 9 ?>10 <table wi阅读全文

posted @ 2011-12-09 11:23 遗失的天空阅读(194) 评论(2) 编辑

2011年12月6日

PHP新手NOTICE错误，特此写给那些遇到和我一样错误的朋友。

摘要: 刚学习PHP，不久，一般就看看手册，和一本叫PHP和mysql web开发的。最近在整留言板，刚才遇到个问题。页面中，好多类似 Notice: Use of undefined constant title - assumed 'title' in D:\wamp\www\phpmysqlweb\bbs\list.php on line 17页面很难看，很纠结啊，我用的是wamp集成包。百度了下，看来好多朋友也有这个情况。Notice意思是使用了没有被声明的变量，但是程序不会影响使用。难怪还是能正常运行的，就是不雅观。解决办法有4个：1：在上面初始化2：打开php.ini文件阅读全文

posted @ 2011-12-06 22:56 遗失的天空阅读(186) 评论(0) 编辑

百度优化你不得不知道的9个禁忌

摘要: 最近在搞SEO，真是纠结，一片白纸，不懂百度，看书，请教高人，多少略知一二。看到一个关于百度优化的禁忌，觉得不错，整理个，发上来，大家有需要的看看。 1、重复堆砌关键词这个大家都知道，文章首段关键词的出现次数最好不要超过两次，否则就会有作弊嫌疑，尤其是新站，应该尽量避免太过明显的优化。 2、选择错误的关键词流量过低的关键词，优化得再完美，也无济于事，而关注度很高的关键词，就算排在第二页。 3、网站内容完全依靠采集如果一个网站的内容都是在网络上高度重复的，那么排名不会好，采集的网站百度也会收，但是收录后会被慢慢的k掉，而且很少会给改过自新的机会，哪怕之后...阅读全文

posted @ 2011-12-06 15:07 遗失的天空阅读(112) 评论(0) 编辑

仅列出标题下一页

前端开发 jquery博客 http://www.jqueryba.com/ 最近在搞淘宝我的小店http://lifesky.taobao.com/ 欢迎支持。

公告

遗失的天空

前端开发 jquery博客 http://www.jqueryba.com/ 最近在搞淘宝 我的小店http://lifesky.taobao.com/ 欢迎支持。

公告

前端开发 jquery博客 http://www.jqueryba.com/ 最近在搞淘宝我的小店http://lifesky.taobao.com/ 欢迎支持。