demo汇集

一图片预加载

1 加载地址

2 使用方式及参数

3 更多阅读

http://www.appelsiini.net/projects/lazyload

二清除文本框原有内容

1 加载地址

2 使用方式及参数

三点击关闭

1 加载地址

2 使用方式及参数

四拖拽效果

1 加载地址

2 代码

五按钮选中和未选中

1 加载地址

2 代码

六颜色选择器

1 加载地址

2 代码

七图片轮换

1 加载地址

2 代码

<style type="text/css">
        #slider{}
		#slider ul,#slider li{margin:0;padding:0;list-style:none;}
		#slider li{width:744px;height:355px;overflow:hidden;}
		#prevBtn,#nextBtn{display:block;width:47px;height:66px;position:absolute;left:-80px;top:135px;text-indent:-8000px;}
		#nextBtn{left:770px;}
		#prevBtn a,#nextBtn a{display:block;width:47px;height:66px;background:url(../pic/left_btn.jpg) no-repeat 0 0;}
		#nextBtn a{background:url(../pic/right_btn.jpg) no-repeat 0 0;}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider();
		});	
    </script>
    <div id="slider">
        <ul>				
            <li><a href="http://templatica.com/preview/30"><img src="images/1a1.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/7"><img src="images/1a2.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/25"><img src="images/1a3.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/26"><img src="images/1a4.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/27"><img src="images/1a5.jpg"/></a></li>		
            <li><a href="http://templatica.com/preview/30"><img src="images/1a6.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/7"><img src="images/1a8.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/25"><img src="images/1a9.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/26"><img src="images/1a10.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/27"><img src="images/1a11.jpg"/></a></li>		
            <li><a href="http://templatica.com/preview/7"><img src="images/1a12.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/25"><img src="images/1a13.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/26"><img src="images/1a14.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/27"><img src="images/1a15.jpg"/></a></li>		
            <li><a href="http://templatica.com/preview/26"><img src="images/1a16.jpg"/></a></li>
            <li><a href="http://templatica.com/preview/27"><img src="images/1a7.jpg"/></a></li>
        </ul>
    </div>

八侧栏展开收缩

1 加载地址

2 代码

<style type="text/css">
	.basic  {width: 260px;font-family: verdana;border: 1px solid black;}
	.basic div {background-color: #eee;}
	.basic p {margin-bottom : 10px;border: none;text-decoration: none;font-weight: bold;font-size: 10px;margin: 0px;padding: 10px;}
	.basic a {cursor:pointer;display:block;padding:5px;margin-top: 0;text-decoration: none;font-weight: bold;font-size: 12px;color: black;background-color: #00a0c6;border-top: 1px solid #FFFFFF;border-bottom: 1px solid #999;background-image: url("images/AccordionTab0.gif");}
	.basic a:hover {background-color: white;background-image: url("images/AccordionTab2.gif");}
	.basic a.selected {color: black;background-color: #80cfe2;background-image: url("images/AccordionTab2.gif");}
</style>
<script type="text/javascript">
jQuery().ready(function(){
	// simple accordion
	jQuery('#list1a').accordion();
	
});
</script>
<div class="basic" style="float:left;"  id="list1a">
    <a>There is one obvious advantage:</a>
    <div>
        <p>
            You've seen it coming!<br/>
            Buy now and get nothing for free!<br/>
            Well, at least no free beer. Perhaps a bear,<br/>
            if you can afford it.
        </p>
    </div>
    <a>Now that you've got...</a>
    <div>
        <p>
            your bear, you have to admit it!<br/>
            No, we aren't selling bears.
        </p>
    </div>
    <a>Rent one bear, ...</a>
    <div>
        <p>
            get two for three beer.
        </p>
        <p>
            And now, for something completely different.<br/>
            And now, for something completely different.<br/>
            And now, for something completely different.<br/>
            And now, for something completely different.<br/>
            And now, for something completely different.<br/>
            And now, for something completely different.<br/>
            And now, for something completely different.<br/>
            And now, for something completely different.<br/>
            Period.
        </p>
    </div>
</div>

3 效果预览

There is one obvious advantage:

You've seen it coming!
Buy now and get nothing for free!
Well, at least no free beer. Perhaps a bear,
if you can afford it.

Now that you've got...

your bear, you have to admit it!
No, we aren't selling bears.

Rent one bear, ...

get two for three beer.

And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
Period.

九文本框提示信息

1 加载地址

2 代码

3 效果预览

十标签切换

1 加载地址

2 代码

3 效果预览

房产要闻
一周精华帖

demodemo