天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文
内容加载中......

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

现在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>前面就行,然后文件重建,前台就可以看到效果了。

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签鼠标滑过图片变淡

本文地址http://www.txcstx.cn/post/600.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

我猜你还喜欢这些...

哈哈,本文已有 6 位小伙伴发表了看法:

1#雨夜 (游客)  评论于 2014-05-10 11:55:24回应ta
你的代码样式怎么弄的,我想弄成这样的,比较好看。
1#雨夜 (游客)  评论于 2014-05-10 12:02:43回应ta
不需要了,谢谢,知道什么原因了。
2#雨夜 (游客)  评论于 2014-05-09 11:25:31回应ta
还有第三种方法,比我网站用的是css方法。举例:
img:hover{filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;}
就可以实现了,不需要js实现。
还有你的网址必须要加http://,要不提示下,php版本要完善的,呵呵。
2#天兴工作室 (管理员)  评论于 2014-05-09 12:30:02回应ta
恩 用css当然是最好的办法,你的这段css在浏览器的支持性方面如何?我去测试下,支持性好就用css算了,网址要加http://这个确实是个问题,要去跟开发者们反馈下
2#雨夜 (游客)  评论于 2014-05-09 14:59:15回应ta
至于http://我的解决方案是点击输入框自动输入http://的方式,用:onfocus="this.value='http://';"的方法,
2#天兴工作室 (管理员)  评论于 2014-05-09 16:26:41回应ta
这也是个办法额,其实浏览器地址栏输入http://与否根本不影响什么的,zblog这额个限制有点搞人

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
dedecms字段新东方A60刷机包上网流量刷机没有网emlog6介绍校园WLANXML-RPC协议地址三星i5508武汉联通套餐C套餐关键词4M中商电子券宽带大提速cms安装主题2016端午节神州行无忧卡天翼易通卡描述10M流量地质大学222下拉记载js框架六一儿童节天下网商手机端主题工单zblog seo超级QQ励志卡升级天兴博客同栏目文章
热门模板