blog.visualp.com
구글웹폰트 api를 이용하여 나눔폰트 적용하기
아래 코드를 style.css 파일 상단에 넣고, 폰트를 적용하고 싶은 클래스에 각각 나눔폰트를 지정해주면 됩니다.
About a month ago I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Here’s the result:
Pretty slick no? The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.
Go to the Before/After download page
First, your before and after images must be the same size. Each image must be inside its own div, and both of those within a containing div which must have an ID. See this example.
<div id="container"> <div><img alt="before" src="before.jpg" width="600" height="366" /></div> <div><img alt="after" src="after.jpg" width="600" height="366" /></div> </div>
All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers.
To use the plugin you’ll need to have a copy of jQuery and the jQuery UI, or point to jquery on Google and jqueryui on Google, and the plugin. Place the files on your site and link to them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.beforeafter.js"></script> <script type="text/javascript"> $(function(){ $('#container').beforeAfter(); }); </script>
That’s it! You can apply the before/after plugin to any number of elements on a page.
The following options are configurable:
Options are added when calling the script:
$('#container').beforeAfter({ animateIntro : true, introDelay : 2000, introDuration : 500, showFullLinks : false });
Enjoy!
Note that the plugin uses several images which are kept in the same folder as the plugin. If you store the plugin in another folder on your server, update the path to these images. Please be sure to read the license before using.
<script type="text/javascript">
var rollingTimeIntervalID;
var durationTime = 1000;
var rollingTime = 3000;
function scrollTextUp(){
$("#textup").animate({"top":"-=20"},{
duration: durationTime,
easing: "linear",
complete:function(){
$("#textup").children(":last").after("<div style='line-height:20px;'>"+$("#textup").children(":first").html()+"</div>");
if($("#textup").children(":first").height() <= (parseInt($("#textup").css("top"))*-1)){
$("#textup").children(":first").remove();
$("#textup").css({"top":0});
}
}
});
}
rollingTimeIntervalID = setInterval(scrollTextUp, rollingTime);
</script>
<script language="javascript" src="jquery-1.3.2.js"></script>
<script language="javascript">
/**
* query를 이용한 날짜 셀렉트 박스
**/
$(function () {
initDaySelect('sYear', 'sMonth', 'sDay');
});
/**
* 년도 역순 셀렉트
* param : s - 시작연도, p - 출력년수, v - 선택값
* date : 2010-05-10
* auth : sunghee (xxda@naver.com)
**/
$.fn.setYearSelect = function(s, p, v){
var tday = new Date()
if(!s){s=tday.getFullYear()};
if(!p){p=5};
if(!v){v=(new Date).getFullYear()};
this.each(function(){
if (this.tagName=='SELECT') {
this.options.length = 0;
for (var i=s;i>s-p;i--){
if ( i == v || i == v)
var option = new Option(i , i, false,true);
else
var option = new Option(i , i);
if ($.browser.msie) { this.add(option);
}else{ this.add(option,null);}
}
}
});
}
/**
* 월 셀렉트
* param : v - 선택값
* date : 2010-05-10
* auth : sunghee (xxda@naver.com)
**/
$.fn.setMonthSelect = function(v){
var tday = new Date();
var tmp = "";
if(!v){v=(new Date).getMonth()+1};
if (v.length < 2) v = '0' + v;
this.each(function(){
if (this.tagName=='SELECT') {
this.options.length = 0;
for (var i=1;i<13;i++){
if(i < 10) tmp = '0' + i;
else tmp = '' + i;
if ( tmp == v || tmp == v)
var option = new Option(tmp , tmp, false,true);
else
var option = new Option(tmp , tmp);
if ($.browser.msie) { this.add(option);
}else{ this.add(option,null);}
}
}
});
}
/**
* 일 셀렉트
* param : ds - 일수, v - 선택값
* date : 2010-05-10
* auth : sunghee (xxda@naver.com)
**/
$.fn.setDaySelect = function(ds, v){
var tmp = "";
if(!v){v=(new Date).getDate()};
if (v.length < 2) v = '0' + v;
this.each(function(){
if (this.tagName=='SELECT') {
this.options.length = 0;
for (var i=1;i<ds+1;i++){
if(i < 10) tmp = '0' + i;
else tmp = '' + i;
if ( tmp == v || tmp == v)
var option = new Option(tmp , tmp, false,true);
else
var option = new Option(tmp , tmp);
if ($.browser.msie) { this.add(option);
}else{ this.add(option,null);}
}
}
});
}
/**
* 날짜 셀렉트 박스에 날짜 세팅
**/
function initDaySelect(yName, mName, dName){
$("#"+yName).setYearSelect();
$("#"+mName).setMonthSelect();
setDaySelect(yName, mName, dName);
}
/**
* 날짜세팅
**/
function setDaySelect(yName, mName, dName){
var days = new Date(new Date($("#"+yName).val(), $("#"+mName).val(), 1)-86400000).getDate();
$("#"+dName).setDaySelect(days, $("#"+dName).val());
}
</script>
<select id="sYear" name="sYear" onchange="setDaySelect('sYear', 'sMonth', 'sDay')"></select> 년
<select id="sMonth" name="sMonth" onchange="setDaySelect('sYear', 'sMonth', 'sDay')"></select> 월
<select id="sDay" name="sDay" onchange="setDaySelect('sYear', 'sMonth', 'sDay')"></select> 일
[출처] javascript jquery 날짜 셀렉트 박스|작성자 마이더스
[원문] :http://html.nhndesign.com/blog/?p=22
wmode 값을 설정하여 플래시 플레이어를 제어 하여 배경을 투명하게 하거나 위에 레이어를 올릴 수 있다.
<param name="wmode" value="window">
<param name="wmode" value="opaque">
<param name="wmode" value="transparent">
transparent모드를 사용할 경우 animation performance를 떨어뜨리게 되기 때문에 반드시 필요한 경우에만 사용해야 한다.
면적이 넓으면 피하는 것이 좋다.
wmode의 기본값은 “window”이고 “transparent”의 반대인 경우는 “opaque”
wmode 속성중 transparent는 플래시 속성창에서 설정했던 Background Color를 투명하게 나타내고
opaque는 지정한 Background Color색을 그대로 사용합니다.
[원문] : http://feather.elektrum.org/book/src.html
window.onload=function(){
var reffer = document.referrer
var scripts = document.getElementsByTagName('script');
var myScript = scripts[ scripts.length - 1 ];
var queryString = myScript.src.replace(/^[^\?]+\??/,'');
var params = parseQuery( queryString );
alert(params['js_pmcode']);
}
function parseQuery ( query ) {
var Params = new Object ();
if ( ! query ) return Params; // return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
<html>
<head></head>
<body>
<STYLE>.ellipsis {overflow:hidden; text-overflow:ellipsis; }</STYLE>
<TABLE style="TABLE-LAYOUT: fixed" width=200 border=1><BR>
<TR>
<TD class=ellipsis noWrap>가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사 가나다라마바사
</TD>
</TR>
</TABLE>
</body>
</html>
참고 주소:http://html.nhncorp.com/blog/37677
완벽 호환 하려면 다음을 참조 하면 될거 같음