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 ...
随机推荐
- 剑指Offer——网易笔试之解救小易——曼哈顿距离的典型应用
剑指Offer--网易笔试之解救小易--曼哈顿距离的典型应用 前言 首先介绍一下曼哈顿,曼哈顿是一个极为繁华的街区,高楼林立,街道纵横,从A地点到达B地点没有直线路径,必须绕道,而且至少要经C地点,走 ...
- RecyclerView下拉刷新上拉加载(二)
listview下拉刷新上拉加载扩展(一) http://blog.csdn.net/baiyuliang2013/article/details/50252561 listview下拉刷新上拉加载扩 ...
- linux常用的压缩与解压缩命令
1.gzip 压缩 gzip 是压缩文件,压缩之后文件后缀为.gz 用法:gzip 选项 [文件] 2.gunzip 解压 这个命令与gzip的功能刚好相反,这个是解压. 用法 gunzip 选项 [ ...
- (九十六)借助APNS实现远程通知、后台任务
APNS全称为Apple Push Notification Service,可以实现在app不启动时也能通过服务器推送到iOS端特定设备的功能. APNS的实现原理为先发送设备的UDID和应用的Bu ...
- [java面试]宇信易诚 广州分公司 java笔试题目回忆录
本文地址:http://blog.csdn.net/sushengmiyan/article/details/28479895 作者:sushengmiyan -------------------- ...
- Dynamics CRM 电子邮件服务器配置文件Advanced配置中关闭SSL
在新建电子邮件服务器配置文件时Advanced中的Use SSL for Incoming/Outgoing Connection默认都是启用的而且无法编辑,启用SSL当然是为了安全的考虑,但当客户的 ...
- 如何判断webview是不是滑到底部
getScrollY()方法返回的是当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离. getHeight()或者getBottom()方法都返回当前webview这个容器的高度 ge ...
- 择天记OL体验截图
- iOS中 static变量与全局、局部变量的区别 !
static变量与全局.局部变量的区别 全局变量(外部变量)的说明之前再冠以static 就构成了静态的全局变量.全局变量本身就是静态存储方式,静态全局变量当然也是静态存储方式. 这两者在存储方式上并 ...
- 未完成的IT路停在回车键---2014年末总结篇
时间都去哪儿了? 一晃而过,越来越能体会到这个词的真实感.特别是过了二十岁,这种感觉越来越深刻,越来越强烈,犹如小编做公交车的时候一直向后排排倒的香樟树,还记得有首歌叫时间都哪儿了,而 ...