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 ...
随机推荐
- 单幅图像的深度学习,对NYU数据集进行划分
针对分割问题,官方已经划分好了:http://cs.nyu.edu/~silberman/projects/indoor_scene_seg_sup.html import numpy as np i ...
- MySQL输入密码后闪退,这里有解
不知道怎么的,我的MySQL就像抽风了一样,可能是不想理我了吧.只要我输入密码,它就会闪退.而且使用其他的数据库管理工具也是链接不成功的.于是下决心,调教调教它,于是有了下面的这些解决方案. 解决方法 ...
- (NO.00004)iOS实现打砖块游戏(十四):3球道具的实现
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 反弹棒变化道具实现前面已经介绍过了,我们下面可以在小球上做些文章 ...
- JAVA中的静态成员
//Java中的静态成员 /* *静态的成员变量是属于类的,不属于某个对象,是共享的. * 访问时可以用类名.静态属性直接访问,也可以用对象.访问,后者不提倡. * 静态的成员方法只能访问静态的成员 ...
- Windows7 x64 跨平台开发环境安装配置
======================================================================= Windows7 x64 跨平台开发环境安装配置 201 ...
- 并发编程(二):分析Boost对 互斥量和条件变量的封装及实现生产者消费者问题
请阅读上篇文章<并发编程实战: POSIX 使用互斥量和条件变量实现生产者/消费者问题>.当然不阅读亦不影响本篇文章的阅读. Boost的互斥量,条件变量做了很好的封装,因此比" ...
- MongoDB分组
MongoDB三种分组方式 group(先筛选再分组,不支持分片,对数据量有所限制,效率不高) [简单分组实测150W 12.5s] mapreduce(基于js引擎,单线程执行,效率较低,适合用做后 ...
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(二)
打开Ai按需求依次绘制机器人身体,手臂和篮框: 因为是实验性质的游戏所以没必要在这上面花太多功夫,画出意思即可.虽然是2D游戏,但实际游戏中可以表现出伪3D的图形效果;尽管本猫这次画的游戏元素都是满满 ...
- [C#]ToString("##")格式化用法案例一:自动编码单据流水码
之前的写的自动编码单据流水码是写在存储过程或者函数中的,今天用程序写一个发现TOSTRING可以格式化方便. /// <summary> /// 年月日+两位流水码 /// </su ...
- 阿里云服务器实战(二): Linux MySql5.6数据库乱码问题
在阿里云上了买了一个云服务器, 部署了一个程序,发现插入数据库后乱码了,都成了'????'. 一开始怀疑是Tomcat7的原因 , 见文章 : http://blog.csdn.net/johnny ...