2 u013056785 u013056785 于 2016.01.29 11:48 提问

js如何实现图片从左下飞到右上

图片说明
这个火箭被点击可以飞行
代码如下:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no, adress=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="keywords" content="">
<link type="text/css" rel="stylesheet" href="{:ADDON_PUBLIC_PATH}/shop/css/reset.css?version={$version}" />
<link type="text/css" rel="stylesheet" href="{:ADDON_PUBLIC_PATH}/shop/css/product.css?version={$version}" />
<link type="text/css" rel="stylesheet" href="__CSS__/dialog.css?v={:SITE_VERSION}" />
<title>{$shop_config.title}</title>
</head>
<body>
<!--顶部-->
<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))}">商品评论&nbsp;&nbsp;&nbsp;好评度<span>{$levelPraiseProportion}%</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

4个回答

showbo
showbo   Ds   Rxr 2016.01.29 12:05
已采纳
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>
    #rocket{position:absolute;background:#ccc;left:0;bottom:0;width:100px;height:100px}
</style>
<div id="rocket"></div>
<script>
    $(function () {
        var rocket = $('#rocket')
            , rw = rocket.width()
            , rh = rocket.height()
            , ch = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
            , cw = Math.max(document.body.clientWidth, document.documentElement.clientWidth);

        rocket.animate({ left: cw - rw, top: ch - ch }, 2000, function () { rocket.hide()});
    })
</script>
u013056785
u013056785 回复无聊码农: 恩恩,麻烦你啦,谢谢
2 年多之前 回复
showbo
showbo 回复hellopapapa3: 调用函数啊,自己看代码了。。
2 年多之前 回复
u013056785
u013056785 _system._guide(true)这是为了干嘛呢
2 年多之前 回复
showbo
showbo 回复hellopapapa3: ==?没有==啊,从哪来的?onclick="。。。“是绑定事件用的
2 年多之前 回复
u013056785
u013056785 回复无聊码农: onclick="_system._guide(true)"这一句是什么意思==。确实在js上是个菜鸟
2 年多之前 回复
showbo
showbo 回复hellopapapa3: 什么都能飞,主要是position要为absolute或者fixed(ie6-不支持fixed)
2 年多之前 回复
u013056785
u013056785 采纳啦
2 年多之前 回复
u013056785
u013056785 回复无聊码农: button也能飞吗
2 年多之前 回复
showbo
showbo 回复hellopapapa3: 你见改代码整成一个函数,onclick时调用就行了
2 年多之前 回复
u013056785
u013056785 回复无聊码农: 大神,他这个情况很奇怪是个button属性,图片附在button上的
2 年多之前 回复
u013056785
u013056785 回复无聊码农: 大神,如果我要实现点击再飞該怎么办呢,是在图片上加click吗
2 年多之前 回复
showbo
showbo 回复无聊码农: var rocket = $('#rocket') , rw = rocket.width() , rh = rocket.height() , css1compat = document.compatMode == 'CSS1Compat' , ch = document[css1compat ? 'documentElement' : 'body'].clientHeight , cw = document[css1compat ? 'documentElement' : 'body'].clientWidth; console.log(rw+"|"+rh+"|"+ch+"|"+cw) rocket.animate({ left: cw - rw, bottom: ch - rh }, 2000, function () {/* rocket.hide() */});
2 年多之前 回复
showbo
showbo 回复hellopapapa3: 有用记得采纳。。
2 年多之前 回复
u013056785
u013056785 回复无聊码农: 谢谢大神
2 年多之前 回复
showbo
showbo rocket.animate({ left: cw - rw, bottom: ch - rh }, 2000, function () { rocket.hide() });更正下这句
2 年多之前 回复
showbo
showbo   Ds   Rxr 2016.01.29 15:14

用这个吧。。点击可以上下切换

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<style>
    #rocket{position:fixed;background:#ccc;left:0;bottom:0;width:100px;height:100px}
</style>
<div style="height:2000px"></div>
<div id="rocket" onclick="fireRocket()"></div>
<script>
    function fireRocket() {
        var rocket = $('#rocket')
          , rw = rocket.width()
          , rh = rocket.height()
          , css1compat = document.compatMode == 'CSS1Compat'
          , ch = document[css1compat ? 'documentElement' : 'body'].clientHeight
          , cw = document[css1compat ? 'documentElement' : 'body'].clientWidth
          , up = rocket.css('left') == '0px';
        rocket.animate({ left: up ? cw - rw : 0, bottom: up ? ch - rh : 0 }, 2000, function () {/* 切换图片什么的。。*/ });
    }
</script>
u013056785
u013056785 太感谢了
2 年多之前 回复
u013056785
u013056785   2016.01.29 15:09

图片说明

qq_35777381
qq_35777381   2017.11.09 14:10

get_cover_url是干嘛的?

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
二维数组右上左下遍历
【描述】 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按从左上到右下的对角线顺序遍历整个数组。 <img width="450" height="429" alt="计算机生成了可选文字: 丨 匆 ROW-I COL-I " src="">   【输入】 输入的第一行上有两个整数,依次为row和col。 余下有row行,每行包含col
[土狗之路]coursera C语言进阶习题 二维数组右上左下遍历
编程题#2: 二维数组右上左下遍历 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩。) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按从左上到右下的对角线顺序遍历整个数组。 输入
二维数组右上左下遍历 (Coursera 程序设计与算法 专项课程2 C程序设计进阶 李戈;OpenJudge)
编程题#2: 二维数组右上左下遍历来源: POJ (http://pkuic.openjudge.cn/zz/5)注意: 总时间限制: 1000ms 内存限制: 65536kB描述给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按从左上到右下的对角线顺序遍历整个数组。输入输入的第一行上有两个整数,依次为row和col。余下有row行,每行包含col个整数,构成一个
百练noi21:二维数组右上左下遍历,24:蛇形填充数组
21:二维数组右上左下遍历 查看提交统计提问 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按从左上到右下的对角线顺序遍历整个数组。 输入输入的第一行上有两个整数,依次为row和col。 余下有row行,每行包含col个整数,构成一个二
1.8编程基础之多维数组 21:二维数组右上左下遍历
描述 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按从左上到右下的对角线顺序遍历整个数组。 输入 输入的第一行上有两个整数,依次为row和col。 余下有row行,每行包含col个整数,构成一个二维整数数组。 (注:输入的row和col保证0 输出 按遍历顺序输出每个整数。每个整数占一行。 样例输入 3 4 1 2 4
变换后矩阵右上三角元素和与左下三角元素和可能的最大差值
/*描述 给定一个N行N列的整数矩阵(N 问,调整后的矩阵,右上三角元素和与左下三角元素和可能的最大差值为多少? 输入格式 第一行为正整数N,此后N行,每行N个整数。 输出格式 任意选定两行进行调换后,可能的最大差值 输入样例 3 1 2 3 4 5 6 7 8 9 输出样例 16 提示 将第1行与第3行交换,8+9+6-4-1-2=16*/ 分析:
openjudge 二维数组右上坐下遍历(二维数组)
二维数组右上左下遍历 查看提交统计提问 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按从左上到右下的对角线顺序遍历整个数组。 输入输入的第一行上有两个整数,依次为row和col。 余下有row行,每行包含col个整数,构成一个二维整数
Android:Textview 通过代码设置 Drawable左上右下
Textview设置图片位置: 左上右下 eg:调用方法:public void setCompoundDrawables(@Nullable Drawable left, @Nullable Drawable top, @Nullable Drawable right, @Nullable Drawable bottom) 参数说明:四个参数分别位于TextView 左上右下四...
网格从左下角移动到右上角有多少种路线(动态规划)
在面试中遇到的一个问题,蚂蚁从(m,n)的网格一角爬到对角(不能往回爬),查了一些东西,自己写下自己的一些理解,望大神指点。 从网格的一角爬到对角,有多少中爬法。 理解部分: 将其进行转换,转换为从(m,n)坐标到(0,0)坐标有多少种移动方法。(只能下移,左移) 。 。 。 。 。 。 。 。 。 。 。 。 1 3 6 10 。 。 1 2 3 4 。 。
js 特效 html 特效 文字从左到右出现
js 特效 html 特效 文字从左到右出现 js 特效 html 特效 文字从左到右出现