(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);
分享到:
相关推荐
本文将详细讨论如何使用JavaScript来控制滚动条的图片展示以及实现图片放大效果。这一技术通常应用于图片画廊、产品展示等场景,可以使得网页内容更具有吸引力。 首先,我们来看“js控制滚动条的图片展示”。滚动条...
综上所述,"鼠标悬浮时图片上显示放大图标"这一功能的实现涉及了前端开发中的多种技术,包括JavaScript事件监听、CSS样式控制、前端框架的运用以及图片放大效果的实现。开发者可以根据项目的具体需求和技术栈选择...
3. **缩放效果**:鼠标靠近图标时,图标会自动放大,便于查看细节;远离时恢复原大小,提高操作便利性。 4. **动画效果**:设置图标在打开或关闭应用程序时播放简单的动画,增加趣味性。 5. **透明度调整**:可以...
标题提到的“左右滚动图片且支持放大效果”是一种常见的用户体验设计,常用于产品展示、画廊浏览或者任何需要展示多张图片的场景。这种设计能够提供一种动态且互动的查看方式,使用户能够方便地浏览图片并深入了解...
以下是关于Highslide图片放大效果的详细知识点: 1. **基本原理**: Highslide的原理是通过JavaScript动态加载大图,并在鼠标悬停或点击小图时,以弹出窗口的形式展示放大后的图片。这种效果可以在不离开当前页面...
PageTransformer接口允许我们控制页面在滑动过程中的动画效果,例如放大、缩小、旋转等。 此外,为了使桌面支持图标拖动和排列,可能还需要使用DraggableGridView或RecyclerView等组件,它们允许用户通过触摸手势来...
在Android开发中,有时我们需要创建具有独特交互效果的控件,比如滑动选择器,而`WheelView`就是这样一种自定义的控件。它通常用于日期选择、时间选择或者选项滚动等场景,提供了类似滚轮的视觉效果和操作体验。在你...
例如,当用户滑动列表项时,可以改变其背景色或显示删除图标,以提示用户当前的操作状态。在删除操作完成后,可以弹出 Toast 或 Snackbar 提示用户。 6. 性能优化: 在处理大量数据时,注意避免不必要的渲染和更新...
- 交互图标:如“滑动解锁”、“拖动排序”等,指示用户进行特定操作。 - 提示图标:用于通知和提示,如警告、错误、成功等状态图标。 3. 图标格式: - ICO:Windows系统的标准图标格式,支持多个尺寸和颜色深度...
实现放大缩小图片的控件
7. **动画效果**:Web2.0图标常常带有微交互动画,如点击时的轻微缩放、高亮,或者滑动时的平滑过渡,这些动画增强了用户体验,使界面更生动。 8. **矢量图形**:为了保证在不同尺寸下的清晰度,Web2.0图标通常采用...
8. **滑动切换图标**:在滑动开关上,表示开/关状态,通常是一对相反的图标。 9. **自定义视图图标**:根据应用特定需求设计的图标,如游戏中的角色、道具或应用内的特殊功能。 在设计这些图标时,开发者需要遵循...
- 这种效果还可以扩展到触摸设备上,通过触摸滑动来实现放大效果。 - 结合懒加载技术,当图片进入可视区域时再加载,可以提高页面加载速度。 - 如果有多个图片,可以实现切换图片时保持放大镜位置的效果,提供更...
9. **多线程**: 如果放大镜工具需要实时跟踪鼠标移动并显示放大效果,那么可能需要在一个单独的线程中执行这些操作,以避免阻塞主线程,保证应用的流畅性。 通过以上技术的综合运用,我们可以构建出一个功能完善的...
HTML中可能包含了一个或多个二维码元素,以及触发放大效果的按钮。按钮通常通过`<button>`标签定义,并通过jQuery绑定点击事件来启动动画过程。 `js`文件夹可能包含以下内容: 1. `highslide.js`: HighSlide插件的...
图片在切换过程中先缩小或放大到一定程度,然后再恢复到正常大小,从而形成缩放效果。 5. **组合动画**: WPF允许我们将多个动画组合在一起,形成更复杂的动画序列。例如,可以先进行淡入淡出,然后添加滑动效果,...
4. **显示放大效果**:将放大的图像绘制到程序的窗口上,通常会创建一个透明的浮层窗口,使得用户可以看到放大镜下的屏幕内容。 5. **动态跟踪**:当鼠标移动时,程序需要实时更新捕获和放大的区域,确保放大镜始终...
为了实现放大效果,我们需要对捕获到的屏幕图像进行缩放处理。在C#中,可以使用Graphics类的DrawImage方法配合适当的缩放比例参数来实现。此外,还可以使用Matrix类进行更复杂的几何变换,例如旋转、平移等。 屏幕...
首先,iPhone 4上的手势图标通常包括滑动解锁、捏合放大/缩小(多点触控)、轻拍两次唤醒屏幕、双击Home键打开多任务切换器等。滑动解锁是最基本的手势,用户只需沿着屏幕上的滑块向右滑动即可解锁设备。捏合放大和...