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 ... 
随机推荐
- 02基于注解开发SpringMVC项目(jar包,异步,request,参数传递,多选的接收,Model传参,map传参,model传参,ajax,重定向,时间日期转换)
			 1 所需jar包 项目结构如下: 2 web.xml配置文件的内容如下: <?xmlversion="1.0"encoding="UTF-8"?&g ... 
- 给EditText的drawableRight属性的图片设置点击事件
			这个方法是通用的,不仅仅适用于EditText,也适用于TextView.AutoCompleteTextView等控件. Google官方API并没有给出一个直接的方法用来设置右边图片的点击事件,所 ... 
- Android初级教程理论知识(第八章网络编程一)
			网络图片查看器 确定图片的网址 发送http请求 URL url = new URL(address); //获取连接对象,并没有建立连接 HttpURLConnection conn = (Http ... 
- UNIX网络编程——分析一帧基于UDP的TFTP协议帧
			下图是UDP的段格式: 相比TCP段格式,UDP要简单得多,也没啥好说的,需要注意的是UDP数据长度指payload加上首部的长度. 下面分析一帧基于UDP的TFTP协议帧: 以太网首部 0000: ... 
- 一个CSS+jQuery的放大缩小动画效果
			日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ... 
- 青年菜君与小农女送菜商业模式PK
			青年菜君与小农女送菜商业模式PK 对比项 青年菜君 小农女送菜 优势 劣势 开业 2014年3月3日 2013年9月 渠道 地铁捕获用户 写字楼配送 送货 来店面自取 送货到写字楼 菜君 1.减少 ... 
- Counting Bloom Filter
			Counting Bloom Filter是 改进型,将记录标准的存在位0和1,扩展为计数器counter.记录有几个元素.插入加一,删除减一.多占几倍存储空间. 标准的Bloom Filter是一种 ... 
- Intellij Idea配置提高速度
			主要介绍一下Intellij Idea的关于速度和最大最大方法数目 提高速度 1.命令: 2.找到./Library/Preferences/IntelliJIdea2016.1/idea.vmopt ... 
- R基础学习
			R基础学习 The Art of R Programming 1.seq 产生等差数列:seq(from,to,by) seq(from,to,length) for(i in 1:length(x) ... 
- java垃圾回收机制,以及常用的回收算法
			记得之前去平安面试的时候,面试官问到了垃圾回收,我当时也就是说说了垃圾回收的原理,但是具体有哪些实现策略,我当时是懵的. 概念: Java的垃圾回收机制是Java虚拟机提供的能力,用于在空闲时间以不定 ... 
