Menu

附demo源码下载

本文实例讲述了jQuery
flip插件实现的翻牌效果。分享给大家供大家参考,具体如下:

本文实例讲述了jQuery图片前后对比插件beforeAfter用法。分享给大家供大家参考,具体如下:

最近做了个类似于塔罗牌翻牌的效果,分享给大家。

今天分享一款 jquery 插件——图片前后对比(beforeAfter),效果如下:

运行效果图如下:

美高梅开户 1

美高梅开户 2

使用方法:

具体代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>图片前后对比</title>
</head>
<body>
  <div class="beforeafter">
    <img src="images/before.jpg" alt="before" height="420" width="748"/>
    <img src="images/after.jpg" alt="after" height="420" width="748"/>
  </div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
  $('.beforeafter').beforeAfter({
    imagePath: 'images/'
  });
});
</script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>flip</title>
  <style>
  *{margin:0;padding:0;}
  .content{background:orange;height:300px;margin:100px auto;width:200px;}
  </style>
</head>
<body>
  <div class="content"></div>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.flip.min.js"></script>
<script>
$(function(){
  $('.content').click(function(){
    var _this = $(this);
    _this.flip({
      direction: 'lr',
      content: '反转后显示的内容,反转后显示的内容,反转后显示的内容,反转后显示的内容',
      onEnd: function(){
        _this.css({
          background: 'orange',
          color: 'white'
        }).unbind('click');
      }
    });
  });
});
</script>

参数说明(部分):

参数说明:

showFullLinks:是否显示下面的链接,点击链接,将自动显示完整的前或后的图片,默认值:true

direction:翻转方向,总共有 4 个值(tb、bt、lr、rl),默认 tb

imagePath:导航图片的路径(绝对路径或相对路径),导航图片指的是中间绿色条以及左右三角,默认值:/js/beforeAfter/

content:设置翻转后容器内显示的内容,可以是文本,可以是 html,甚至可以是
jquery 对象

beforeLinkText:设置前图片下面链接的文字,默认值:Show only before

color:设置翻转后容器的背景色

afterLinkText:设置后图片下面链接的文字,默认值:Show only after

speed:设置翻转速度,值越小速度就越快

注意:

onBefore:设置翻转前需要执行的内容

前后两张图片大小必须一致。

onAnimation:设置翻转到一半的时候需要执行的内容

完整实例代码点击此处本站下载.rar)。

onEnd:设置翻转完成后需要执行的内容

美高梅开户,官网地址:

PS:

jqueryui 需要加载 core 和 effects core

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery
form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

官网地址:

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • jQuery实现个性翻牌效果导航菜单的方法
  • jQuery
    翻牌或百叶窗效果(内容三秒自动切换)
  • 移动端翻页插件dropload.js(支持Zepto和jQuery)
  • jQuery插件expander实现图片翻转特效
  • JQuery插件iScroll实现下拉刷新,滚动翻页特效
  • 使用jQuery.fn自定义jQuery翻页插件
  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备
  • Jquery插件 easyUI属性汇总
  • jQuery Dialog
    弹出层对话框插件
  • 强烈推荐240多个jQuery插件提供下载
  • jQuery
    flip插件实现的翻牌效果示例【附demo源码下载】

完整实例代码点击此处本站下载.rar)。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • jQuery实现个性翻牌效果导航菜单的方法
  • jQuery
    翻牌或百叶窗效果(内容三秒自动切换)
  • jQuery实现扑克正反面翻牌效果
标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图