这个是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. Linux下文件的堵塞与非堵塞对部分系统调用的影响

    1.基本概念 所谓的堵塞,即内核在对文件操作I/O系统调用时.假设条件不满足(可能须要产生I/O),则内核会将该进程挂起.非堵塞则是发现条件不满足就会马上返回. 此外须要注意的是非堵塞并非轮询.不然就 ...

  2. 【SoapUI、Postman、WebServiceStudio、Jmeter】接口测试工具结合测试webservice接口(发送XML格式参数)

    目录: SoapUI测试webservice接口,发送XML格式参数 Postman测试webservice接口,发送XML格式参数 WebServiceStudio.exe测试webservice接 ...

  3. linux 解决 安装软件一直出现重复的信息

    State : Sleeping, pid: Another app is currently holding the yum lock; waiting for it to exit... The ...

  4. 08 nginx Location总结图解

  5. BestCoder Round #63 (div.2)

    感觉有些无聊的比赛. A 暴力枚举下就行 B 简单的dp,但是wa了一发后就去先把C做了,然后发现如果输入的100个数,是如1,2,3,4,...,100,然后k=50,个数为c(100,50).果断 ...

  6. 《C++游戏开发》笔记十一 平滑动画:不再颤抖的小雪花

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9430645 作者:七十一雾央 新浪微博:http:/ ...

  7. windy数(简单数位DP)

    1026: [SCOI2009]windy数 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 6306  Solved: 2810[Submit][Sta ...

  8. Angular关于$anchorScroll的定位滚动

    以下是实现定位滚动的代码: <!DOCTYPE html> <html lang="en" ng-app="app"> <head ...

  9. spring web app的结构

    1 入口是web.xml tomcat加载war的时候会去读该入库文件. 2 web.xml中spring mvc的配置 定义servlet到servlet-mapping之间的映射,org.spri ...

  10. php扩展trie_filter: 利用词库, 过滤敏感词

    1. 先安装libiconv# wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.1.tar.gz# tar -zxvf libiconv- ...