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