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 ...
随机推荐
- kindeditor用法简单介绍
最近做毕业设计用了一个叫做kindeditor的文本编辑工具,相信很多人都用过,这货和fckeditor差不多,个人感觉这个的皮肤更好看,而且对中文的支持更好,没那么容易出现中文乱码问题.下次记录一下 ...
- J2EE学习从菜鸟变大鸟之六 EJB(Enterprise JavaBean)企业级Java组件
EJB (EnterpriseJavaBean)是J2EE的一部分,定义了一个用于开发基于组件的企业多重应用程序的标准.其特点包括网络服务支持和核心开发工具(SDK).其称为Java 企业Bean,是 ...
- java设计模式---合成模式3
实例 下面以一个逻辑树为例子,以上面的原理图为蓝本,看看如何实现并如何使用这个树,这个结构很简单,但是如何去使用树,遍历树.为我所用还是有一定难度的. 这里主要用到树的递归遍历,如何递归.如何控制 ...
- String之常量池小结
1.String 常量池 String使用private final char value[ ]实现字符串的存储,也就是说String创建对象之后不能够再次修改此对象中存储的字符串内容,因而Strin ...
- Synchronize 和 Lock 的区别与用法
一.synchronized和lock的用法区别 (1)synchronized(隐式锁):在需要同步的对象中加入此控制,synchronized可以加在方法上,也可以加在特定代码块中,括号中表示需要 ...
- JAVA之旅(二十)—HashSet,自定义存储对象,TreeSet,二叉树,实现Comparator方式排序,TreeSet小练习
JAVA之旅(二十)-HashSet,自定义存储对象,TreeSet,二叉树,实现Comparator方式排序,TreeSet小练习 我们继续说一下集合框架 Set:元素是无序(存入和取出的顺序不一定 ...
- JAVA对象克隆可能会出现的问题
首先,区分一下拷贝和克隆: 拷贝:当拷贝一个变量时,原始变量与拷贝变量引用的是同一个对象.当改变一个变量所引用的对象,则会对另一个变量造成影响. 克隆:当克隆一个对象时,是重新的创建了和该对象内容相同 ...
- android:padding和android:margin的区别 详解
转载请说明博客地址:http://blog.csdn.net/qq_32059827/article/details/51487997 看了网上的类似博客,并没有给出确定的区别.现在具体分析一下pad ...
- Leetcode_19_Remove Nth Node From End of List
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41778305 Given a linked list, r ...
- Gradle脚本打包so库
要让引用的第三方的so库被打包进去,只需要把相关的armeabi文件夹放在libs下面,然后在builld.gradle脚本中加上这一句: sourceSets{ main { jniLibs.src ...