整合營銷服務商
          
				
          電腦端+手機端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          css3實現(xiàn)的鼠標懸停特效，鼠標懸停給圖片加邊框ht
          
        
           
          
	
	
          
		css3實現(xiàn)的鼠標懸停特效，鼠標懸停給圖片加邊框html頁面前端源碼
          
                        
          家好，今天給大家介紹一款，css3實現(xiàn)的鼠標懸停特效，鼠標懸停給圖片加邊框html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。
          圖1
          鼠標放在圖像上，圖像后面的邊框就會上浮包住圖像（圖2）
          圖2
          源碼完整，需要的朋友可以下載學習（圖3）
          圖3
          本源碼編碼：10191，需要的朋友，訪問下面鏈接后，搜索10191，即可獲取。
          「鏈接」
          家好，今天要跟大家分享的是當鼠標滑過時”圖文動態(tài)顯示“效果的CSS實現(xiàn)方法，下面我們來看下效果圖：
          相對前幾期的內容今天的教程比較簡單，主要知識點還是CSS3中關于動畫屬性的使用，從效果圖中可以看出就是一個簡單的上下移動，因此用到的還是是移動屬性translate。
          1、結構分析：
          該示例主要有四個主體部分，每一部又是由圖片和文字信息兩部分組成，其中文字信息中含有一個標題一段文字和一個超鏈接，因此HTML結構可如下設置：
          2、基本樣式：
          box-sizing: border-box;主要是為了后面給文字信息部分添加樣式（如：添加邊框邊距）時父元素的尺寸不受影響。
          3、單元主體樣式：
          主要設置overflow：hidden;用來隱藏向上移動時圖片溢出部分。
          4、圖片和文字信息設置：
          這里主要注意一點，圖片的position為relative而文字信息部分的position為absolute。
          5、文本樣式設置：
          這里不多贅述，根據(jù)個人喜好隨便搞。
          6、動態(tài)效果設置：
          在此處需要先把文本信息部分向下移動100%的身位【translateY（100%）】配合上面的overflow：hidden實現(xiàn)隱藏，然后為圖片和文本信息部分分別添加鼠標滑過時的動態(tài)效果，分別向上移動一定的距離，最后為每個動畫都添加一個0.4秒的過渡時間transition:transform 0.4s即可。
          易拖拽
          <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft; //拖拽距離
disY=oEvent.clientY-oDiv.offsetTop; //拖拽距離

oDiv.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

oDiv.onmouseup=function ()
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
          程序問題:鼠標拖拽過快,鼠標指針與拖拽div對象脫離
          解決方法:直接給document加事件(因為div對象范圍太小,鼠標移動就與拖拽div對象脫離)
          將oDiv改成document對象
          <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
          程序問題: FF下，空Div拖拽Bug(殘影)
          解決方法: 阻止默認事件
          <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false; //阻止默認事件(拖動殘影)
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
          防止拖出頁面
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
鲁丝片一区二区三区免费|
国产一区二区三区免费视频|
中文无码一区二区不卡αv|
无码精品人妻一区二区三区AV|
亚洲AV无码一区东京热|
一区免费在线观看|
人妻少妇精品视频三区二区一区|
日韩精品人妻一区二区中文八零
|
一区高清大胆人体|
国产在线一区二区杨幂|
一本一道波多野结衣AV一区|
日韩精品成人一区二区三区|
无码欧精品亚洲日韩一区夜夜嗨|
久久精品国产AV一区二区三区|
中文字幕一区二区三区在线不卡|
八戒久久精品一区二区三区
|
国产一区麻豆剧传媒果冻精品|
色婷婷av一区二区三区仙踪林|
精品无码国产一区二区三区AV|
国产一区二区三区乱码|
日韩aⅴ人妻无码一区二区|
一本一道波多野结衣一区|
欧美av色香蕉一区二区蜜桃小说|
日韩中文字幕一区|
亚洲中文字幕久久久一区|
亚洲一区AV无码少妇电影|
在线观看一区二区三区av|
bt7086福利一区国产|
乱码人妻一区二区三区|
黑巨人与欧美精品一区|
国产精品久久亚洲一区二区|
美女视频一区二区|
日韩精品一区二区三区中文字幕|
八戒久久精品一区二区三区|
一区二区三区免费视频播放器
|
免费一区二区三区|
台湾无码一区二区|
中文乱码字幕高清一区二区|
成人丝袜激情一区二区|
波多野结衣精品一区二区三区|
国产福利一区二区在线视频|