87,984
社区成员
发帖
与我相关
我的任务
分享关于js实现图片飞行
要实现火箭从左下飞到右上
，之前已经有大神帮我写了可以让图片飞行的代码了，但是现在情况是我在代码的
，加了这段代码，结果图片的button属性不见了，点击了也没有反应。原来图片点击了还有个幕布效果，提示右上方可以分享，但现在全不见了，点击了毫无反应。附上未修改代码
可以让图飞行的代码
，之前已经有大神帮我写了可以让图片飞行的代码了，但是现在情况是我在代码的，加了这段代码，结果图片的button属性不见了，点击了也没有反应。原来图片点击了还有个幕布效果，提示右上方可以分享，但现在全不见了，点击了毫无反应。附上未修改代码
<!--顶部-->
<header class="header">
<a href="javascript:void(0);" class="header-back-btn back"></a>
<h1>详情</h1>
<a href="javascript:void(0);" class="header-car-btn" data-url="{:addons_url('Shop://Index/addCollection',array('token'=>get_token(),'id'=>$info['id']))}"></a>
<!--a href="{:addons_url('Shop://Index/cart',array('token'=>get_token()))}" class="header-car-btn"></a-->
</header><!--header-->
<!--轮播图-->
<section class="pic">
<!--button class="button2" onclick="_system._guide(true)">
</button-->
<ul id="slider">
<foreach name="picArr" item="row" key="k">
<a href="javascript:void(0);"><li><img src="{$row|get_cover_url}" alt=""></li></a>
</foreach>
</ul>
<section class="pic-btn" id="pagenavi">
<foreach name="picArr" item="row" key="k">
<a href="javascript:void(0);" <eq name="k" value="0">class="active"</eq>></a>
</foreach>
</section><!--pic-btn-->
<!--a href="javascript:void(0);" class="collect-btn" data-url="{:addons_url('Shop://Index/addCollection',array('token'=>get_token(),'id'=>$info['id']))}">收藏</a-->
<section name="huojian" id="info">
<if condition="$info.distribution_proportion eq 0">
<p></p>
<else/>
<p class="button2" id="button2" onclick="_system._guide(true)">
<img src="{:ADDON_PUBLIC_PATH}/shop/images/1.png">
</p>
</if>
</section>
</section><!--pic-->
<section class="product">
<ul>
<li>{$info.name}</li>
<li>{$info.desc}</li>
<li>￥{$info.true_price}</li>
<li><span>运费 {$info.mail_price}元</span><!--span>总销<a>{$info.sellnum}</a>笔</span--></li>
</ul>
</section><!--product-->
<!--section class="box-1">
<a href="javascript:void(0);">分销赚钱</a>
</section><!--box-1-->
<!--评论-->
<section class="speak-box">
<header>
<a href="{:addons_url('Shop://Index/evaluationList',array('token'=>get_token(),'id'=>$info['id'],'type'=>0))}">商品评论 好评度<span>{$levelPraiseProportion}%</span> <span>{$newEvaluation.page.count}人评论</span></a>
</header>
<volist name="newEvaluation.list" id="n">
<ul>
<li><div><img src="<if condition="$n.headimgurl eq 0">{:ADDON_PUBLIC_PATH}/shop/images/photo.jpg<else />{$n.headimgurl|get_cover_url}</if>" alt="" /></div><a>{$n.nickname|default="游客"}</a>
<switch name="n.star">
<case value="1"><span></span></case>
<case value="2"><span></span><span></span></case>
<case value="3"><span></span><span></span><span></span></case>
<case value="4"><span></span><span></span><span></span><span></span></case>
<case value="5"><span></span><span></span><span></span><span></span><span></span></case>
</switch>
</li>
<li>{$n.content}</li>
<li>{$n.addtime|date="Y-m-d H:i:s",###} <if condition="$n['color_id'] neq 0">颜色：{:getColorName($n['color_id'])}</if> <if condition="$n['norms_id'] neq 0 and $n['norms_details_id'] neq 0">{:getNormsName($n['norms_id'])}：{:getNormsDetailsName($n['norms_details_id'])}</if></li>
</ul>
</volist>
<a href="{:addons_url('Shop://Index/evaluationList',array('token'=>get_token(),'id'=>$info['id'],'type'=>0))}" class="more-btn">查看更多评价</a>
</section><!--speak-box-->
<!--猜你喜欢-->
<section class="like-box" <if condition="empty($guessYouLike)">style="display:none;"</if>>
<h2>猜你喜欢</h2>
<section class="like-box-1" id="slider1">
<foreach name="guessYouLike" item="row">
<section class="slide">
<foreach name="row" item="rows">
<ul>
<li><a href="{:addons_url('Shop://Index/productinfo',array('token'=>get_token(),'id'=>$rows['id']))}"><img src="{$rows.head_img|get_cover_url}" alt="" /></a></li>
<li>{$rows.name|msubstr=###,0,20,"utf-8",false}</li>
<li style="font-size:0.9rem;">￥{$rows.true_price}<!--a href="{:addons_url('Shop://Index/productinfo',array('token'=>get_token(),'id'=>$rows['id']))}">立即购买</a--></li>
</ul>
</foreach>
</section><!--slide-->
</foreach>
</section><!--like-box-1-->
<section class="like-box-nav" id="pagenavi1">
<foreach name="guessYouLike" item="row" key="k">
<a href="javascript:void(0);" <eq name="k" value="0">class="active"</eq>></a>
</foreach>
</section><!--like-box-nav-->
</section><!--like-box-->
<a href="{:addons_url('Shop://Index/productDetails',array('token'=>get_token(),'id'=>$info['id']))}" class="a-btn">点击查看图文详情</a>
<!--
<section class="footer">
<dl>
<dd>15天退换货</dd
><dd>全场包邮促销</dd>
</dl>
</section>
-->
<section class="box-2">
<a href="tel:4000058002">联系客服</a>
</section><!--box-2-->
<footer class="footer-btn">
<dl>
<dd><a href="javascript:void(0);" data-action="car">加入购物车</a></dd
><dd><a href="javascript:void(0);" data-action="buy">立即购买</a></dd>
</dl>
</footer><!--footer-btn-->
<!--分销特效 点击显示分享给好友-->
<script type="text/javascript">
var _system={
$:function(id){return document.getElementById(id);},
_client:function(){
return {w:document.documentElement.scrollWidth,h:document.documentElement.scrollHeight,bw:document.documentElement.clientWidth,bh:document.documentElement.clientHeight};
},
_scroll:function(){
return {x:document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft,y:document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop};
},
_cover:function(show){
if(show){
this.$("cover").style.display="block";
this.$("cover").style.width=(this._client().bw>this._client().w?this._client().bw:this._client().w)+"px";
this.$("cover").style.height=(this._client().bh>this._client().h?this._client().bh:this._client().h)+"px";
}else{
this.$("cover").style.display="none";
}
},
_guide:function(click){
this._cover(true);
this.$("guide").style.display="block";
this.$("guide").style.top=(_system._scroll().y+5)+"px";
window.onresize=function(){_system._cover(true);_system.$("guide").style.top=(_system._scroll().y+5)+"px";};
if(click){_system.$("cover").onclick=function(){
_system._cover();
_system.$("guide").style.display="none";
_system.$("cover").onclick=null;
window.onresize=null;
};}
},
_zero:function(n){
return n<0?0:n;
}
}
</script>
<!--遮罩层-->
<div class="cover"></div>
<div id="cover"></div>
<div id="guide"><img src="{:ADDON_PUBLIC_PATH}/shop/images/guide1.png"></div>
<!--加入购物车弹层-->
<section class="car-tc">
<ul>
<li><img src="{$info.head_img|get_cover_url}" alt="" /></li>
<li>{$info.name}</li>
<li>￥{$info.true_price}</li>
</ul>
<dl>
<if condition="!empty($color_arr)">
<dd class="dd-color"><span>主要颜色</span>
<volist name="color_arr" id="row">
<a href="{$color_url[$row['id']]}" <eq name="row['id']" value="$info['color_id']">class="active"</eq>>{$row.name}</a>
</volist>
</dd>
</if>
<if condition="!empty($norms_details_arr)">
<dd class="dd-style"><span>{$norms_name}</span>
<volist name="norms_details_arr" id="row">
<a href="{$norms_details_url[$row['id']]}" <eq name="row['id']" value="$info['norms_details_id']">class="active"</eq>>{$row.name}</a>
</volist>
</dd>
</if>
<dd class="dd-num"><span>购买数量</span><div><a href="javascript:void(0);" class="min">-</a><span class="num">1</span><a href="javascript:void(0);" class="max">+</a></div></dd>
<input type="hidden" name="products_id" id="products_id" value="{$info['id']}" />
<input type="hidden" name="ajaxAddCartUrl" id="ajaxAddCartUrl" value="{:addons_url('Shop://Cart/inCart',array('token'=>get_token()))}" />
<input type="hidden" name="cartUrl" id="cartUrl" value="{:addons_url('Shop://Index/cart',array('token'=>get_token()))}" />
</dl>
<input type="button" value="确定" id="ok_btn" />
</section><!--car-tc-->
<div class="cover_1"></div>
<script type="text/javascript" src="{:ADDON_PUBLIC_PATH}/shop/js/jquery-1.11.1.min.js?version={$version}"></script>
<script type="text/javascript" src="__JS__/m/dialog.js?v={:SITE_VERSION}"></script>
<script type="text/javascript" src="{:ADDON_PUBLIC_PATH}/shop/js/jquery.cycle.all.js?version={$version}"></script>
<script type="text/javascript" src="{:ADDON_PUBLIC_PATH}/shop/js/touchslider.dev.js?version={$version}"></script>
<script type="text/javascript" src="{:ADDON_PUBLIC_PATH}/shop/js/product.js?version={$version}"></script>
<include file="./Addons/Shop/View/default/Index/publicShare.html" />
</body>
</html>可以让图飞行的代码
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<style>
.button2 img{ position:absolute; width:40%; height:40%; font-size:16px; color:#000000; margin-top:-40%;}
</style>
<div id="button2" onclick="fireRocket()"></div>
<script>
function fireRocket() {
var button2 = $('#button2')
, rw = button2.width()
, rh = button2.height()
, css1compat = document.compatMode == 'CSS1Compat'
, ch = document[css1compat ? 'documentElement' : 'body'].clientHeight
, cw = document[css1compat ? 'documentElement' : 'body'].clientWidth
, up = button2.css('left') == '0px';
button2.animate({ left: up ? cw - rw : 0, bottom: up ? ch - rh : 0 }, 2000, function () { button2.hide() });
}
</script>
...全文
请发表友善的回复…
发表回复
qq_35296073 2017-04-27
- 打赏
- 举报
后面的button.hide（）执行了，火箭消失了[/quote]
超级不错！！！
hellopapapa3 2016-02-06
- 打赏
- 举报
谢谢大哥，解决了，给照片加个style left=0 就可以了
杨小事er 2016-02-01
- 打赏
- 举报
就是不会改，因为没接触过js[/quote]
给你的不用js，就是css3实现的
hellopapapa3 2016-02-01
- 打赏
- 举报
就是不会改，因为没接触过js
杨小事er 2016-02-01
- 打赏
- 举报
css3动画，加一个click事件添加样式。
关键点在父容器的position:relative，火箭所在层的position:absolute，以及根据火箭的尺寸以及父容器的尺寸计算top,left,right这3个值。
具体的看着上面代码自己改下样式呗。
杨小事er 2016-02-01
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width,user-scalable=no" name="viewport" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
</head>
<body>
<style>
.con{
position:relative;
border:1px solid #000;
height:400px;
width:400px;
}
.inner{
position:absolute;
width:100px;
height:100px;
border:1px solid red;
top:300px;
left:0;
}
.animate{
animation: myfirst .5s linear 0s 1 normal forwards;
-moz-animation: myfirst .5s linear 0s 1 normal forwards ; /* Firefox */
-webkit-animation: myfirst .5s linear 0s 1 normal forwards; /* Safari 和 Chrome */
-o-animation: myfirst .5s linear 0s 1 normal forwards;
}
@keyframes myfirst
{
0% {top:300px;left:0;}
100% {top:0;right:0;left:300px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {top:300px;left:0;}
100% {top:0;right:0;left:300px;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {top:300px;left:0;}
100% {top:0;right:0;left:300px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {top:300px;left:0;}
100% {top:0;right:0;left:300px;}
}
</style>
<div class="con">
<div class="inner" onclick="this.className='inner animate'"></div>
</div>
</body>
</html>hellopapapa3 2016-02-01
- 打赏
- 举报
输出了，11111
hellopapapa3 2016-02-01
- 打赏
- 举报
后面的button.hide（）执行了，火箭消失了
hellopapapa3 2016-02-01
- 打赏
- 举报
可以的
斯洛文尼亚旅游 2016-02-01
- 打赏
- 举报
<p class="button2" id="button2" onclick="_system._guide(true);alert(11111);setTimeout(function(){fireRocket()},1000)">
你加红色那句看执行输出11111没有，怕是你前面这个函数执行错误了
hellopapapa3 2016-02-01
- 打赏
- 举报
大哥，谢谢您，现在情况是这样，点击了先出现幕布，图片不飞行，过了1ms后自动消失[/quote]
你要先执行_system._guide在执行fireRocket效果？那你那个函数支持回调没有？没有智能用计时器延时执行fireRocket
<p class="button2" id="button2" onclick="_system._guide(true);setTimeout(function(){fireRocket()},1000)">[/quote]回调了
hellopapapa3 2016-02-01
- 打赏
- 举报
有可能是速度的原因，怎么修改图片飞行的速度呢？
hellopapapa3 2016-02-01
- 打赏
- 举报
大哥，谢谢您，现在情况是这样，点击了先出现幕布，图片不飞行，过了1ms后自动消失[/quote]
你要先执行_system._guide在执行fireRocket效果？那你那个函数支持回调没有？没有智能用计时器延时执行fireRocket
<p class="button2" id="button2" onclick="_system._guide(true);setTimeout(function(){fireRocket()},1000)">[/quote]大哥，现在的情况是图片都没有飞行，直接就消失了，我先飞在执行_system._guide的效果
斯洛文尼亚旅游 2016-02-01
- 打赏
- 举报
大哥，谢谢您，现在情况是这样，点击了先出现幕布，图片不飞行，过了1ms后自动消失[/quote]
你要先执行_system._guide在执行fireRocket效果？那你那个函数支持回调没有？没有智能用计时器延时执行fireRocket
<p class="button2" id="button2" onclick="_system._guide(true);setTimeout(function(){fireRocket()},1000)">
hellopapapa3 2016-02-01
- 打赏
- 举报
有效果的，但是加到图片上就没了
hellopapapa3 2016-02-01
- 打赏
- 举报
大哥，谢谢您，现在情况是这样，点击了先出现幕布，图片不飞行，过了1ms后自动消失
小小农民 2016-02-01
- 打赏
- 举报
点击没有反应应该是点击的js中出现错误，不执行后面的代码，可以用alert或在谷歌上调试看看哪里错了。
还有幕布的效果也可以放在点击完的后面。
飞行的js代码怎么又这么多"逗号"?这里的代码多alert下看看呢
斯洛文尼亚旅游 2016-02-01
- 打赏
- 举报
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<style>
.button2 img{ position:absolute; width:40%; height:40%; font-size:16px; color:#000000; margin-top:-40%;}
</style>
<script>
function fireRocket() {
var button2 = $('#button2')
, rw = button2.width()
, rh = button2.height()
, css1compat = document.compatMode == 'CSS1Compat'
, ch = document[css1compat ? 'documentElement' : 'body'].clientHeight
, cw = document[css1compat ? 'documentElement' : 'body'].clientWidth
, up = button2.css('left') == '0px';
button2.animate({ left: up ? cw - rw : 0, bottom: up ? ch - rh : 0 }, 2000, function () { button2.hide() });
}
</script>
<p class="button2" id="button2" onclick="_system._guide(true);fireRocket()">
<img src="{:ADDON_PUBLIC_PATH}/shop/images/1.png">
</p>
