注册 登录 提供zblog模板_zblog主题_wordpress模板的下载和定制

教程

分享一些有关于zblog的教程,这里有zblog初级教程、zblog中级教程和zblog进阶版教程,如果对你有所帮助,深感荣幸

当前位置:首页 > 教程 正文

zblog鼠标滑过图片变淡代码 zblogasp和zblogphp通用

天兴工作室 2014-04-25 教程 7297 ℃ 6 评论

有些朋友觉得网站上的图片一成不变的没有感觉(包括本人在内),总想给图片加点特效什么的。今天本文就为大家分享这个“鼠标滑过图片变淡代码”,具体效果请看本站网页上的图片。

现在zblog分为zblogasp和zblogphp两个版本,这个代码在两个版本都通用,但是调用方法不太一样,给大家详细说明下:

先上代码:

<script type="text/javascript">
$(function () {$('img').hover(function() {
$(this).fadeTo("fast", 0.8);},
function() {$(this).fadeTo("fast", 1);});});</script>

先来说zblogphp的调用方法

把这个代码加入到header.php文件里面,放置到</head>前面就行。然后刷新下后台,前台就可以看到效果了,非常简洁方便。


zblogasp则不能直接调用,必须新建一个js文件,复制下面代码:

$(function () {$('img').hover(function() {
$(this).fadeTo("fast", 0.8);},
function() {$(this).fadeTo("fast", 1);});});

js名字自己定义,举例我保存为tupian.js,js文件放在主题文件夹内的SCRIPT文件夹里面,然后在header.html里面加入“<script src="<#ZC_BLOG_HOST#>zb_users/theme/<#ZC_BLOG_THEME#>/script/tupian.js" type="text/javascript"></script>”放置到</head>前面就行,然后文件重建,前台就可以看到效果了。

已有 6 位小伙伴发表了看法

雨夜

回应ta 雨夜 (游客)

评论于 2014-05-10 11:55:24

你的代码样式怎么弄的,我想弄成这样的,比较好看。
雨夜

回应ta 雨夜 (游客)

评论于 2014-05-10 12:02:43

不需要了,谢谢,知道什么原因了。
雨夜

回应ta 雨夜 (游客)

评论于 2014-05-09 11:25:31

还有第三种方法,比我网站用的是css方法。举例:
img:hover{filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;}
就可以实现了,不需要js实现。
还有你的网址必须要加http://,要不提示下,php版本要完善的,呵呵。
天兴工作室

回应ta 天兴工作室 (管理员)

评论于 2014-05-09 12:30:02

恩 用css当然是最好的办法,你的这段css在浏览器的支持性方面如何?我去测试下,支持性好就用css算了,网址要加http://这个确实是个问题,要去跟开发者们反馈下
雨夜

回应ta 雨夜 (游客)

评论于 2014-05-09 14:59:15

至于http://我的解决方案是点击输入框自动输入http://的方式,用:onfocus="this.value='http://';"的方法,
天兴工作室

回应ta 天兴工作室 (管理员)

评论于 2014-05-09 16:26:41

这也是个办法额,其实浏览器地址栏输入http://与否根本不影响什么的,zblog这额个限制有点搞人

欢迎 发表评论

这是标题

这是标题

这是标题

天兴工作室 | www.txcstx.cn

天兴工作室介绍天兴工作室承接:网站建设、zblog模板和dedecms模板定制、仿站(像素级仿站)、html单页面定制和修改、网站模板修改等服务;我们的办事准则:要么不答应、答应则一定做到

微信公众号
  • 交流群:ZBLOG交流群
  • 客户群:天兴工作室客户群
在线QQ 评论文章