jquery 图片切换 v.qq.com

最新推荐文章于 2019-05-05 09:08:07 发布

fuyangclj

最新推荐文章于 2019-05-05 09:08:07 发布

阅读量1k

点赞数

分类专栏： Jquery 文章标签： jquery

本文链接：https://blog.csdn.net/clj9017/article/details/26499539

版权

Jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏


<!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=utf-8" />
<title>无标题文档</title>
<link href="http://imgcache.gtimg.cn/tencentvideo_v1/vstyle/web/v3/style/base.css?v=20140424&max_age=2592000"  rel="stylesheet" type="text/css"/>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<script>
$(function(){
    
var a, b = 300;
        $("._ad_spread_list>li").on("mouseenter",
        function() {
            clearTimeout(a);
            var c = $(this),
            d = c.parent(),
            e = c.find(".link_pic_main"),
            f = e.width();
            a = setTimeout(function() {
                var a = c.index(),
                e = c.find("img").filter("[data-src]");
                4 == a && a--,
                d.stop().animate({
                    left: "-" + a * f + "px"
                },
                b),
                e.size() && e.attr("src", e.attr("data-src")).removeAttr("data-src"),
                c.stop().animate({
                    width: 4 * f + "px"
                },
                b)
            },
            200)
        }).on("mouseleave",
        function() {
            clearTimeout(a);
            var c = $(this),
            d = c.find(".link_pic_main"),
            e = d.width(),
            f = this;
            c.animate({
                width: e + "px"
            },
            b,
            function() {
                f.style.cssText = ""
            }).parent("._ad_spread_list").stop().animate({
                left: "0px"
            },
            b)
        })

    
});

</script>
<div class="wrapper">
    <div class="mod_ad mod_ad_spread">
    <ul style="left: 0px;" class=" _ad_spread_list ad_spread_list cf">
    
        <li class="list_item" style="">
        <div class="link_pic">
        <a title="造梦金棕榈" class="link_pic_main" _hot="index.movie.theater.small_img1" href="http://v.qq.com/topic/2014/67gn.html" target="_blank">
        <img alt="造梦金棕榈" style="visibility: visible;" src="http://i.gtimg.cn/qqlive/images/20140513/i1399951664_1.jpg" ></a>
        
        <a title="造梦金棕榈" class="link_pic_more" _hot="index.movie.theater.big_img1" href="http://v.qq.com/topic/2014/67gn.html" target="_blank">
        <img alt="造梦金棕榈 " src="http://i.gtimg.cn/qqlive/images/20140513/i1399951669_1.jpg" ></a>
        </div>
        </li>
        
        <li class="list_item" style="">
        <div class="link_pic">
        <a title="五月告白季--跟着电影学表白" class="link_pic_main" _hot="index.movie.theater.small_img2" href="http://v.qq.com/zt2014/zmzyyhz/index.htm" target="_blank">
        <img alt="五月告白季--跟着电影学表白" style="visibility: visible;" src="http://i.gtimg.cn/qqlive/images/20140516/i1400220872_1.jpg"></a>
        <a title="五月告白季--跟着电影学表白" class="link_pic_more" _hot="index.movie.theater.big_img2" href="http://v.qq.com/zt2014/zmzyyhz/index.htm" target="_blank">
        <img alt="五月告白季--跟着电影学表白 " src="http://pnewsapp.tc.qq.com/newsapp_ls/0/17676294_74495/0"></a>
        </div>
        </li>
        
        
        <li class="list_item" style=""><div class="link_pic"><a title="十大情敌电影" class="link_pic_main" _hot="index.movie.theater.small_img3" href="http://v.qq.com/zt2014/zt/index.htm" target="_blank"><img alt="十大情敌电影" style="visibility: visible;" src="http://i.gtimg.cn/qqlive/images/20140504/i1399175059_1.jpg"></a><a title="十大情敌电影" class="link_pic_more" _hot="index.movie.theater.big_img3" href="http://v.qq.com/zt2014/zt/index.htm" target="_blank"><img alt="十大情敌电影 " src="http://i.gtimg.cn/qqlive/images/20140504/i1399175074_1.jpg"></a></div></li><li class="list_item" style=""><div class="link_pic"><a title="五月观影指南" class="link_pic_main" _hot="index.movie.theater.small_img4" href="http://v.qq.com/topic/2014/5yue.html" target="_blank"><img alt="五月观影指南" style="visibility: visible;" src="http://i.gtimg.cn/qqlive/images/20140430/i1398840549_1.jpg"></a><a title="五月观影指南" class="link_pic_more" _hot="index.movie.theater.big_img4" href="http://v.qq.com/topic/2014/5yue.html" target="_blank"><img alt="五月观影指南 " src="http://pnewsapp.tc.qq.com/newsapp_ls/0/17010257_74495/0"></a></div></li><li class="list_item" style=""><div class="link_pic"><a title="十大魔女杀手" class="link_pic_main" _hot="index.movie.theater.small_img5" href="http://v.qq.com/cover/4/40pogv4evjhbxyd.html" target="_blank"><img alt="十大魔女杀手" style="visibility: visible;" src="http://i.gtimg.cn/qqlive/images/20140423/i1398233528_1.jpg"></a><a title="十大魔女杀手" class="link_pic_more" _hot="index.movie.theater.big_img5" href="http://v.qq.com/cover/4/40pogv4evjhbxyd.html" target="_blank"><img alt="十大魔女杀手 " src="http://i.gtimg.cn/qqlive/images/20140423/i1398233553_1.jpg"></a></div></li>    </ul>
</div><!--[if !IE]>|xGv00|a327fae2d9ee16fb3c9fe730b651b4c4<![endif]--></div>


</body>
</html>

fuyangclj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 图片切换 v.qq.com

无标题文档$(function(){ var a, b = 300; $("._ad_spread_list>li").on("mouseenter", function() { clearTimeout(a); var c = $(this),
复制链接

扫一扫