同时我这人可以容忍任何人无视在下的问题,这是您的权利,我又没交钱,您又不是老师,当然没有义务回答在下的任何问题!
可是我又特讨厌+鄙视一类人,不想帮忙还说他妈的一堆道貌岸然的话,浪费大家的时间,真是恶心!
----------------------------------------------------------------------------------------
好了,吐了一些牢骚,现在回到正题!
jQuery Sweet Titles 演示效果
http://zou.lu/about/ 这位站长说是它介绍给leeiio!我觉得他的色彩搭配效果更漂亮!
http://leeiio.me/sweet-titles-for-jquery/
因为这些站长都是专业户,所以很多步骤并未写的很详实,也正因为这样,都不知道往哪里放!
后来又看到一片介绍的Sweet Titles ,跑去问那位站长具体在哪个位置添加或替换代码,某人对我说要讲几本书才能讲明白,真会装B!
╭━━━━━━━╮
│ |||│ │
│ ━━ ﹏ ━━ │
╰━━━━━━━╯
Sweet Titles我在baiduGoogle看了几百篇文章,中文的基本是你copy 我的,我copy 你的,介绍都差不多!
后来跑去英文网站上找资料,才知道人家05年就在玩了,这就是差距啊。
最先找到的是 dustindiaz.com/sweet-titles/ 这篇文章,然后我就按照上面文章方法操作,怎么实验就是不行,不知道是不是作者说的他那个脚本过期造成的!
同时也实验过leeiio的脚本和某人的脚本,还是不行,哎,没学PHP真麻烦啊!
昨晚 http://zzx8.com/html/c15545.html【PS,这网站有点流氓,点本地高速下载
下载会让你下FlashGet,你点重庆电信下载
就是了】 下了一本<<jQuery基础教程>>(PDF)+随书源码,外加官方的介绍docs.jquery.com/How_jQuery_Works ,一直研究到深夜3点,实验了七八套皮肤,虽然明白了工作方式{还没理解原理},知道了怎么添加,还是没能得到满意的效果!
步骤:
1、先到官方下载http://code.jquery.com/jquery-1.4.2.min.js【文件名可以任意,如果只是想实现SweetTitles功能,早期版本也能实现,而且体积更小】
2、复制下面的代码保存为SweetTitles.js【文件名可以任意取,最好是一看就知道,就像不同网管维护Linux服务器约定俗成保存安装路径一样!】
代码: 全选
var sweetTitles = {
x : 10,
y : 20,
tipElements : "a",
init : function() {
$(this.tipElements).mouseover(function(e){
this.myTitle = this.title;
this.myHref = this.href;
this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref); // url 超过 30 个字符的部分用 ... 代替
this.title = "";
var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
$('body').append(tooltip);
$('#tooltip')
.css({
"opacity":"0.8", // 0.8 为透明度可自行根据喜好调整数字
"top":(e.pageY+20)+"px",
"left":(e.pageX+10)+"px"
}).show('fast');
}).mouseout(function(){
this.title = this.myTitle;
$('#tooltip').remove();
}).mousemove(function(e){
$('#tooltip')
.css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+10)+"px"
});
});
}
};
$(function(){
sweetTitles.init();
});
3、打开usr hemesdefaultheader.php
在<head><#/head>之间添加,虽然也看到过说是在<body><#/body>之间添加,但我试过了不行,但不保证在<body><#/body>之间添加无效就一定是错的,我也是在学习中!
代码: 全选
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="SweetTitles.js"></script>
</head>
英文网站上也有人介绍使用http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
代码: 全选
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
这是Google官方托管的,说是可以利用Google的CDN的全称是Content Delivery Network,提升速度,我没用过
WordPress,但知道有一个利用Google快照减少自己网站连结请求和流量的插件,你可以理解为这种功能!
但也有老外不推荐这种方法,用哪种,各位朋友自己选吧,我只是将自己看到的学到介绍给大家而已!
src=#"这个路径具体放在哪里,需要自己修改,上面的演示是放在跟目录,既install.php同级目录"
不建议直接放在 usr hemes你的主题 里,因为在我实验过程中,换主题的时候,又要复制来复制去,还要改路径!
所以可以你可以在根目录新建一个《JS》的文件夹将上面的代码放进去,路径就要改成下面这种
代码: 全选
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/SweetTitles.js"></script>
</head>
4、将下面的代码复制到usr hemesdefaultstyle.css 里,放在最后一段就可以了,不用去掉注释{给和我一样的网页生手提示}。
代码: 全选
#tooltip {
position: absolute;
z-index: 1000;
max-width: 250px; /*气泡窗口最大宽度.*/
word-wrap: break - word;
background: #000; /*气泡窗口背景颜色,可以到SweetTitles.js修改透明度达到更美观的效果.*/
text-align: left;
min-height: 1em;
padding: 3px; /*对象四边的补丁边距均,具体效果可以参考zou.lu/about/有一个白色边框.*/
}
#tooltip p {
color: #fff; /*字体颜色.*/
font: 12px 'Microsoft YaHei', /*这个不用我说了吧.*/
Arial,
Tahoma,
Sans-Serif;
}
#tooltip p em {
display: block;
margin-top: 1px;
color: #f70; /*超链接地址的颜色.*/
font-style: normal
}
-------------------------------------------------------------------------------------------
实验验报告
实验主题:jQuery Sweet Titles 应用!
作业环境:X86, VMware Workstation, XPSP3, WMAP, Typecho,jQuery, Notepad++, IE6, Firefox,
知识要点:抱歉,我连HTML都不会!总结不了,希望不要见笑!
实验内容及步骤:见上,不再复述。
实验小结:按照实验方法操作,可以看到jQuery Sweet Titles ,但不知道为什么只能显示超链接,而不能一并显示链接标题? 而且进入一片文章后jQuery Sweet Titles 效果又消失了!
在操作环境与操作步骤同样的前提下,不同皮肤无法达到jQuery Sweet Titles 效果!
鉴于本人并无网页和PHP编程知识,我目前通过自己的学习只能达到以上效果。
如果有哪位朋友愿一同交流指导,分项经验的话,您可以参与本帖讨论!
谢谢!
-------------------------------------------------------------------------------------------
好了,到这里了,就到这里了,休息,休息一下!只睡了4个小时,囧!
-------------------------------------------------------------------------------------------
jQuery Sweet Titles [attachment=2858,162]