资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JS模拟的腾讯微博app撕纸效果的实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>腾讯微博app撕纸效果</title> <style type="text/css"> body{margin:0;padding:0;font-size:14px;line-height:22px;} .content,content_mack{width:300px;height:400px;overflow:hidden;font-size:12px;line-height:20px;background:#f2eee3;cursor:pointer;} .content_mack{position:absolute;top:0px;left:0;} .mack{position:absolute;width:300px;height:50px;overflow:hidden;top:0px;left:0px;background:#fff;} .bg_sizhi{position:absolute;width:300px;height:50px;overflow:hidden;background:url('http://files.glzy8.com/file_images/article/201305/2013521101603617.gif');top:0px;left:0;line-height:50px;text-align:center;} </style> </head> <body> <div style="width:300px;height:400px;overflow:hidden;position: relative;float:left;"> <div class="content" id="content"> <div class="content">04-262.59MCerberus FTP Server 中文版 2.48FTP软件04-253.55MWeb Page Maker简易网页制作 v3.1网页制作04-25990KRemote Desktop Spy服务器监控、远程控制 v5.2服务器软件04-252.20Kx3389远程端口修改器 1.0服务器软件04-25210K远程桌面3389批量登录软件3.0远程控制04-25789KTable2CSS Table布局转Div+CSS 3.0！ 04-2314.1Mjre1.6下载 | jre 1.6 JAVA虚拟机环境包编程开发04-2393.9KVC++正则表达式测试器编程开发04-2331.6K解除右键限制、网页禁止复制功能的小软件站长工具04-231.49MDiagram Designer矢量图编辑器。</div> <div class="bg_sizhi" id="bg_sizhi">JS模拟的腾讯微博app撕纸效果</div> <div class="mack" id="mack"> <div class="content content_mack" id="content_mack">05-0114.3KC#自动更换IP地址网络相关05-0117.0KC#网络发送与接收统计程序网络相关05-0115.8K局域网IP扫描程序C#源码网络相关05-01411K前后平滑旋转的jQuery网页幻灯片代码焦点幻灯05-01300KVB RichTextBox控件使用方法指南 pdfVB教程05-01925KVB 函数速查手册 pdfVB教程05-01509KHTML5和CSS全面动画效果的焦点图特效焦点幻灯05-014.49K类似树形菜单的jquery多级展开下拉菜单菜单导航05-0136.0K仿Flash背景左右滑动的多彩网页菜单菜单导航04-3016.9MJava范例开发大全一书光盘源代码书籍源码04-30916KAndroid与Js交互源码实例 Android滑动菜单制作RenRenSlidingLayout代码Android源码04-30644KFlat UI HTML用户界面常用代码包Ajax/JavaScript04-3053.3KJavaScript仿百度百科词条统计动画效果Ajax/JavaScript04-30267Kjquery由外向内的收缩效果示例jQuery04-306.41KDelphi Mode属性用法举例控件组件04-306.03KStartPos属性-Delphi用法其它类别04-306.47KNotifyValue属性用法一例Delphi源代码其它类别04-30</div> </div> </div> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%0D%0A%20function%20%24(id)%7B%2F*%20%E8%8E%B7%E5%8F%96id%20*%2F%0D%0A%20%20return%20typeof%20id%20%3D%3D%3D%20%22string%22%20%3F%20document.getElementById(id)%20%3A%20id%3B%0D%0A%20%7D%0D%0A%20function%20getStyle(obj%2C%20attr)%7B%0D%0A%20%20return%20obj.currentStyle%3Fobj.currentStyle%5Battr%5D%3AgetComputedStyle(obj%2C%20false)%5Battr%5D%3B%0D%0A%20%7D%0D%0A%20function%20startMove(obj%2C%20json%2C%20fnEnd)%7B%0D%0A%20%20if(obj.timer)%7B%0D%0A%20%20%20clearInterval(obj.timer)%3B%0D%0A%20%20%7D%0D%0A%20%20obj.timer%3DsetInterval(function%20()%7B%0D%0A%20%20%20doMove(obj%2C%20json%2C%20fnEnd)%3B%0D%0A%20%20%7D%2C%2010)%3B%0D%0A%20%20%0D%0A%20%20var%20oDate%3Dnew%20Date()%3B%0D%0A%20%20%0D%0A%20%20if(oDate.getTime()-obj.lastMove%3E30)%7B%0D%0A%20%20%20doMove(obj%2C%20json%2C%20fnEnd)%3B%0D%0A%20%20%7D%0D%0A%20%7D%0D%0A%20function%20doMove(obj%2C%20json%2C%20fnEnd)%7B%0D%0A%20%20var%20iCur%3D0%3B%0D%0A%20%20var%20attr%3D''%3B%0D%0A%20%20var%20bStop%3Dtrue%3B%2F%2F%E5%81%87%E8%AE%BE%E8%BF%90%E5%8A%A8%E5%B7%B2%E7%BB%8F%E8%AF%A5%E5%81%9C%E6%AD%A2%E4%BA%86%0D%0A%20%20for(attr%20in%20json)%7B%0D%0A%20%20iCur%20%3D%20attr%3D%3D'opacity'%3FparseInt(100*parseFloat(getStyle(obj%2C%20'opacity')))%3AparseInt(getStyle(obj%2C%20attr))%3B%0D%0A%20%20%20if(isNaN(iCur))%7B%0D%0A%20%20%20%20iCur%3D0%3B%0D%0A%20%20%20%7D%0D%0A%20%20%20var%20iSpeed%3D(json%5Battr%5D-iCur)%2F8%3B%0D%0A%20%20%20iSpeed%3DiSpeed%3E0%3FMath.ceil(iSpeed)%3AMath.floor(iSpeed)%3B%0D%0A%20%20%20if(parseInt(json%5Battr%5D)!%3DiCur)%7B%0D%0A%20%20%20%20bStop%3Dfalse%3B%0D%0A%20%20%20%7D%0D%0A%20%20%20if(attr%3D%3D'opacity')%7B%0D%0A%20%20%20%20obj.style.filter%3D%22alpha(opacity%3A%22%2B(iCur%2BiSpeed)%2B%22)%22%3B%0D%0A%20%20%20%20obj.style.opacity%3D(iCur%2BiSpeed)%2F100%3B%0D%0A%20%20%20%7D%0D%0A%20%20%20else%7B%0D%0A%20%20%20%20obj.style%5Battr%5D%3DiCur%2BiSpeed%2B'px'%3B%0D%0A%20%20%20%7D%0D%0A%20%20%7D%0D%0A%20%20if(bStop)%7B%0D%0A%20%20%20clearInterval(obj.timer)%3B%0D%0A%20%20%20obj.timer%3Dnull%3B%0D%0A%20%20%20%0D%0A%20%20%20if(fnEnd)%7B%0D%0A%20%20%20%20fnEnd()%3B%0D%0A%20%20%20%7D%0D%0A%20%20%7D%0D%0A%20%20%0D%0A%20%20obj.lastMove%3D(new%20Date()).getTime()%3B%0D%0A%20%7D%0D%0A%20var%20flag%20%3D%200%3B%0D%0A%20%24('content').onclick%20%3D%20function(ev)%7B%0D%0A%20%20var%20oEvent%3Dev%7C%7Cevent%3B%0D%0A%20%20if(!flag)%7B%0D%0A%20%20%20var%20Y%20%3D%20oEvent.clientY-25%3B%0D%0A%20%20%20Y%20%3D%20Y%3C0%3F0%3AY%3B%0D%0A%20%20%20Y%20%3D%20Y%3E350%3F350%3AY%3B%0D%0A%20%20%20%24('bg_sizhi').style.top%20%3D%20%24('mack').style.top%20%3D%20Y%2B'px'%3B%0D%0A%20%20%20%24('content_mack').style.top%20%3D%20-Y%2B'px'%3B%0D%0A%20%20%20startMove(%24('mack')%2C%7B'left'%3A-300%7D)%3B%0D%0A%20%20%20flag%20%3D%201%3B%0D%0A%20%20%7Delse%7B%0D%0A%20%20%20startMove(%24('mack')%2C%7B'left'%3A0%7D)%3B%0D%0A%20%20%20flag%20%3D%200%3B%0D%0A%20%20%7D%0D%0A%20%20%0D%0A%20%7D%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程