google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照iGoogle做了一个简单的小demo。
这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets。
废话就不多说了,直接把源代码贴出来,让大家学习!
html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="css/my.css" rel="external nofollow" rel="external nofollow" mce_href="css/my.css" rel="external nofollow" rel="external nofollow" /> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-ui.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.easywidgets.js"><script src="js/example.js"></head> <body> <!--left--> <div id="left" class="widget-place column1"> <div id="ldiv1" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">左边-----用鼠标拖动</div> </div> <div id="ldiv2" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">左边-----用鼠标拖动</div> </div> <div id="ldiv3" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">左边-----用鼠标拖动</div> </div> </div> <!--middle--> <div id="middle" class="widget-place column2"> <div id="mdiv1" class="widget movable collapsable removable editable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼,我加了背景</div> <div id="content" class="widget-content">中间------用鼠标拖动</div> </div> <div id="mdiv2" class="widget movable removable editable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">中间------用鼠标拖动</div> </div> <div id="mdiv3" class="widget movable removable editable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">中间------用鼠标拖动</div> </div> </div> <!--right--> <div id="right" class="widget-place column3"> <div id="rdiv1" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">右边------用鼠标拖动</div> </div> <div id="rdiv2" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">右边------用鼠标拖动</div> </div> <div id="rdiv3" class="widget movable"> <div id="header" class="widget-header"><strong>drar me</strong> </div> <div id="content" class="widget-content">右边------用鼠标拖动</div> </div> </div> </body> </html>
CSS
body{ margin: 0; padding: 0; background-color: silver; font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; color: #666; font-size:20px; line-height:150%; } #left{ width: 380px; height: 100%; padding: 10px; position: absolute; top: 10px; left: 10px; border: solid red 2px; } #left .widget { width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #left .widget .widget-header { width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; } #middle{ width: 400px; height: 100%; position: absolute; top:10px; left: 435px; padding: 10px; margin: 0 30px 0; border: solid red 2px; } #middle .widget { width: 360px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #middle .widget .widget-header { width: 360px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; } #right{ width: 380px; height: 100%; padding: 10px; position: absolute; top: 10px; right: 10px; border: solid red 2px; } #right .widget { width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white; } #right .widget .widget-header { width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray; }
javascript代码
$(document).ready(function(){ $.fn.EasyWidgets({ i18n : { editText : '编辑', closeText : '关闭', extendText : '展开', collapseText : '折叠', cancelEditText : '取消' } }); });
标签:
Jquery,可拖动窗口
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Jquery仿IGoogle实现可拖动窗口示例代码”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
2024年10月20日
2024年10月20日
- 群星《歌手2024 第4期》[320K/MP3][107.39MB]
- 群星《歌手2024 第4期》[FLAC/分轨][563.76MB]
- RiffKitten-ChaosParade(2024)[24-44,1]FLAC
- RuneKlakegg-Nattevandrer(2024)[24-96]\FLAC
- 赖冰霞.2006-金嗓典藏辑2IN1(南方金点系列)2CD【南方】【WAV+CUE】
- 群星.1988-国语金曲尽精英VOL.2【瑞成】【WAV+CUE】
- 张宇.1999-雨一直下【EMI百代】【WAV+CUE】
- 袁娅维.2021-月亮失眠了(DELUXE)【华纳】【FLAC分轨】
- AlanBroadbent-JazzFunk(2024)[24-44,1]
- 梅艳芳《绝代芳华》开盘母带[低速原抓WAV+CUE]
- ABC唱片-《外国精逊母带直刻神奇黑胶[APE+CUE].
- 群星《天赐的声音第五季 第6期》[320K/MP3][101.43MB]
- 群星《天赐的声音第五季 第6期》[FLAC/分轨][526.16MB]
- 群星《说唱梦工厂 第2期》[320K/MP3][96.37MB]
- 杨宗宪.1994-留你留袂着【有容唱片】【WAV+CUE】