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. html 生成pdf

    HTML生成PDF(c#) 最近因为工作需要,小小的研究了一下HTML生成PDF的方法,这方面的内容很多,但要么是不尽如人意的方法,要么就是那种收费的类库!为了广大.neter的福利,把自己的一点小小 ...

  2. IDE：IDEA Commit Changes Dialog local changes refresh

    IDEA提交代码,一直卡着不动,显示:Commit Changes Dialog local changes refresh 修改方法为: go to settings - version contr ...

  3. CRM/ERP 企业管理软件中常见的七种程序设计模式

    管理软件中的常见代码设计模式,来自于业务上的需要,有不恰当的地方欢迎批评指正. 1  RE-TRY 重试模式 场景:在连接数据库服务器时,如果SQL Server数据库没有启动或正在启动,我们需要有一 ...

  4. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  5. android模拟器默认位置的修改

    1.创建ANDROID_SDK_HOME环境变量,如ANDROID_SDK_HOME=D:\eclipse_android\android-sdk 2.在ANDROID_SDK_HOME目录下,建立. ...

  6. 引用类型-Function类型

    Function类型 定义函数的三种方式: 1.函数声明 function sum(num1,num2){ return num1 +num2; } 2.函数表达式 var sum = functio ...

  7. Hibernate学习之——Hibernate环境搭建

    之前在写关于安卓闹钟的教程,写了一半就没后一半了,其实自己也没做好,在校外实习,校内毕业实习又有任务,只能先放放了,等毕业实习结束之后,在继续安卓闹钟开发之旅,相信这个时间不会很久的.现在毕业实习用到 ...

  8. 用html5的视频元素所遇到的第一个坑

    html5 有一个video标签,这个是被大家所熟知的事情.按照w3c的规范,我认真的写出如下代码: <video preload="auto" controls=" ...

  9. .NET Core 和 .NET Framework 之间的关系

    引用一段描述:Understanding the relationship between .NET Core and the .NET Framework. .NET Core and the .N ...

  10. svn迁移到git

    步骤命令如下: > git svn clone https://svn-url/ProjectName --no-metadata --authors-file=user.txt --trunk ...