这个是javascript的写法

<img src="res/img/shop-c_32.jpg" alt="" onmouseover="this.src='res/img/shop-c_29.jpg';" onmouseout="this.src='res/img/shop-c_32.jpg';">

这是个jquery的写法

<img src="res/img/shop-c_32.jpg" data-back="res/img/shop-c_29.jpg">

再加上jquery的效果写法

<script>
$("img[data-back]").hover(function(){
$(this).data('fallback',$(this).attr('src'));
$(this).attr('src',$(this).data('back'));
},function(){
$(this).attr('src',$(this).data('fallback'));
}); </script>

我比较倾向于后者的写法。那大家觉得呢?

js和jquery 两种写法 鼠标经过图片切换背景效果的更多相关文章

  1. (转载)无缝滚动图片的js和jquery两种写法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  3. 常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

    我的个人网站 点击链接!欢迎大家访问 下面是网页一些常见的宽高的获取.........这是原生的写法(JavaScript) 网页可见区域宽: document.body.clientWidth 网页 ...

  4. JS对象转URL参数(原生JS和jQuery两种方式)

    转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...

  5. js对象的两种写法

    <script>     //定义一个对象,提供对应的方法或者属性     var s = {         sd1: function () { },         sd2: fun ...

  6. 【分享】jQuery无插件实现 鼠标拖动图片切换 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...

  7. angularjs 代码结构两种写法

    1.当路由中不写controller的时候,controller写在对应的html表单中 2.若要写在路由中,如下 3.转到相应的路由(页面) 1.采用location服务 2.采用 transiti ...

  8. controller 有两种写法,讨论一下两种写法的区别:

    controller 有两种写法,讨论一下两种写法的区别: 写法 1: app.controller('myCtrl', function($scope, $location) { $scope.my ...

  9. Vue el与data的两种写法 && Object.defineProperty方法

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

随机推荐

  1. spring boot集成activemq

    spring boot集成activemq 转自:https://blog.csdn.net/maiyikai/article/details/77199300

  2. HDU 5901 Count primes (2016 acm 沈阳网络赛)

    原题地址:http://acm.hdu.edu.cn/showproblem.php?pid=5901 题意:输入n,输出n以内质数个数 模板题,模板我看不懂,只是存代码用. 官方题解链接:https ...

  3. python基础: day4作业计算器

    作业:计算器开发 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - ...

  4. Lumen开发:Lumen的异常处理机制

    版权声明:本文为博主原创文章,未经博主允许不得转载. Lumen的核心类Application引用了专门用于异常处理的RegistersExceptionHandlers, class Applica ...

  5. DICOM:C-GET服务

    背景: 之前博文对照过多次C-MOVE与C-GET服务的差别,两者最大的差别在于C-GET是基于单个TCP连接的点对点的双方服务.而C-MOVE是基于两个TCP连接的三方服务(详情參见:<DIC ...

  6. linux php.ini又一次载入问题

    今天发现自己server改动php.ini之后无法又一次载入! .无法使用php-fpm reload,奇怪.! 后来查了一下.能够使用 /etc/init.d/php-fpm reload 来又一次 ...

  7. 【原创】Hibernate自动生成(1)

    本实战是博主初次学习Java,分析WCP源码时,学习HibernateTools部分的实战,由于初次接触,难免错误,仅供参考,希望批评指正. 开发环境: Eclipse Version: Photon ...

  8. js验证金额是否符合要求的正则表达式

    正则的只是就不在这里重复的讲了,直接上代码 var mny = /^(((([1-9]([0-9]{0,8}))|0)\.([0-9]{1,2}))|([1-9]([0-9]{0,8})))$/; m ...

  9. 记录-阿里云Oss文件上传

    public class OssUtil { /** * 上传图片 * @param file * @param request * @return */ public static Map<S ...

  10. 10.Django数据库操作(增删改)

    插入数据 命令:create 或者 save create用法:ModelName.objects.create(itemName="itemValue") save用法:mode ...