利用jQuery实现**站删除效果
来源:互联网 发布:朱棣如果失败 知乎 编辑:程序博客网 时间:2024/06/06 06:43
jQuery是一款非常强大的Javascript脚本库,我们开发者喜欢jQuery的原因除了它代码简洁外,更多的是因为jQuery插件非常丰富。今天我们用一个示例来解说jQuery是如何实现拖拽的。
利用jQuery实现拖拽非常简单,我们直接可以利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素。今天我们就利用jQuery的这一特性来实现一个拖拽删除桌面小图标的功能,就像操作系统的**站一样,我们只需要拖动应用图标至垃圾箱即可删除这个图标,具体可以看下面的DEMO演示。
复制代码代码结构比较简单,下面是简单的CSS代码。
CSS代码:
复制代码按照上面的CSS定义,删除小图标的**站文件夹的外观是3D的,这个要看你浏览器的3D支持情况。
最后是最重要的jQuery代码,真正实现了鼠标拖拽图标,并将其放入**站,这里引用了jQuery UI的脚本库,熟悉jQuery的朋友应该对jQuery UI不会陌生,这里不再赘述。
jQuery代码:
复制代码通过上面的代码,我们就实现了一个基于jQuery的小图标删除**站效果,上面只是核心代码,详细代码大家可以下载源代码来研究。源代码下载>>
via:http://www.cnblogs.com/html5tricks/p/3890789.html
利用jQuery实现拖拽非常简单,我们直接可以利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素。今天我们就利用jQuery的这一特性来实现一个拖拽删除桌面小图标的功能,就像操作系统的**站一样,我们只需要拖动应用图标至垃圾箱即可删除这个图标,具体可以看下面的DEMO演示。
大家也可以看DEMO演示
下面来简单介绍一下实现这款jQuery拖拽删除小图标的方法流程,主要包括HTML代码、CSS3代码以及jQuery代码。
HTML代码:
HTML代码主要定义了一个**站文件夹的容器,以及各个小图标的图片。
- <div id=”main”>
- <div class=”folder”>
- <div class=”front”></div>
- <div class=”back”></div>
- </div>
- <img src=”assets/48px/box.png” style=”top:340px;left:100px;” alt=”box” />
- <img src=”assets/48px/calculator.png” style=”top:340px;left:170px;” alt=”calculator” />
- <img src=”assets/48px/clipboard.png” style=”top:340px;left:240px;” alt=”clipboard” />
- <img src=”assets/48px/console.png” style=”top:340px;left:310px;” alt=”console” />
- <img src=”assets/48px/basketball.png” style=”top:340px;left:380px;” alt=”basketball” />
- <img src=”assets/48px/facebook.png” style=”top:400px;left:100px;” alt=”facebook” />
- <img src=”assets/48px/gift.png” style=”top:400px;left:170px;” alt=”gift” />
- <img src=”assets/48px/id_card.png” style=”top:400px;left:240px;” alt=”id card” />
- <img src=”assets/48px/imac.png” style=”top:400px;left:310px;” alt=”imac” />
- <img src=”assets/48px/system_monitoring.png” style=”top:400px;left:380px;” alt=”system monitoring” />
- </div>
CSS代码:
- .folder {
- /* This will enable the 3D effect. Decrease this value
- * to make the perspective more pronounced: */
- -webkit-perspective: 800px;
- -moz-perspective: 800px;
- perspective: 800px;
- position: absolute;
- top: 50%;
- left: 50%;
- z-index: 0;
- width: 160px;
- height: 120px;
- margin: -100px 0 0 -60px;
- }
- .folder div{
- width:150px;
- height:115px;
- background-color:#93bad8;
- /* Enabling 3d space for the transforms */
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- transform-style: preserve-3d;
- /* Enabling a smooth animated transition */
- -webkit-transition:0.5s;
- -moz-transition:0.5s;
- transition:0.5s;
- /* Disable text seleltion on the folder */
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
- position:absolute;
- top:0;
- left:50%;
- margin-left:-75px;
- }
- .folder .front{
- border-radius:5px 5px 0 0;
- -moz-transform:rotateX(-30deg);
- -webkit-transform:rotateX(-30deg);
- transform:rotateX(-30deg);
- -moz-transform-origin:50% 100%;
- -webkit-transform-origin:50% 100%;
- transform-origin:50% 100%;
- background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
- background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
- background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
- box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;
- z-index:10;
- font: bold 26px sans-serif;
- color: #5A88A9;
- text-align: center;
- text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
- line-height: 115px;
- }
- .folder .back{
- background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
- background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
- background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
- border-radius:0 5px 0 0;
- box-shadow:0 -1px 1px rgba(0,0,0,0.15);
- }
- .folder .back:before{
- content:'';
- width:60px;
- height:10px;
- border-radius:4px 4px 0 0;
- background-color:#93bad8;
- position:absolute;
- top:-10px;
- left:0px;
- box-shadow:0 -1px 1px rgba(0,0,0,0.15);
- }
- .folder .back:after{
- content:'';
- width:100%;
- height:4px;
- border-radius:5px;
- position:absolute;
- bottom:5px;
- left:0px;
- box-shadow:0 4px 8px #333;
- }
- .folder.open .front{
- -moz-transform:rotateX(-50deg);
- -webkit-transform:rotateX(-50deg);
- transform:rotateX(-50deg);
- }
- /*----------------------------
- Draggable Icons
- -----------------------------*/
- #main img{
- position:absolute;
- cursor:move;
- }
最后是最重要的jQuery代码,真正实现了鼠标拖拽图标,并将其放入**站,这里引用了jQuery UI的脚本库,熟悉jQuery的朋友应该对jQuery UI不会陌生,这里不再赘述。
jQuery代码:
- $(function() {
- var folder = $("#main .folder"),
- front = folder.find('.front'),
- img = $("#main img"),
- droppedCount = 0;
- img.draggable();
- folder.droppable({
- drop : function(event, ui) {
- // Remove the dragged icon
- ui.draggable.remove();
- // update the counters
- front.text(++droppedCount);
- },
- activate : function(){
- // When the user starts draggin an icon
- folder.addClass('open');
- },
- deactivate : function(){
- // Close the folder
- folder.removeClass('open');
- }
- });
- });
via:http://www.cnblogs.com/html5tricks/p/3890789.html
0 0
- 利用jQuery实现**站删除效果
- 利用Jquery实现tab效果
- 利用Jquery实现百叶窗效果
- JQuery实现拖动删除效果
- 利用jquery插件中的拖拽与放置实现的相册效果,可以删除和恢复
- 利用JQuery插件 实现相册拖拽删除和弹回去的效果
- 利用JQuery Mobile实现切换效果
- 利用jquery实现瀑布流效果
- java利用jquery和smartupload实现头像上传切割效果
- 利用Jquery实现,可输入搜索文字下拉选效果
- [学习笔记]利用Jquery实现一些动态效果
- 利用jquery-fform.js插件实现图片所见即所得效果
- 利用jquery实现select下拉框级联效果
- 利用jQuery、setInterval实现头像各种出现效果
- 利用jQuery实现全选、反选、删除和添加
- jQuery实现全选效果
- jQuery实现折叠效果
- jQuery实现斑马线效果
- Eclipse安装Jetty插件
- JAVA 学习第五天(4) 访问权限和继承的关系
- 捕鱼分鱼、出售鱼、平分七筐鱼
- hdu 5093 Battle ships 最大二分匹配
- HDU 4565 so easy(矩阵快速幂)
- 利用jQuery实现**站删除效果
- PHP数组在内存的形式
- Leetcode Remove Duplicates from Sorted List II 删除链表中重复的元素II
- nyoj914Yougth的最大化(二分搜索 + 贪心)
- 单调队列基本知识
- poj 3666 Making the Grade (动态规划)
- Android的系统架构
- MySQL for Mac 安装和基本操作
- canvas使用图案来对图形和文本进行描边和填充