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({left:" 0"},800);


HTML:

コードをコピーします> コードは次のとおりです。

>

Business Street のビジネス チャンスのトピックを購読すると、コラムの最新コンテンツを電子メールで受け取ることができます。

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 { border:1px Solid #d0d0d0;width:285px;height:100px; -moz-box-shadow:0px 1px 2px #ccc; -webkit-box-shadow:0px 1px 2px #ccc; shadow:0px 1px 2px # ccc;//シャドウ効果、CSS3background:#fff;position:fixed;left:-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 

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;}