圖標線性回歸斜著移動到指定的位置
更新時間：2013年08月16日 18:10:21 作者：
圖標斜著移動到指定的位置如何實現(xiàn)，本文給予了詳細的解決方法，感興趣的朋友可以參考下，希望對大家有所幫助
圖標斜著移動，看代碼了
<!DOCTYPE html >
<html>
<head>
<title>圖標線性回歸移動到指定的位置</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="font-size: 13px;">
<div>
<div style="margin: 30px 0 30px 0;">
<div style="margin: 50px 0 0 500px;"><b id="b">B</b></div>
<div style="margin: 80px 0 0 300px;"><b id="d">D</b></div>
</div>
<div>
<button name="move">move</button>
<button name="reset">reset</button>
</div>
</div>
<!-- OK圖標設置成隱藏浮動 -->
<div id="ok" style="display: none; position: absolute; width: 16px; font-color: white; background-color: red;">OK</div>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
var pb = {left: $("#b").position().left + $("#b").width(), top: $("#b").position().top};//B點位置
var pd = {left: $("#d").position().left + $("#d").width(), top: $("#d").position().top};//D點位置
$("#ok").css({left: pd.left, top: pd.top});//初始將OK放在D點
$("button[name=move]").click(function() {//點擊move按鈕開始從D點移動B點
$("#ok").fadeIn().animate({
left: pb.left,
top: pb.top
}, 1000,function(){//1秒內(nèi)完成動畫，可以設置動畫速度,完了隱藏
$("#ok").fadeOut()
});
});
$("button[name=reset]").click(function() {//點擊reset按鈕回到初始狀態(tài)
$("#ok").hide().css({left: pd.left, top: pd.top});
});
</script>
</body>
</html>
復制代碼 代碼如下:
<!DOCTYPE html >
<html>
<head>
<title>圖標線性回歸移動到指定的位置</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="font-size: 13px;">
<div>
<div style="margin: 30px 0 30px 0;">
<div style="margin: 50px 0 0 500px;"><b id="b">B</b></div>
<div style="margin: 80px 0 0 300px;"><b id="d">D</b></div>
</div>
<div>
<button name="move">move</button>
<button name="reset">reset</button>
</div>
</div>
<!-- OK圖標設置成隱藏浮動 -->
<div id="ok" style="display: none; position: absolute; width: 16px; font-color: white; background-color: red;">OK</div>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
var pb = {left: $("#b").position().left + $("#b").width(), top: $("#b").position().top};//B點位置
var pd = {left: $("#d").position().left + $("#d").width(), top: $("#d").position().top};//D點位置
$("#ok").css({left: pd.left, top: pd.top});//初始將OK放在D點
$("button[name=move]").click(function() {//點擊move按鈕開始從D點移動B點
$("#ok").fadeIn().animate({
left: pb.left,
top: pb.top
}, 1000,function(){//1秒內(nèi)完成動畫，可以設置動畫速度,完了隱藏
$("#ok").fadeOut()
});
});
$("button[name=reset]").click(function() {//點擊reset按鈕回到初始狀態(tài)
$("#ok").hide().css({left: pd.left, top: pd.top});
});
</script>
</body>
</html>
相關文章
這篇文章主要介紹了Jquery 整理元素選取、常用方法一覽表的相關資料,這里整理了相關資料，便于大家查看，需要的朋友可以參考下2016-11-11
jqPlot是一款基于jquery類庫的圖標繪制插件。通過jqPlot可以再網(wǎng)頁中繪制線狀、柱狀、餅狀等多種樣式圖表。而且，jqPlot具有插件可擴展性(Pluggability)，你可以編寫自己的圖表樣式。2011-04-04
這篇文章主要介紹了jquery實現(xiàn)漂亮的二級下拉菜單代碼,涉及jquery鼠標click事件控制頁面class屬性動態(tài)變換效果的切換技巧,非常美觀實用,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了jquery表單驗證插件validation使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jquery-mobile表單的創(chuàng)建方法詳解
這篇文章主要介紹了jquery-mobile表單的創(chuàng)建方法,結合實例形式分析了jquery-mobile插件創(chuàng)建表單的具體操作步驟與各種常見表單元素的創(chuàng)建技巧,需要的朋友可以參考下2016-11-11
$.each是一個通用的迭代函數(shù)，可用于近似地迭代 對象和數(shù)組，這個函數(shù)與$().each是專用用于迭代和執(zhí)行jquery對象函數(shù)2014-03-03
這篇文章主要介紹了jQuery實現(xiàn)表格文本框淡入更改值后淡出效果的實現(xiàn)代碼,代碼簡單易懂，非常不錯，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jquery京東商城雙11焦點圖多圖廣告特效，一個精致的焦點圖會吸引用戶的注意力，讓用戶產(chǎn)生瀏覽網(wǎng)站的興趣至關重要，現(xiàn)在小編推薦給大家一款特別棒的焦點圖，感興趣的小伙伴可以參考下。2015-09-09
下面小編就為大家?guī)硪黄钊肜斫鈐Query之事件移除。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了簡單的jQuery入門指引,jQuery是當今最為流行的JavaScript庫,需要的朋友可以參考下2015-07-07