知道这已经有很多人做了教程
不过MM提出了请求
为了表示诚意
所以自己也写了一篇 =)
I know that many people had to do this tutorial
But have a pretier made a request about this
Gesture of goodwill
I'll make a tutorial by myself =)
点它/Click: 
中文/Chiness:
① 信息中心 --> 设计 --> 修改HTML
② 用Ctrl+F找以下代码:
]]></b:skin>③ 在]]></b:skin>的上面放以下代码
</style>④ 记得图片网址要换哦!!
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<img src="图片网址"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>
⑤ 若要把图片放在正中央，就再一次用Ctrl+F找以下代码
body {⑥ 在body {的上面放以下代码
.input {⑦ 橙色 - 可以调你要你位置。数字越大就会往下移。
text-align: center;
margin-top: 100px;
}
⑧ 先预览后储存!!
完成!!
祝你好运!!
英文/English:
① Dashboard --> Design --> Edit HTML
② Using Ctrl+F to find out the code below:
]]></b:skin>③ Paste the code below above ]]></b:skin>
</style>④ Remember that you should change the Picture Direct Link!!
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<img src="Picture Direct Link"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>
⑤ If you want to put the picture at the center,then you gonna use Ctrl+F again to find out the code below
body {⑥ Paste the code below above body {
.input {
text-align: center;
margin-top: 100px;
}
⑦ Orange - You can change the position by yourself.The greater number,the picture will move down
⑧ PREVIEW first before SAVE!!
Done!!
Wish you good luck!!
Creditor:Sunshine's Story
链接我/Link Me
19 Oreo ♥:
怎麼弄了、我的關注者全都不見了呢?
@偉愛莉 不是不见吧？只是在部落格里不能显示出来而已，对吗？
为什么我的不能？
@♥ JAHNESSA♥ 是吗？很多人都能用呀=)
这是弄在旧模板还是新的吖？
@❤ PAR|SA LEE ❤ 都可以哟 =)
那个body的步骤，放了，他就出现很多大个字，最后出现什么error的
@♥ JAHNESSA♥ 你代码放错地方了吧？你是放在/* Content的上面对吗？是放在body {的上面..
对哦，我放在body的上面，他就不能显示了:(
还有很奇怪的是，为什么放了code，就不能放其他了呢？？完全显示不出来:((
@♥ JAHNESSA♥ 那我也不知道是什么问题了，你是Preview了有这种情况，还是Save好过后也是有同样的问题？你是说什么东西显示不出来？
@♥ JAHNESSA♥ 因为有些人是Preview了会有这种情况，Save了之后就没有问题了..
我也弄不到呢 , save 不到诶
对啊，我是preview的时候，就出现很大的字体:(
要找到哪里的 body { ?
还有要放在 ]]> 的前面还是上面? - -
能不能 printscreen 你放这些 code 在你的 html 那里的位置让我们看?
抱歉。
我的弄到有点怪怪了。
很乱。
可以帮我吗？
為什麼我的關注者全都沒了 ? ><
为什么我copy不到T^T
@tze wєчч怎么会Copy不到呢??本部落的右键是封锁的哦，要用Ctrl+C来Copy =) 不好意思呀..
Post a Comment