`
axl234
  • 浏览: 262427 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

图标滑动放大效果

阅读更多

(function($){
 $.fn.bubbleup = function(settings){
  settings=$.extend({
   tooltip: false,//是否提示文本
   scale:120,//放大后的图片宽度
   fontFamily:'Helvetica, Arial, sans-serif',//提示文本字体
   color:'#333333',//提示文本字体颜色
   fontSize:12,//提示文本字体大小
   fontWeight:'bold',//提示文本字体粗细
   inSpeed:'fast',//鼠标划过放大时的速度
   outSpeed:'fast'//鼠标已出缩小时时的速度
   },settings);
   return this.each(function(){
    $.fn.bubbleup.runing( $( this ), settings );
   })
 };
 $.fn.bubbleup.runing=function($this,settings){
  var smallImgW=$this.width();
  $this.mouseover(function(){
   if (settings.tooltip) {
    tip=$('<div>' + $(this).attr('alt') + '</div>').css({
     fontFamily: settings.fontFamily,
     color: settings.color,
     fontSize: settings.fontSize,
     fontWeight: settings.fontWeight,
     position: 'absolute',
     zIndex: 100000
    }).remove().css({top:0,left: 0,visibility:'hidden',display:'block'}).appendTo(document.body);
    var position=$.extend({},$this.offset(),{width:this.offsetWidth,height:this.offsetHeight});
    var tipWidth = tip[0].offsetWidth;
    var tipHeight = tip[0].offsetHeight;
    tip.stop().css({
      top: position.top - tipHeight,
      left: position.left + position.width / 2 - tipWidth / 2,
      visibility: 'visible'
     }).animate({top:'-='+(settings.scale/2-smallImgW/2)},settings.inSpeed);
   }
   $this.closest('li').css({'z-index':100000});
   $this.stop().css({'z-index':100000,'top':0,'left':0,'width':smallImgW}).animate({
    left:-settings.scale/2+smallImgW/2,
    top:-settings.scale/2+smallImgW/2,
    width:settings.scale
   },settings.inSpeed)
  }).mouseout(function(){
   $this.closest('li').css({'z-index':100});
   $this.closest('li').next().css({'z-index':0});
   $this.closest('li').next().css({'z-index':0});
   $this.closest('li').next().children('img').css({'z-index':0});
   if(settings.tooltip){tip.remove()}
   $this.stop().animate({left:0,top:0,width:smallImgW},settings.outSpeed,function(){
    $this.css({'z-index':0});
   });
  });
  
 }
})(jQuery);

分享到:
评论

相关推荐

    一个js控制滚动条的图片展示及图片放大效果

    一个js控制滚动条的图片展示及图片放大效果,好好!

    Android中自定义滑动选中控件WheelView

    最近在项目中用到了滑动选中控件,我在github上面找了一个例子做了一下修改,基本满足要求,我把源码上传到这,和大家交流学习

    点击小图,左右滑动查看大图源码

    本人也是在网上下载的源码,然后在这基础上修改代码成左右滑动查看下一页,而非点击图标来切换图片。类似QQ空间发表的图片说说,点击小图片查看大图,触屏左右滑动查看下一张或者上一张,js源码,可以根据需求修改。

    jquery插件库大全(200个).zip

    jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery分类导航 jquery加载动画插件 jquery华丽的css3滚动 jquery商品分类选择 jquery图像剪辑 jquery图像剪辑.rar jquery图片...

    java写的放大镜工具

    用java写的放大镜工具,带任务栏图标,可调节大小,自动滑动

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿...

    可牛看图(3D图片墙)

    1、安装可牛看图之后,双击本地图片或网站上图片右上角的可牛看图悬浮层图标,均可启动可牛看图 2、可牛看图能自动将网站上或本地文件夹下的所有图片加载在3D墙中显示,将鼠标在图片上滑动,会在图片下方显示该...

    MX Player Pro 1.10.50.apk

    c)键入缩放,缩放和平移 - 通过在屏幕上捏合和滑动轻松放大和缩小。还可以选择缩放和平移。 d)SUBTITLE GESTURES - 向前/向后滚动以移至下一个/上一个文本,向上/向下滚动以上下移动文本,放大/缩小以更改文本...

    react-reactdnr采用Reactjs构建的可拖动和可调整大小的窗口

    react-dnr - 采用React.js构建的可拖动和可调整大小的窗口

    SCIndexView类微信的索引视图

    作者TalkingJourney,代码SCIndexView-master。SCIndexView提供像微信这样的索引视图。 功能及优点 主要功能及优点如下: 当滑动UITableView列表时...当第一个数据为UITableViewIndexSearch时,自动添加放大镜图标。

    GUI Design Studio 3.0

    使用工具栏按键或键盘或鼠标的滑动缩小放大功能聚焦增量。 使用鼠标的滚动以及滚轮功能快速浏览设计的概况。 剪切、复制与粘贴。 使用可选的canvas向导显示可用的屏幕空间。 通过文本框与书签对您的设计进行注释...

    SCIndexView:SCIndexView 提供类似微信的索引视图

    当第一个数据为UITableViewIndexSearch时,自动添加放大镜图标。使用方法可以通过CocoaPods导入,支持iOS7及以上。pod 'SCIndexView'创建SCIndexViewConfiguration对象,这个对象用来控制索引的UI样式;设置...

    软件界面设计工具_3款合集

    使用工具栏按键或键盘或鼠标的滑动缩小放大功能聚焦增量。 使用鼠标的滚动以及滚轮功能快速浏览设计的概况。 剪切、复制与粘贴。 使用可选的canvas向导显示可用的屏幕空间。 通过文本框与书签对您的设计进行注释...

    超实用的jQuery代码段

    7.14 滑动效果的背景图片 7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停...

    web高端交互元件库 用心设计

    登录界面、基础登录、多样式登录、主流后台登录、校验登录、OA办公类首页...图标、日期、自动完成、搜索、导航菜单、菜单、选项卡、流程步骤、分页器、评分好评、点赞、滑块、进度条、面包屑、导航布局、主流后台模板、...

    PREFiX:简洁,易用的Chrome饭否客户端

    在图标一角显示新通知数量和播放提示音 @自动补全 支持查看@消息和私信收件箱 显示表情符号表情 自动向时间轴加载新消息 记录时间表 查看图片和消息某些 支持独立窗口模式运行 版本0.2.0 平滑滚动效果 支持将粘贴板...

    利用智能手机做物理实验.doc

    2.2利用加速度计来研究超重与失重问题 打开软件同2.1中相同找到"Linear Acceleration Sensor"点击右上角图标,我们只研究竖直方向,故将手机竖直放置y轴正方向竖直向下 ,利用y轴加速度计来测量(为了颜色便于观察...

    Mtime-iOS:模仿Mtime时光网iOS App客户端做的精仿Mtime,仅供学习

    同时点击大海报会翻转显示电影细节点击右上角,页面会翻转到tableView形式展示电影列表4、新闻页面tableView的新闻展示界面,同时下拉,透视图会放大,点击小新闻带有图片图标的会进入图片浏览页面,点击普通进入一...

Global site tag (gtag.js) - Google Analytics