(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控制滚动条的图片展示及图片放大效果,好好!
最近在项目中用到了滑动选中控件,我在github上面找了一个例子做了一下修改,基本满足要求,我把源码上传到这,和大家交流学习
本人也是在网上下载的源码,然后在这基础上修改代码成左右滑动查看下一页,而非点击图标来切换图片。类似QQ空间发表的图片说说,点击小图片查看大图,触屏左右滑动查看下一张或者上一张,js源码,可以根据需求修改。
jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery分类导航 jquery加载动画插件 jquery华丽的css3滚动 jquery商品分类选择 jquery图像剪辑 jquery图像剪辑.rar jquery图片...
用java写的放大镜工具,带任务栏图标,可调节大小,自动滑动
3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿...
1、安装可牛看图之后,双击本地图片或网站上图片右上角的可牛看图悬浮层图标,均可启动可牛看图 2、可牛看图能自动将网站上或本地文件夹下的所有图片加载在3D墙中显示,将鼠标在图片上滑动,会在图片下方显示该...
c)键入缩放,缩放和平移 - 通过在屏幕上捏合和滑动轻松放大和缩小。还可以选择缩放和平移。 d)SUBTITLE GESTURES - 向前/向后滚动以移至下一个/上一个文本,向上/向下滚动以上下移动文本,放大/缩小以更改文本...
react-dnr - 采用React.js构建的可拖动和可调整大小的窗口
作者TalkingJourney,代码SCIndexView-master。SCIndexView提供像微信这样的索引视图。 功能及优点 主要功能及优点如下: 当滑动UITableView列表时...当第一个数据为UITableViewIndexSearch时,自动添加放大镜图标。
使用工具栏按键或键盘或鼠标的滑动缩小放大功能聚焦增量。 使用鼠标的滚动以及滚轮功能快速浏览设计的概况。 剪切、复制与粘贴。 使用可选的canvas向导显示可用的屏幕空间。 通过文本框与书签对您的设计进行注释...
当第一个数据为UITableViewIndexSearch时,自动添加放大镜图标。使用方法可以通过CocoaPods导入,支持iOS7及以上。pod 'SCIndexView'创建SCIndexViewConfiguration对象,这个对象用来控制索引的UI样式;设置...
使用工具栏按键或键盘或鼠标的滑动缩小放大功能聚焦增量。 使用鼠标的滚动以及滚轮功能快速浏览设计的概况。 剪切、复制与粘贴。 使用可选的canvas向导显示可用的屏幕空间。 通过文本框与书签对您的设计进行注释...
7.14 滑动效果的背景图片 7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停...
登录界面、基础登录、多样式登录、主流后台登录、校验登录、OA办公类首页...图标、日期、自动完成、搜索、导航菜单、菜单、选项卡、流程步骤、分页器、评分好评、点赞、滑块、进度条、面包屑、导航布局、主流后台模板、...
在图标一角显示新通知数量和播放提示音 @自动补全 支持查看@消息和私信收件箱 显示表情符号表情 自动向时间轴加载新消息 记录时间表 查看图片和消息某些 支持独立窗口模式运行 版本0.2.0 平滑滚动效果 支持将粘贴板...
2.2利用加速度计来研究超重与失重问题 打开软件同2.1中相同找到"Linear Acceleration Sensor"点击右上角图标,我们只研究竖直方向,故将手机竖直放置y轴正方向竖直向下 ,利用y轴加速度计来测量(为了颜色便于观察...
同时点击大海报会翻转显示电影细节点击右上角,页面会翻转到tableView形式展示电影列表4、新闻页面tableView的新闻展示界面,同时下拉,透视图会放大,点击小新闻带有图片图标的会进入图片浏览页面,点击普通进入一...