当前位置: 首页>Python>正文

鼠標滑過顯示圖片大圖效果

鼠標滑過顯示圖片大圖效果

描寫敘述:

當用戶將鼠標放到 圖片上時。顯示圖片的大圖。

效果圖:


說明:

用到了mouseover、mouseout、mousemove三個事件。分別表示鼠標滑過圖片、鼠標移除圖片、鼠標在圖片上移動三個事件。

對于mouserover事件。做下面幾件事:

獲取原標題,并將標題置為空,防止title和提示框同一時候出現。

創建提示框對象,并將圖片地址和title放入當中顯示。

設置該提示框的位置并顯示。

對于mouseout做下面幾件事情:

將title還原,預備下次使用。

移除提示框

對于mousemove,我們須要動態的調整提示框的位置。

由于還沒看到動畫那一塊,所以動畫處理的不是太好,以后在優化吧。

完整代碼:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">.tooltip{display:inline-block;margin-left:50px;}.tp{color:red;}
</style>
</head><body>
<div style="margin-left:120px; float:left"><div class="tooltip">
<img src="./image/1.jpg" width="200px" title="二尾又旅——人柱力二位由木人">
</div><div class="tooltip"> 
<img src="./image/2.jpg" width="200px" title="九尾九喇嘛——人柱力漩渦鳴人">
</div><div class="tooltip">
<img src="./image/3.jpg" width="200px" title="八尾牛鬼——人柱力奇拉比">
</div><div class="tooltip">
<img src="./image/4.jpg" width="200px" title="六尾犀犬——人柱力羽高">
</div></div>
</body>
<script type="text/javascript">$(".tooltip img").mouseover(function(e){this.Mytitle = this.title;this.title = ""; var $tooltip = "<div id='tooltip'><img src='"+this.src+"' width='70%'><br/><p class='tp'>"+this.Mytitle+"</p></div>";$("body").append($tooltip);	//加入到頁面中$("#tooltip").css({"top":e.pageY+"px","left":e.pageX+"px","position":"absolute"}).show("fast");	//設置x坐標和y坐標,并顯示}).mouseout(function(){this.title = this.Mytitle;$("#tooltip").remove();	//將該div移除}).mousemove(function(){$("#tooltip").css({"top":e.pageY+"px","left":e.pageX+"px",});});
</script>
</html>



https://www.nshth.com/python/326366.html
>

相关文章:

  • pygame外星人入侵,python外星人入侵小游戲
  • 用python入侵別人手機,python外星人入侵游戲圖片_Python外星人入侵游戲編程完整版
  • 誰是外星人游戲,20_外星人游戲項目03——
  • python游戲腳本開發,python 外星人游戲怎么打開_Python外星人入侵游戲開發—創建游戲窗口
  • 用python入侵別人手機,python小游戲----外星人入侵
  • python游戲腳本開發,python 外星人游戲下載大全_【Python】Python制作外星人入侵小游戲
  • python播放聲音模塊,python外星人入侵添加音效_python外星人入侵游戲打包
  • python飛機大戰源碼,基于pygame的飛船大戰外星人游戲
  • python 外星人入侵游戲 學習總結 以及完整代碼
  • 有外星人入侵嗎,python外星人入侵游戲代碼_python外星人入侵 游戲源碼
  • python飛機大戰源碼,python項目——外星人入侵游戲
  • 純python開發的大型游戲,Python之外星人游戲(帶源碼和圖片資源)項目
  • python編程書籍推薦,培訓python排行榜
  • bilibili播放量排行榜,b站每日排行榜爬蟲
  • python爬蟲爬取網頁表格數據,python爬蟲爬取歌曲_python爬蟲實戰:爬取全站小說排行榜
  • 爬蟲爬取網站之家,【Python爬蟲】用Python爬取娛樂圈排行榜數據
  • 可以用python寫網頁嗎,有關python的比賽_用 Python 寫一個 Kaggle 比賽排行榜的爬蟲
  • python django框架,python開源框架排行_Python開源項目最新月榜TOP 10
  • 用python刷網頁瀏覽量,用Python獲取公眾號閱讀數、點贊數。
  • 用python做一個簡單的游戲,python有什么好玩的書_史上最全的Python書排行榜|你想知道的都在這里
  • python庫大全一覽,總結!Github年度最強Python庫排行榜
  • python b站 排行_Python爬蟲抓取B站小視頻排行榜,新手也可以跟著做哦!
  • ubuntu運行安卓app,ubuntu AndroiStudio 中 外設(手機、平板) 無法使用
  • ad軟件怎么將原理圖生成pcb,AD20怎樣生成PCB文件??
  • 基于python的影評數據分析,python爬取《你好, 李煥英》豆瓣評論數據
  • 測試顯卡性能的工具,技嘉顯卡性能測試軟件,你好六啊!GTX 1660 Ti深度測試:升吧
  • 捕獲異常的方法有,Scala系列20:Scala中異常捕獲與拋出異常
  • 通過thread類創建線程,【0805作業】繼承Thread類創建線程,輸出20次數字,“你好”,線程名
  • ip靜態,Centos7 配置靜態 IP 地址
  • ip靜態,Centos7 安裝,配置靜態IP