`
axl234
  • 浏览: 273624 次
  • 性别: 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控制滚动条的图片展示及图片放大效果

    本文将详细讨论如何使用JavaScript来控制滚动条的图片展示以及实现图片放大效果。这一技术通常应用于图片画廊、产品展示等场景,可以使得网页内容更具有吸引力。 首先,我们来看“js控制滚动条的图片展示”。滚动条...

    鼠标悬浮时图片上显示放大图标

    综上所述,"鼠标悬浮时图片上显示放大图标"这一功能的实现涉及了前端开发中的多种技术,包括JavaScript事件监听、CSS样式控制、前端框架的运用以及图片放大效果的实现。开发者可以根据项目的具体需求和技术栈选择...

    windwos桌面图标震撼效果

    3. **缩放效果**:鼠标靠近图标时,图标会自动放大,便于查看细节;远离时恢复原大小,提高操作便利性。 4. **动画效果**:设置图标在打开或关闭应用程序时播放简单的动画,增加趣味性。 5. **透明度调整**:可以...

    左右滚动图片且支持放大效果

    标题提到的“左右滚动图片且支持放大效果”是一种常见的用户体验设计,常用于产品展示、画廊浏览或者任何需要展示多张图片的场景。这种设计能够提供一种动态且互动的查看方式,使用户能够方便地浏览图片并深入了解...

    highslide图片放大效果

    以下是关于Highslide图片放大效果的详细知识点: 1. **基本原理**: Highslide的原理是通过JavaScript动态加载大图,并在鼠标悬停或点击小图时,以弹出窗口的形式展示放大后的图片。这种效果可以在不离开当前页面...

    android桌面,支持左右滑动

    PageTransformer接口允许我们控制页面在滑动过程中的动画效果,例如放大、缩小、旋转等。 此外,为了使桌面支持图标拖动和排列,可能还需要使用DraggableGridView或RecyclerView等组件,它们允许用户通过触摸手势来...

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

    在Android开发中,有时我们需要创建具有独特交互效果的控件,比如滑动选择器,而`WheelView`就是这样一种自定义的控件。它通常用于日期选择、时间选择或者选项滚动等场景,提供了类似滚轮的视觉效果和操作体验。在你...

    RecyclerView滑动动画删除

    例如,当用户滑动列表项时,可以改变其背景色或显示删除图标,以提示用户当前的操作状态。在删除操作完成后,可以弹出 Toast 或 Snackbar 提示用户。 6. 性能优化: 在处理大量数据时,注意避免不必要的渲染和更新...

    软件开发中常用的图标

    - 交互图标:如“滑动解锁”、“拖动排序”等,指示用户进行特定操作。 - 提示图标:用于通知和提示,如警告、错误、成功等状态图标。 3. 图标格式: - ICO:Windows系统的标准图标格式,支持多个尺寸和颜色深度...

    photoview控件 可以实现放大缩小图片

    实现放大缩小图片的控件

    web2.0常用图标

    7. **动画效果**:Web2.0图标常常带有微交互动画,如点击时的轻微缩放、高亮,或者滑动时的平滑过渡,这些动画增强了用户体验,使界面更生动。 8. **矢量图形**:为了保证在不同尺寸下的清晰度,Web2.0图标通常采用...

    android开发小图标素材

    8. **滑动切换图标**:在滑动开关上,表示开/关状态,通常是一对相反的图标。 9. **自定义视图图标**:根据应用特定需求设计的图标,如游戏中的角色、道具或应用内的特殊功能。 在设计这些图标时,开发者需要遵循...

    移动焦点放大图片局部(仿淘宝

    - 这种效果还可以扩展到触摸设备上,通过触摸滑动来实现放大效果。 - 结合懒加载技术,当图片进入可视区域时再加载,可以提高页面加载速度。 - 如果有多个图片,可以实现切换图片时保持放大镜位置的效果,提供更...

    java写的放大镜工具

    9. **多线程**: 如果放大镜工具需要实时跟踪鼠标移动并显示放大效果,那么可能需要在一个单独的线程中执行这些操作,以避免阻塞主线程,保证应用的流畅性。 通过以上技术的综合运用,我们可以构建出一个功能完善的...

    highslide插件实现点击按钮逐渐放大显示二维码效果.zip

    HTML中可能包含了一个或多个二维码元素,以及触发放大效果的按钮。按钮通常通过`&lt;button&gt;`标签定义,并通过jQuery绑定点击事件来启动动画过程。 `js`文件夹可能包含以下内容: 1. `highslide.js`: HighSlide插件的...

    WPF图片动画效果切换

    图片在切换过程中先缩小或放大到一定程度,然后再恢复到正常大小,从而形成缩放效果。 5. **组合动画**: WPF允许我们将多个动画组合在一起,形成更复杂的动画序列。例如,可以先进行淡入淡出,然后添加滑动效果,...

    VB屏幕放大镜

    4. **显示放大效果**:将放大的图像绘制到程序的窗口上,通常会创建一个透明的浮层窗口,使得用户可以看到放大镜下的屏幕内容。 5. **动态跟踪**:当鼠标移动时,程序需要实时更新捕获和放大的区域,确保放大镜始终...

    C#371-屏幕放大镜代源码

    为了实现放大效果,我们需要对捕获到的屏幕图像进行缩放处理。在C#中,可以使用Graphics类的DrawImage方法配合适当的缩放比例参数来实现。此外,还可以使用Matrix类进行更复杂的几何变换,例如旋转、平移等。 屏幕...

    iphone4原版手势图标

    首先,iPhone 4上的手势图标通常包括滑动解锁、捏合放大/缩小(多点触控)、轻拍两次唤醒屏幕、双击Home键打开多任务切换器等。滑动解锁是最基本的手势,用户只需沿着屏幕上的滑块向右滑动即可解锁设备。捏合放大和...

Global site tag (gtag.js) - Google Analytics