jQuery生成各种桌面和移动设备模型插件devicemock

所属分类:媒体,其他-图片展示,杂项

 15923  279  查看评论 (0)
分享到微信朋友圈
X
jQuery生成各种桌面和移动设备模型插件devicemock ie兼容9

devicemock

devicemock是一款可以生成各种桌面设备和移动设备模型的jQuery插件。你可以使用该插件来模拟各种显示设备,还可以设置它们的尺寸大小和颜色模式。

使用方法

使用该图片轮播插件需要引入jQuery和jquery.vitrine.js和jquery.devicemock.css文件。

<link rel="stylesheet" type="text/css" href="path/to/jquery.devicemock.css">              
<script src="jquery.min.js"></script>
<script src="jquery.devicemock.js"></script>

HTML结构

该设备模型插件的基本HTML结构如下:

<div class="selector">
   <!-- 内容可以是  (div , img , iframe ...) -->
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该插件。

$('.selector').deviceMock({
   type        : 'browser',   // browser , phone , tablet , desktop , laptop
   size        : '1x',        // null(1x) , 2x , 3x , 4x , 5x
   theme       : 'black' ,    // black , white (if phone or tablet)
   orientation : 'portrait' , // landscape , portrait (if phone or tablet)
   address     : 'http://example123.com' // show on URL BAR
});

你还可以设置模型图片(SVG文件)所在的文件夹路径和CSS前缀名称:

$('.selector').deviceMock({
   //????
   imgPath     : './jquery.devicemock/img/', // path of asset img dir
   cssPrefix   : 'df-'                       // css namespace
});

你还可以通过data-*属性来应用多个实例。

<!-- 浏览器 -->
<div style="width:300px;" data-devicemock-type="browser" data-devicemock-size="2x" data-devicemock-theme="" data-devicemock-orientation="" data-devicemock-address="http://jq22.com">
   <img src="path/to/img.jpg">
</div>
 
<!-- 平板 -->
<div data-devicemock-type="tablet" data-devicemock-size="4x" data-devicemock-theme="black" data-devicemock-orientation="landscape" data-devicemock-address="">
   <div>
      <!-- some inner contents (div , img , iframe ...) -->
   </div>
</div>                
$('[data-devicemock-type]').each(function(i){
   var that = this;
   var opt  = {};
   var object = [
               'type',
               'size',
               'theme',
               'orientation',
               'address'
            ];
   for (prop in object) {
      var data = $(that).data('dm-'+object[prop]);
      if (object.hasOwnProperty(prop)) {
         opt[object[prop]] = data;
      }
   }
   $(that).deviceMock(opt);
});

配置参数

参数默认值类型描述
typestringbrowser设备的类型,可以是:browser, phone, tablet, desktop 或 laptop
sizestring3x设备的大小,可选值有:1x, 2x, 3x, ? 9x
themestringblack设备的主题(只有phone或tablet可使用该参数),可选值有:black 或 white
orientationstringportrait只有phone或tablet可使用该参数。可选值有:landscape 或 portrait
addressstringnone只有browser可以使用该参数。地址栏显示的URL地址
imgPathstring./jquery.devicemock/img/模型图片的存放路径
cssPrefixstringdf-CSS前缀。如果修改需要参考scss文件->-> $prefix : '.df-';
相关插件-图片展示,杂项

仿微信朋友圈图片展示效果

仿微信朋友圈图片展示效果
  图片展示
 60310  435

jQuery点击图片预览并显示详情

jQuery点击图片预览并显示详情,加入购物车,适合简单的商城系统
  图片展示
 43092  652

html5极速3D立体式图片相册切换效果

html5极速3D立体式图片相册切换效果
  图片展示
 74755  736

简易的jQuery无缝滚动(原创)

简易无缝滚动,只需要改变高度(不用设宽度)嗯,或许看看就知道是不是你想要的
  图片展示
 31446  404

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复