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

WBOY

풀어 주다： 2016-05-16 17:31:08

원래의

1226명이 탐색했습니다.

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

관련 라벨：

jquery

원천：php.cn

이전 기사：ScrollPic 구문 분석은 ie8에서 한 번만 스크롤된 다음 공백이 됩니다. ie6, ie7, chrome 및 firefox_javascript 기술에서는 정상입니다. 다음 기사：Unit PNG Fix.js 기반 솔루션이 ie6_javascript 기술에서 제대로 작동하지 않는 경우가 있습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사