jquery方法animate操作图片移动

在很多商城上看到有加入购物车然后图片飞入购物车的效果，于是尝试做了一下

原理：把图片生成一张小的图片半透明,然后给小图片新的坐标，当小图片到新的坐标就消失，效果如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery.min.js"></script><script>$(function () {//给所有图片注册点击事件$("img").click(function () {var cart = $('.shopping-cart');//获取要移动到的目标var imgtodrag = $(this);if (imgtodrag) {var imgclone = imgtodrag.clone().offset({top: imgtodrag.offset().top,left: imgtodrag.offset().left}).css({//生成一张小的图片'opacity': '0.5','position': 'absolute','height': '80px','width': '80px','z-index': '100'}).appendTo($('body')).animate({//对生成小的图片开始移动时间为1s'top': cart.offset().top - 160,'left': cart.offset().left + 60,'width': 75,'height': 75}, 700).animate({//移动到目标区域图片消失'width': 0,'height': 0}, function () {$("#img").attr("src", $(imgtodrag).attr('src'));});}})});</script>
</head>
<body><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><img src="《GJ部》_2015_05_23_22_15_20_1.jpg" /><div style="text-align: center; margin-top: 300px"><span class="shopping-cart"><img src="#" style="width: 200px; height: 200px" id="img" /></span></div></body>
</html>

jquery方法animate操作图片移动相关推荐

关于Jquery中animate可以操作css样式属性总结
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...
JQuery基本操作 JQueryCSS操作 JQuery筛选选择器 JQuery筛选方法 JQuery效果
JQuery 基本使用原生JS获取的对象就是DOM对象 JQuery方法获取的元素是JQuery对象 (伪数组形式存储) 不能使用原生Js的属性和方法 DOM对象转换为 JQuery 对象 $ ...
jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
为什么80%的码农都做不了架构师?>>> 原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例使 ...
jQuery 效果 - animate() 方法
实例改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({hei ...
jQuery中animate( )的方法及$(“body“).animate({‘scrollTop‘:top},500)不被Firefox支持问题的解决
jQuery中animate( )的方法及$("body").animate({'scrollTop':top},500)不被Firefox支持问题的解决参考文章: (1)jQu ...
图片怎么转PDF？两个方法轻松操作
相信小伙伴的手机相册里都有很多图片.无论是观光.自拍,还是保存一些精美的图片,随着图片越来越多,我们批量分享给别人就越来越麻烦,有些聊天软件甚至可能会降低原有的图片质量.其实在这种情况下,我们可以把图 ...
[JQuery]用InsertAfter实现图片走马灯展示效果
写在前面最近一个搞美工的朋友让我给他写一个图片轮播的特效. 需求: 图片向左循环滚动. 图片滚动到中间高亮显示,并在下方显示照片人物对应的信息. 鼠标悬停止滚动. 鼠标离开开始滚动. 单击图片,图片 ...
1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
宽屏图片轮播html,jQuery实现宽屏图片轮播实例教程
本文实例讲述了jQuery实现宽屏图片轮播实例教程.分享给大家供大家参考.具体如下: 运行效果截图如下: 引入jquery库构建html 整个代码分为三部分: 1.加载部分loadding : 2. ...

jquery方法animate操作图片移动

jquery方法animate操作图片移动相关推荐

最新文章

热门文章