js实现弧形菜单特效
2013-05-17 20:38
295 查看
前一阵子,因为做安卓项目,需要用到一个弧形菜单的效果,园子里有一份是用java代码写的模仿path的(这玩意我都没听过啊),无奈,小弟不才,没有办法应用在我的Jquery-Mobile+PhoneGap的项目中,于是自己写一份来。
其实不难,各位大神见到我的代码请轻拍。
<!-----不会传图片 哎o(︶︿︶)o 唉---->
其实不难,各位大神见到我的代码请轻拍。
<!-----不会传图片 哎o(︶︿︶)o 唉---->
var show=false; //初始化,其实是因为我不会控制转场的时间,导致我的代码在转场前就运行了,所以才写的这么一个函数 function inittool_m (){ $("#mapdisplay").append('<img class="tool_m" onclick="ClearScreen()" src="jquery-mobile/lib/images/map_clear1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px" > <img class="tool_m" src="jquery-mobile/lib/images/map_measureL1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px;"> <img class="tool_m" " src="jquery-mobile/lib/images/map_measureP1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px"> <img class="tool_m" src="jquery-mobile/lib/images/map_zoomin1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px"> <img class="tool_m" src="jquery-mobile/lib/images/map_zoomout1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px"> <img class="tool_m" src="jquery-mobile/lib/images/geoLoca.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px">') } //显示,按照屏幕右下角,发散 function tool_m_show(){ //alert("i") var r=150; var imgs=$(".tool_m"); var len=imgs.length; var angl=Math.PI/(len-2)/2; $.each(imgs,function(index,img){ if(index==len-1){ $(img).fadeIn(200); return;} var i=index; var ang=angl*i; var p_x=Math.floor(r*Math.sin(ang)); var p_y=Math.floor(r*Math.cos(ang)); $(img).animate({ right:p_x, bottom:p_y, },"slow").fadeIn(200); }) show=true; } //收缩 function tool_m_hide(){ var imgs=$(".tool_m"); $.each(imgs,function(index,img){ $(img).animate({right:0,bottom:0},"slow").fadeOut(200); }) show=false; } //toggle function toggleTool_m(obj){ var imgs=$(".tool_m"); //alert($(imgs[0]).css('right')) if(show){ tool_m_hide(); }else{ tool_m_show() } }
相关文章推荐
- js实现弧形菜单特效
- JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
- JS实现三级折叠菜单特效,其它级可自动收缩
- JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
- JS实现三级折叠菜单特效,其它级可自动收缩
- js实现右键弹出多级菜单特效
- Android 3D滑动菜单完全解析,实现推拉门式的立体特效
- css+html+js实现下拉及多级弹出菜单
- Android 3D滑动菜单完全解析,实现推拉门式的立体特效
- js实现浏览器的各种菜单命令比如打印、查看源文件等等
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- 原生js简单实现放大镜特效
- 用js实现网页上模仿桌面右键菜单
- 用js实现网页上模仿桌面右键菜单
- js 实现菜单上下显示附效果图
- 用html+css+js实现的一个简单的图片切换特效
- Android实现自定义的卫星式菜单(弧形菜单)详解
- Android双向滑动菜单完全解析,教你如何一分钟实现双向滑动特效
- js 使用form表单select类实现级联菜单效果