JQUERY는 왼쪽에 TIPS의 슬라이드인 및 슬라이드아웃 효과를 구현합니다._jquery

왼쪽은 슬라이딩 인/아웃의 스무딩 효과를 나타냅니다. 비슷한 효과가 나타나면 적용할 수 있습니다.

JQUERY 코드:

코드 복사 코드는 다음과 같습니다.

//왼쪽에 부동
$(".reading").hover( function(){
$(this).animate({left:"50"})
$(".read").animate({left:"0"},600)
$(".read_close" ).click( function(){
$(".read").animate({left:"-287"},600);
$(".reading") .animate({왼쪽:" 0"},800);
})

HTML:

코드 복사 코드는 다음과 같습니다.

>>

비즈니스 스트리트 비즈니스 기회 주제를 구독하실 수 있으며, 이메일을 통해 칼럼의 최신 내용을 받아보실 수 있습니다.

CSS:

코드 복사 코드는 다음과 같습니다. .reading{position:fixed;left:0px;bottom:30px;cursor:pointer;width: 25px;height :75px;

_position:absolute;//IE6과 호환

_top:expression(eval(document.documentElement.scrollTop document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop) ,10)|0)-(parseInt(this.currentStyle.marginBottom,30)||0)));

//IE6 호환, 밑에서 30< /PRE>}.read { 테두리:1px 솔리드 #d0d0d0;너비:285px;높이:100px; -moz-box-shadow:0px 1px 2px #ccc; -webkit-box-shadow:0px 1px 2px #ccc; 그림자:0px 1px 2px # ccc;//그림자 효과, CSS3배경:#fff;위치:고정;왼쪽:-287px;bottom:30px;z-index:10;_position:absolute;_top:expression(eval(document.documentElement) .scrollTop document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,30)||0)));}.read <br>p{font- size:14px;line-height:22px;padding:15px 0 0 16px;width:240px;}.read p.read_btn{text-align:right;padding-top:5px}.read_close{float :right;padding:2px ;cursor:pointer;}<P></P> <br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">

로그인 후 복사

< /P>