通过jquery当hover到b元素时a左移15px,还有其他7个同class名的7个a元素...

发布网友发布时间：2022-04-23 18:38

共2个回答

懂视网时间：2022-05-15 04:00

了解了jsonp之后，大家应该也都明白了，jsonp主要就是用来实现跨域的获取数据，今天我们就来详细探讨下如何在实际中应用jsonp实现跨域

　　JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

??上面一段话来自百度百科，概念永远是那么抽象难懂，看例子才是最直观的表现。例子看的多了，领悟到那个点了，自然自己也会学着抽象的描述了。这就是为什么常说“学习知识是从薄到厚，又由厚到薄的过程”。好了扯远了。下面直接来看一个例子。

??问题：本地现有一个页面demo.html需要从http://localhost:3561/User/GetAllNames获取数据并展示。

??解答：由于问题中的两方不在同一服务器，故需要使用jsonp来跨域访问。

??① 客户端编写

??客户端使用jQuery中提供的$.getJson方法来跨域访问。getJson有3个参数：

????I. url：请求地址；

????II. data：发送到服务端的参数；

????III. callback：成功时的回调函数。

??getJson的使用方法和普通的$.get方法基本一致，不同的地方在于getJson需要在url后面的参数部分加上callback=?这一固定部分，jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。然后在回调函数中操作从异域返回的json对象，回调函数callback的参数即为该json对象。

　　② 服务端编写

??服务端的逻辑主要是将数据序列化为json字符串，然后封装成"callback(json)"的形式，callback为jQuery自动生成并传到服务端的函数名称。下面使用C#实现：

public class UserController : Controller
{
 public string GetAllNames(string callback)
 {
 string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" };
 JavaScriptSerializer jss = new JavaScriptSerializer();
 string json = jss.Serialize(names);
 return string.Format("{0}({1})", callback, json);
 }
}

　　至此，便成功解决了问题。

?思考：如果服务端已经写死了callback（如：return string.Format("moty({0})", json);）,那么客户端该怎么写呢？

?参考：

上面是我整理给大家的，希望今后会对大家有帮助。

利用ES6通过WeakMap解决内存泄漏问题（详细教程）

Node.JS循环删除非空文件夹及子目录下的所有文件

Javascript中prototype与__proto__的关系详解

热心网友时间：2022-05-15 01:08

我先Mark一个，正在写代码实现中。。。

按照你的需求，我把京东的floor3扣下来了，运行效果如下：

完整html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
  <title>Document</title>
  <style>
  html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0px;
    padding: 0px;
}
body {
    font: 12px/150% Arial,Verdana,"宋体";
    color: #666;
}
.lh {
    overflow: hidden;
}
  #clothing.clothing-new{
    margin:100px auto;
    width:790px;
  }
  #clothing.clothing-new .accordion {
    background: none repeat scroll 0% 0% #FFF;
    width: 790px;
    height: 361px;
}
#clothing .accordion {
    width: 900px;
}
.root61 .plist .smc {
}
.plist .smc {
    position: relative;
    height: 361px;
    border-bottom: 1px solid #DDD;
}
.curr .mc, .curr .smc {
    display: block;
}
.m2 .mc, .sm2 .smc {
    display: none;
}
.m, .mt, .mc, .mb, .sm, .smt, .smc, .smb {
    overflow: hidden;
}
.root61 #clothing.clothing-new .accordion .item {
    width: 158px;
}
.root61 #clothing .accordion .curr {
    width: 190px;
}
.root61 #clothing .accordion .item {
    width: 158px;
}
#clothing.clothing-new .accordion .item {
    float: left;
    width: 158px;
    height: 361px;
    overflow: hidden;
    background: none repeat scroll 0% 0% #000;
}
#clothing .accordion .curr {
    width: 188px;
}
#clothing .accordion .item {
    width: 148px;
    height: 361px;
    overflow: hidden;
}
.lh li, .lh dl, .lh .item {
    float: left;
}
#clothing.clothing-new .accordion .item .fore2 {
    height: 181px;
}
#clothing.clothing-new .accordion .item a {
    width: 158px;
    background: none repeat scroll 0% 0% #FFF;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.8s ease-out 0s;
}
a {
    color: #666;
    text-decoration: none;
}
#clothing.clothing-new .accordion .item a strong {
    top: 20px;
    left: 10px;
}
#clothing.clothing-new .accordion .item a strong, #clothing.clothing-new .accordion .item a em {
    display: block;
    width: 6em;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    position: absolute;
    font-family: "微软雅黑";
    text-decoration: none;
    z-index: 5;
    font-size: 13px;
    color: #555;
}
#clothing.clothing-new .accordion .item a em {
    font-size: 12px;
    color: #777;
    top: 37px;
    left: 10px;
}
#clothing.clothing-new .accordion .item a strong, #clothing.clothing-new .accordion .item a em {
    display: block;
    width: 6em;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    position: absolute;
    font-family: "微软雅黑";
    text-decoration: none;
    z-index: 5;
    font-size: 13px;
    color: #555;
}
em {
    font-style: normal;
}
#clothing.clothing-new .accordion .item a img {
    position: relative;
    transition: all 0.4s ease-out 0s;
}
img.err-proct, img.err-poster {
    background: url('http://misc.360buyimg.com/lib/skin/e/i/error-jd.gif') no-repeat scroll 50% 50% transparent;
}
a img {
    border: 0px none;
}
img {
    vertical-align: middle;
}
#clothing.clothing-new .accordion .item .fore2 {
    height: 181px;
}
#clothing.clothing-new .accordion .item a {
    width: 158px;
    background: none repeat scroll 0% 0% #FFF;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.8s ease-out 0s;
}
a {
    color: #666;
    text-decoration: none;
}
#clothing.clothing-new .accordion.advanced .item a:hover img {
    margin-left: -15px;
}
.a-light {
    opacity: 1;
}
.a-gray{
    opacity: 0.8;
}

  </style>
  <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  <script>
  $(function(){
    $(".accordion.advanced .item a").hover(function(){
        $(".accordion.advanced .item a").addClass("a-gray").removeClass("a-light");
        $(this).removeClass("a-gray").addClass("a-light");
    },function(){
        $(".accordion.advanced .item a").removeClass("a-gray").addClass("a-light");
    });
  });
  </script>
</head>
<body>
<div class="w w1 clothing-new" data-fid="2" id="clothing">
<div class="smc accordion advanced" data-widget="tab-content">
    <div class="lh">
        <div class="item curr" id="clothing-accordion-r1">
            <a clstag="homepage|keycount|home2013|22c2" target="_blank"
                class="fore2"
                href="http://c.fa.jd.com/adclick?sid=2&cid=601&aid=4183&bid=0&unit=41684&advid=66030&guv=&url=http://sale.jd.com/act/qhavn4MDryGiUZ3.html">
                <strong>女鞋新品会</strong> <em>单鞋新品会</em> <img class="err-proct"
                src="http://img11.360buyimg.com/da/jfs/t217/152/1822737298/10217/e68c2e97/53fe8b7eNec3b6814.jpg"
                data-img="2" alt="">
            </a><a clstag="homepage|keycount|home2013|22c3" target="_blank"
                class="fore2"
                href="http://c.fa.jd.com/adclick?sid=2&cid=601&aid=4183&bid=0&unit=41681&advid=66019&guv=&url=http://sale.jd.com/act/VNRMDkHtU2.html?erpad_source=erpad">
                <strong>开学雷朋镜架</strong> <em>全场低至399</em> <img class="err-proct"
                src="http://img12.360buyimg.com/da/jfs/t238/133/1854809772/8437/906918c3/53fe8b55N25bc3059.jpg"
                data-img="2" alt="">
            </a>
        </div>
        <div class="item" id="clothing-accordion-r2">
            <a clstag="homepage|keycount|home2013|22c4" target="_blank"
                class="fore1"
                href="http://c.fa.jd.com/adclick?sid=2&cid=601&aid=4184&bid=0&unit=42027&advid=78225&guv=&url=http://sale.jd.com/mall/sPVOIbNnBk1TWYp.html">
                <strong>寻找星座内衣</strong> <em>低至1.9折</em> <img class="err-proct"
                src="http://img12.360buyimg.com/da/jfs/t355/268/22471727/18301/938f7c16/53feffa0N674a5c15.jpg"
                data-img="2" alt="">
            </a>
        </div>
        <div class="item" id="clothing-accordion-r3">
            <a clstag="homepage|keycount|home2013|22c5" target="_blank"
                class="fore2"
                href="http://c.fa.jd.com/adclick?sid=2&cid=601&aid=4185&bid=0&unit=41702&advid=73115&guv=&url=http://sale.jd.com/act/0zYivAOepXBJ8.html">
                <strong>金秋男鞋</strong> <em>不新不型</em> <img class="err-proct"
                src="http://img14.360buyimg.com/da/jfs/t220/3/1823346847/12609/d5e6b447/53fe8b9dN87b99614.jpg"
                data-img="2" alt="">
            </a><a clstag="homepage|keycount|home2013|22c6" target="_blank"
                class="fore2"
                href="http://c.fa.jd.com/adclick?sid=2&cid=601&aid=4185&bid=0&unit=41703&advid=73117&guv=&url=http://sale.jd.com/act/XsbyBHfJaPtWpEA.html">
                <strong>健身装备换新</strong> <em>新品半价专场</em> <img class="err-proct"
                src="http://img14.360buyimg.com/da/jfs/t223/267/1801028342/13222/4ed06f6d/53fe8bb7N24d51bd1.jpg"
                data-img="2" alt="">
            </a>
        </div>
        <div class="item" id="clothing-accordion-r4">
            <a clstag="homepage|keycount|home2013|22c7" target="_blank"
                class="fore1"
                href="http://c.fa.jd.com/adclick?sid=2&cid=601&aid=4186&bid=0&unit=42145&advid=75895&guv=&url=http://sale.jd.com/act/LgVJ4exNHFdE.html">
                <strong>跑步机品牌汇</strong> <em>5折起</em> <img class="err-proct"
                src="http://img13.360buyimg.com/da/jfs/t235/136/1494969274/12926/c1c9a0b/53fc0572Neaad40dd.jpg"
                data-img="2" alt="">
            </a>
        </div>
        <div class="item" id="clothing-accordion-r5">
            <a clstag="homepage|keycount|home2013|22c8" target="_blank"
                class="fore2"
                href="http://c.fa.jd.com/adclick?sid=2&cid=601&aid=4187&bid=0&unit=41589&advid=66045&guv=&url=http://sale.jd.com/act/swF0u76gp5RUW.html?erpad_source=erpad">
                <strong>箱约开学季</strong> <em>满399减100</em> <img class="err-proct"
                src="http://img12.360buyimg.com/da/jfs/t259/199/1174571145/14887/e89d2f97/53f6e62fNf644a6aa.jpg"
                data-img="2" alt="">
            </a><a clstag="homepage|keycount|home2013|22c9" target="_blank"
                class="fore2"
                href="http://c.fa.jd.com/adclick?sid=2&cid=601&aid=4187&bid=0&unit=41691&advid=79951&guv=&url=http://sale.jd.com/act/rKsQDX8fyOBdn7.html?erpad_source=erpad">
                <strong>奢品打白条</strong> <em>299元起</em> <img class="err-proct"
                src="http://img12.360buyimg.com/da/jfs/t238/3/1490821343/10425/28f2743d/53fbf8fbNe1273d03.jpg"
                data-img="2" alt="">
            </a>
        </div>
    </div>
</div>
</div>
</body>
</html>

追问嗯，，在CHORME里面是没问题，但是用IE跟360图片移动效果变成了直接变过去，而不是滑过去了，不过给了我点灵感，我看看能不能直接加addclass试试