杞嚜缃戠粶锛屽彲鐩存帴copy浣跨敤銆? 鍦ㄥ疄闄呯殑寮€鍙戣繃绋嬩腑锛屽杩囦笉鎯虫柊鍑烘槑缁嗙殑椤甸潰锛屽氨鍙互鐢╰itle鐨勫睘鎬ф妸鏄庣粏淇℃伅閮借榧犳爣鎮诞鐨勬椂鍊欐樉绀哄嚭鏉ワ紝浣唗itle灞炴€ф樉绀哄嚭鏉ュ彲鑳戒細褰卞搷鏈潵椤甸潰鐨勪俊鎭睍绀猴紙瑕嗙洊鍘熸湁淇℃伅锛夛紝璇风粨鍚堝疄闄呯殑鍦烘櫙杩涜浣跨敤銆? 浠ｇ爜濡備笅锛?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>JS鎺у埗TITLE鎮仠鏁堟灉 - veryhuo.com</title>
<script type="text/javascript">
/**
* className 绫诲悕
* tagname HTML鏍囩鍚嶏紝濡俤iv,td,ul绛?* @return Array 鎵€鏈塩lass瀵瑰簲鏍囩瀵硅薄缁勬垚鐨勬暟缁?* @example
<div class="abc">abc</div>
var abc = getClass('abc');
for(i=0;i<abc.length;i++){
abc[i].style.backgroundColor='red';
}
*/
function getClass(className,tagname) {
//tagname榛樿鍊间负'*'锛屼笉鑳界洿鎺ュ啓鎴愰粯璁ゅ弬鏁版柟寮廹etClass(className,tagname='*')锛屽惁鍒橧E涓嬫姤閿?if(typeof tagname == 'undefined') tagname = '*';
if(typeof(getElementsByClassName) == 'function') {
return getElementsByClassName(className);
}else {
var tagname = document.getElementsByTagName(tagname);
var tagnameAll = [];
for(var i = 0; i < tagname.length; i++) {
if(tagname[i].className == className) {
tagnameAll[tagnameAll.length] = tagname[i];
}
}
return tagnameAll;
}
}
/**
* JS瀛楃鍒囧壊鍑芥暟
* @params string 鍘熷瓧绗︿覆
* @params words_per_line 姣忚鏄剧ず鐨勫瓧绗︽暟
*/
function split_str(string,words_per_line) {
//绌轰覆锛岀洿鎺ヨ繑鍥?if(typeof string == 'undefined' || string.length == 0) return '';
//鍗曡瀛楁暟鏈瀹氾紝闈炴暟鍊硷紝鍒欏彇榛樿鍊?0
if(typeof words_per_line == 'undefined' || isNaN(words_per_line)){
words_per_line = 50;
}
//鏍煎紡鍖栨垚鏁村舰鍊?words_per_line = parseInt(words_per_line);
//鍙栧嚭i=0鏃剁殑瀛楋紝閬垮厤for寰幆閲屾崲琛屾椂澶氭鍒ゆ柇i鏄惁涓?
var output_string = string.substring(0,1);
//寰幆鍒嗛殧瀛楃涓?for(var i=1;i<string.length;i++) {
//濡傛灉褰撳墠瀛楃鏄瘡琛屾樉绀虹殑瀛楃鏁扮殑鍊嶆暟锛岃緭鍑烘崲琛?if(i%words_per_line == 0) {
output_string += "<br/>";
}
//姣忔鎷煎叆涓€涓瓧绗?output_string += string.substring(i,i+1);
}
return output_string;
}
/**
* 榧犳爣鎮仠鏄剧ずTITLE
* @params obj 褰撳墠鎮仠鐨勬爣绛?*
*/
function titleMouseOver(obj,event,words_per_line) {
//鏃燭ITLE鎮仠锛岀洿鎺ヨ繑鍥?if(typeof obj.title == 'undefined' || obj.title == '') return false;
//涓嶅瓨鍦╰itle_show鏍囩鍒欒嚜鍔ㄦ柊寤?var title_show = document.getElementById("title_show");
if(title_show == null){
title_show = document.createElement("div"); //鏂板缓Element
document.getElementsByTagName('body')[0].appendChild(title_show); //鍔犲叆body涓?var attr_id = document.createAttribute('id'); //鏂板缓Element鐨刬d灞炴€?attr_id.nodeValue = 'title_show'; //涓篿d灞炴€ц祴鍊?title_show.setAttributeNode(attr_id); //涓篍lement璁剧疆id灞炴€?var attr_style = document.createAttribute('style'); //鏂板缓Element鐨剆tyle灞炴€?attr_style.nodeValue = 'position:absolute;' //缁濆瀹氫綅
+'border:solid 1px #999999; background:#EDEEF0;' //杈规銆佽儗鏅鑹?+'border-radius:2px;box-shadow:2px 3px #999999;' //鍦嗚銆侀槾褰?+'line-height:18px;' //琛岄棿璺?+'font-size:12px; padding: 2px 5px;'; //瀛椾綋澶у皬銆佸唴闂磋窛
try{
title_show.setAttributeNode(attr_style); //涓篍lement璁剧疆style灞炴€?}catch(e){
//IE6
title_show.style.position = 'absolute';
title_show.style.border = 'solid 1px #999999';
title_show.style.background = '#EDEEF0';
title_show.style.lineHeight = '18px';
title_show.style.fontSize = '18px';
title_show.style.padding = '2px 5px';
}
}
//瀛樺偍骞跺垹闄ゅ師TITLE
document.title_value = obj.title;
obj.title = '';
//鍗曡瀛楁暟鏈瀹氾紝闈炴暟鍊硷紝鍒欏彇榛樿鍊?0
if(typeof words_per_line == 'undefined' || isNaN(words_per_line)){
words_per_line = 50;
}
//鏍煎紡鍖栨垚鏁村舰鍊?words_per_line = parseInt(words_per_line);
//鍦╰itle_show涓寜姣忚闄愬畾瀛楁暟鏄剧ず鏍囬鍐呭锛屾ā鎷烼ITLE鎮仠鏁堟灉
title_show.innerHTML = split_str(document.title_value,words_per_line);
//鏄剧ず鎮仠鏁堟灉DIV
title_show.style.display = 'block';
//鏍规嵁榧犳爣浣嶇疆璁惧畾鎮仠鏁堟灉DIV浣嶇疆
event = event || window.event; //榧犳爣銆侀敭鐩樹簨浠?var top_down = 15; //涓嬬Щ15px閬垮厤閬洊褰撳墠鏍囩
//鏈€宸﹀€间负褰撳墠榧犳爣浣嶇疆 涓?body瀹藉害鍑忓幓鎮仠鏁堟灉DIV瀹藉害鐨勬渶灏忓€硷紝鍚﹀垯灏嗗彸绔鑷撮伄鐩?var left = Math.min(event.clientX,document.body.clientWidth-title_show.clientWidth);
title_show.style.left = left+"px"; //璁剧疆title_show鍦ㄩ〉闈腑鐨刋杞翠綅缃€?title_show.style.top = (event.clientY + top_down)+"px"; //璁剧疆title_show鍦ㄩ〉闈腑鐨刌杞翠綅缃€?}
/**
* 榧犳爣绂诲紑闅愯棌TITLE
* @params obj 褰撳墠鎮仠鐨勬爣绛?*
*/
function titleMouseOut(obj) {
var title_show = document.getElementById("title_show");
//涓嶅瓨鍦ㄦ偓鍋滄晥鏋滐紝鐩存帴杩斿洖
if(title_show == null) return false;
//瀛樺湪鎮仠鏁堟灉锛屾仮澶嶅師TITLE
obj.title = document.title_value;
//闅愯棌鎮仠鏁堟灉DIV
title_show.style.display = "none";
}
/**
* 鎮仠浜嬩欢缁戝畾
* @params objs 鎵€鏈夐渶瑕佺粦瀹氫簨浠剁殑Element
*
*/
function attachEvent(objs,words_per_line){
if(typeof objs != 'object') return false;
//鍗曡瀛楁暟鏈瀹氾紝闈炴暟鍊硷紝鍒欏彇榛樿鍊?0
if(typeof words_per_line == 'undefined' || isNaN(words_per_line)){
words_per_line = 50;
}
for(i=0;i<objs.length;i++){
objs[i].onmouseover = function(event){
titleMouseOver(this,event,words_per_line);
}
objs[i].onmouseout = function(event){
titleMouseOut(this);
}
}
}
// Downloads By http://www.veryhuo.com
//鍒濆鍖栵紝褰撻〉闈nload鐨勬椂鍊欙紝瀵规墍鏈塩lass="title_hover"鐨勬爣绛剧粦瀹歍ITLE鎮仠浜嬩欢
window.onload = function(){
attachEvent(getClass('title_hover'),18); //琛屽瓧鏁拌瀹氫负18
}
</script>
</head>
<body>
<style>
tr{float:left; margin:0 50px;}
</style>
<table>
<tr>
<td title="杩欎釜鏄粯璁ょ殑TITLE杩欎釜鏄粯璁ょ殑TITLE杩欎釜鏄粯璁ょ殑TITLE杩欎釜鏄粯璁ょ殑TITLE杩欎釜鏄粯璁ょ殑TITLE杩欎釜鏄粯璁ょ殑TITLE">榧犳爣鎮仠[鍘熺敓鐗堟湰]</td>
</tr>
<tr>
<td title="杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE"
慰nm慰use慰ver="titleMouseOver(this,event,15);" 慰nm慰use慰ut="titleMouseOut(this);">榧犳爣鎮仠[鐩存帴璋冪敤鍑芥暟鐗堟湰,璁惧畾琛屽瓧鏁癩</td>
</tr>
<tr>
<td class="title_hover" title="ABCTesterABCTesterABCTesterABCTesterABCTesterABCTesterABCTester">榧犳爣鎮仠[class鎺у埗鐗堟湰]</td>
</tr>
<tr>
<td title="杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE杩欎釜鏄疛S瀹炵幇鎮仠鐨凾ITLE"
慰nm慰use慰ver="titleMouseOver(this,event);" 慰nm慰use慰ut="titleMouseOut(this);">榧犳爣鎮仠[鐩存帴璋冪敤鍑芥暟鐗堟湰,榛樿琛屽瓧鏁癩</td>
</tr>
</table>
</body>
</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">濡備笉鑳芥樉绀烘晥鏋滐紝璇锋寜Ctrl+F5鍒锋柊鏈〉銆?lt;/div>
聽
鏈€鍚庢晥鏋滃浘:
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)