这个是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日志配置

    spring boot的application.properties提供了日志的配置,但我还是习惯于老的logback的使用方式.以下内容介绍如何在springboot中使用自定义的logback. ...

  2. FFmpeg与libx264 x264接口对应关系源代码分析

    源代码位于“libavcodec/libx264.c”中.正是有了这部分代码,使得FFmpeg可以调用libx264编码H.264视频.  从图中可以看出,libx264对应的AVCodec结构体ff ...

  3. java学习日历输出(一)

    import java.text.DateFormatSymbols; import java.util.Calendar; import java.util.GregorianCalendar; i ...

  4. SQL-SQL基础

    SQL(Structured Query Language)是通用的数据库查询语言,各个数据库厂商均对SQL-92标准做了支持,同一时候各家又再次基础上做了相应扩展,比如oracle的PL/SLQ. ...

  5. 嵌入式数据库H2的安装与配置

    一.配置JAVA环境 1.首先检查系统是否自带JDK 使用命令:#java -version 没有信息即为没有安装,如有且版本较低,可采用如下方式卸载: 查看命令: rpm -qa | grep ja ...

  6. html5-补充知识

    原理 html5+开发app的原理大概是这样: html页面负责内容: ui负责页面样式: js负责调用原生app方法. html5 html5这部分负责页面,也就是app中你看到的东西,大概的架构和 ...

  7. 解决QT:forward declaration of &#39;struct Ui::xxx&#39;;invalid use of incomplete struct &quot;Ui::Widget&quot; 等莫名奇异错误

    今天在进行QT Widget的UI设计时,改了下Widget的对象名,然后在多次成功编译执行后,执行清理,又一次构建,就出现了好多莫名奇异的错误: widget.h:12: 错误:forward de ...

  8. 在安装mysql数据库的过程中,显示msvcp100.dll丢失?则么办?

    方案一:重装操作系统为windows10专业版 方案二:问题: 解答: 报错原因是VC运行库不全或者没有安装导致,百度搜索VC集合下载安装, 链接:https://pan.baidu.com/s/1U ...

  9. 获取exe文件窗口抓图,将memo转化为JPG输出

    unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  10. [luogu4315]月下“毛景树”

    [luogu4315]月下"毛景树" luogu 联赛前复习一发树剖.不会告诉你WA了4发 #define ls x<<1,l,mid #define rs x< ...