slidedoor滑动门特效

exportWidth:暴露门的宽度 width

imagesWidth:单张图片的宽度width

每道门每次偏移量 translate=imagesWidth-exportWidth;

当前鼠标hover图片时，偏移后的left值应为当前图片images[i].style.left与每道门的偏移量之差

注意：当前鼠标hover图片之前时，应该让每道门进行复位

计算公式： images[i].style.left=images[i].style.left-translate

源码下载 请点击 http://pan.baidu.com/s/1mhIOt0O

slidedoor滑动门特效的更多相关文章

  1. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  2. CSS 滑动门案例

    一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...

  3. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  4. Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  5. 代码简洁的滑动门（tab）jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  6. 基于jQuery左右滑动切换特效

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. asp.net实现数据库版动态网页滑动门

    前端: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.c ...

  8. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  9. html5向左滑动删除特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. MacOS中使用QT开发iOS应用

    因为项目合同中规定一部分业务内容要在手机端实现,包括安卓机和苹果机,因此选择了QT作为开发工具.程序在Win10和安卓系统上已经完美运行,这几天开始搭建iOS的编译和发布环境,因为以前没有使用过mac ...

  2. 修改Credentials 密码

    今天,Leader 吩咐要修改管理账户的密码,我负责的Part是修改package和 Replication的Job的密码.仔细想了下,由于我们使用的Windows验证方式,而Job在执行时,是使用P ...

  3. Android 圆形头像 自己动手

    圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...

  4. SubSonic3.0使用例子

    前段时间开发的框架使用了SubSonic2.2以后,觉得开发效率提高了不少,后期维护起来也非常方便,不由的喜欢上了SubSonic.中间有想过升级到更高版本,但度娘一下就放弃了,只有极少的中文版说明, ...

  5. iOS开发之遍历Model类的属性并完善使用Runtime给Model类赋值

    在上篇博客<iOS开发之使用Runtime给Model类赋值>中介绍了如何使用运行时在实体类的基类中添加给实体类的属性赋值的方法,这个方法的前提是字典的Key必须和实体类的Property ...

  6. 最详细的网站改版SEO优化指南：如何让排名不降反升

    我知道,网站改版很是让人头疼.首先,这个过程需要很长时间还有大量工作要做,并且通常结果不会如你的预期.其次,改版确实有破坏之前为 SEO 所做努力的风险. 但不要因为通常网站改版带来排名下降就认为这是 ...

  7. iOS开发--AVFoundation自定义相机

    首先导入一个头文件 #import <AVFoundation/AVFoundation.h> 由于后面我们需要将拍摄好的照片写入系统相册中,所以我们在这里还需要导入一个相册需要的头文件 ...

  8. SharePoint 2013 托管导航 无法被开启的解决办法

    在阅读了园子中霖雨的一片博文<SharePoint 2013 托管导航及相关配置>之后,非常想尝试一下SharePoint 2013 中的这个新功能,但是我的网站集包括样式是从2010升级 ...

  9. 【集合框架】JDK1.8源码分析之HashMap & LinkedHashMap迭代器（三）

    一.前言 在遍历HashMap与LinkedHashMap时,我们通常都会使用到迭代器,而HashMap的迭代器与LinkedHashMap迭代器是如何工作的呢?下面我们来一起分析分析. 二.迭代器继 ...

  10. JavaScript代码模块化的正规方法

    RequireJS-CommonJS-AMD-ES6 Import/Export详解 为什么起了一个这个抽象的名字呢,一下子提了四个名词分别是:RequireJS,CommonJS,AMD,ES6,答 ...