hover变化图片
<div class="icon width mar">
<div class="cpzs_tit"></div>
<div class="iconin">
<ul>
<li><div class="iconinimg"><div class="hlx"></div><div class="hi1"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1972.html">></a></li>
<li><div class="iconinimg"><div class="hlx"></div><div class="hi2"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1978.html">></a></li>
<li><div class="iconinimg"><div class="hlx"></div><div class="hi3"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1984.html">></a></li>
<li><div class="iconinimg"><div class="hlx"></div><div class="hi4"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1986.html">></a></li>
<li><div class="iconinimg"><div class="hlx"></div><div class="hi5"></div></div><div class="iconin_fl"><%=nav.getallsubcataloies("",true) %></div><a class="iconin_more" href="<%=site.siteurl %>products/1988.html">></a></li>
</ul>
<div class="clear"></div>
</div>
</div>
js:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".hcontact_cont ul li:eq(0)").css({ "background": "url(<%=site.path.themepath %>images/hc1.jpg) no-repeat top center" });
$(".hcontact_cont ul li:eq(1)").css({ "background": "url(<%=site.path.themepath %>images/hc2.jpg) no-repeat top center" });
$(".hcontact_cont ul li:eq(2)").css({ "background": "url(<%=site.path.themepath %>images/hc3.jpg) no-repeat top center" });
for (var i = ; i < ; i++) {
$(".iconin>ul>li:eq(" + (i - ) + ")>.iconinimg>div:eq(1)").css({ "background": "url(<%=site.path.themepath %>images/hicon" + i + ".png) no-repeat center 50px" }); } var iconhover = new Array(, , , ,);
for (var j = ; j < ; j++) {
$(".iconin>ul>li:eq(" + j + ")>.iconinimg>div:eq(1)").hover(function () {
var slls = $(this).attr("class");
slls = slls.replace("hi", "");
$(this).css({ "background": "url(<%=site.path.themepath %>images/hicon" + slls + "h.png) no-repeat center 50px" }); }, function () {
var slls = $(this).attr("class");
slls = slls.replace("hi", "");
$(this).css({ "background": "url(<%=site.path.themepath %>images/hicon" + slls + ".png) no-repeat center 50px" });
}); } }); </script>
图片命名:

效果:

hover变化图片的更多相关文章
- CSS鼠标点击式变化图片透明度
今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...
- css3的一个小demo(箭头hover变化)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- v-lazyload数据变化图片不切换
这个问题让我很困惑,明明得到的商品数据已经改变了,但是就图片不变化,随后找到了解决办法,那就是多加一个动态的key <img v-lazy="item.productImage&quo ...
- 商品鼠标移过去hover效果---图片放大1.1倍
.home-standard-layout .middle-goods-list ul li:hover{ box-shadow: 0 0 10px gray;} .home-standard-lay ...
- 鼠标hover时图片效果
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...
- 利用css实现hover动态效果
.font em:hover { font-size: 2em } .font strong:hover { font-weight: normal } .font span:hover { colo ...
- JS实现图片跟随鼠标移动
在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...
- Android小案例——简单图片浏览器
今天上午休息看Android书,里面有个变化图片的示例引起了我的兴趣. 示例需求: 有N张图片,循环显示图片的内容.如果需求让我写我会使用一个变量count来保存显示图片数据的索引,图片显示时做个判断 ...
- Android之点击切换图片
package com.example.SlidePictures; import java.util.Timer; import java.util.TimerTask; import com.ex ...
随机推荐
- 【java集合框架源码剖析系列】java源码剖析之HashMap
前言:之所以打算写java集合框架源码剖析系列博客是因为自己反思了一下阿里内推一面的失败(估计没过,因为写此博客已距阿里巴巴一面一个星期),当时面试完之后感觉自己回答的挺好的,而且据面试官最后说的这几 ...
- 2014年7月10日,我人生的最重要Upgrade
2014年7月10日上午,我的小公主顺利的出生于国妇婴.之前各种紧张,各种不安.在不安中的前天晚上陪着来上海的董博士于方先生在人民广场聚餐.大家都是工作几年的,各种感慨,对于工作中的零零种种.还有对未 ...
- Android开发学习之路--MAC下Android Studio开发环境搭建
自从毕业开始到现在还没有系统地学习android应用的开发,之前一直都是做些底层的驱动,以及linux上的c开发.虽然写过几个简单的app,也对android4.0.3的源代码做过部分的分析,也算入门 ...
- 【Shader拓展】Illustrative Rendering in Team Fortress 2
写在前面 早在使用ramp texture控制diffuse光照一文就提到了这篇著名的论文.Valve公司发表的其他成果可见这里.这是Valve在2007年发表的一篇非常具有影响力的文章,我的导师也提 ...
- 01-Git简介和仓库创建
Git简介 Linus的第二个伟大作品.2005年由于BitKeeper软件公司对Linux社区停止了免费使用权.Linus迫不得己自己开发了一个分布式版本控制工具,从而Git诞生了. 目前使用Git ...
- 【一天一道LeetCode】#118. Pascal's Triangle
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given n ...
- Android官方命令深入分析之dmtracedump
dmtracedump是一个根据log文件生成图形化调用堆栈的工具(除了Traceview之外). dmtracedump的用法: dmtracedump [-ho] [-s sortable] [- ...
- Socket编程实践(10) --select的限制与poll的使用
select的限制 用select实现的并发服务器,能达到的并发数一般受两方面限制: 1)一个进程能打开的最大文件描述符限制.这可以通过调整内核参数.可以通过ulimit -n(number)来调整或 ...
- 【Unity Tips】备忘录(扫盲篇)
写在前面 Unity3D虽然是个非常方便的游戏引擎,但还是有一些地方会产生一些让人莫名其妙的问题,而且debug半天也不知道到底哪里错了.往往在经过了大量的log之后,也许我们才顿悟,原来Unity内 ...
- android异步任务asyntask详解
在Android中实现异步任务机制有两种方式,Handler和AsyncTask. Handler模式需要为每一个任务创建一个新的线程,任务完成后通过Handler实例向UI线程发送消息,完成界面的更 ...