当前位置：首页 > 网页特效 > 其他

jquery仿360猜你喜欢隐藏悬浮窗口特效

分类：其他日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML结构
```html
<div class="liketome">
  <div class="header">
    <span class="arrow up"></span>
  </div>
  <ul class="menu">
    <li  style="padding-left:0px;margin-left:0px; width:150px; height:91px; background:url(images/uiuiuiuiiu.jpg) no-repeat left;"></li>
    <li><a href="http://www.htmleaf.com/"><img src="images/1.jpg" width="127" height="91"  title="精彩插画1"><span>精彩插画1</span></a></li>
    <li><a href="http://www.htmleaf.com/"><img src="images/2.jpg" width="127" height="91" title="精彩插画2"><span>精彩插画2</span></a></li>
    <li><a href="http://www.htmleaf.com/"><img src="images/3.jpg" width="127" height="91" title="精彩插画3"><span >精彩插画3</span></a></li>
    <li><a href="http://www.htmleaf.com/"><img src="images/4.jpg" width="127" height="91" title="精彩插画4"><span>精彩插画4</span></a></li>
    <li><a href="http://www.htmleaf.com/"><img src="images/5.jpg" width="127" height="91" title="精彩插画5"><span>精彩插画5</span></a></li>
    <li><a href="http://www.htmleaf.com/"><img src="images/6.jpg" width="127" height="91" title="精彩插画6"><span>精彩插画6</span></a></li>
    <li><a href="http://www.htmleaf.com/"><img src="images/7.jpg" width="127" height="91" title="精彩插画7"><span>精彩插画7</span></a></li>
    <li  id="xx" style=" width:50px; height:91px; float:right;"><a href="#nogo"  class="xxx" title="关闭">X</a></li>
  </ul>      
</div>
```
##### JAVASCRIPT
要使用这款jQuery3d幻灯片插件首先要引入jQuery文件。

调用插件

```html
$(document).ready(function(){            
  /* 滑动/展开 */
  $(".header").click(function(){
    $(".header").animate({ width: 'hide', display: 'none' }); 
   
    /*$(this).parent().find("ul.menu").slideToggle(800);*/  //上下滚动函数slidetoggle（speed）
    $("ul.menu").animate({ width: 'show' ,height:'show' ,display:'block',}); //height 变化可有可无
     
  });
  //close menu(必须包含在函数之内)
  $(".xxx").click(function(){
    $(".header").animate({ width: 'show',  display: 'block' }); 
    $("ul.menu").animate({ width: 'hide' ,height:'hide',display:'none',});  //height 变化可有可无   
  });
});
```

web299.com

jquery仿360猜你喜欢隐藏悬浮窗口特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果