zoukankan      html  css  js  c++  java
  • jQuery实现点击小图查看大图功能

    演示地址:点击查看

     前两天用Js实现在这个功能,现在在学习JQuery 也做了一下这个功能,多多练习,一切都会变的简单; 

    <!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>
        
    <title></title>
        
    <link rel="stylesheet" type="text/css" href="Css/Commom.css" />
        
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        
    <script language="javascript" type="text/javascript">
            
    var data = { "Images/01_small.jpg": ["Images/01.jpg""图片1"], "Images/02_small.jpg": ["Images/02.jpg""图片2"], "Images/03_small.jpg": ["Images/03.jpg""图片3"] };  //Key:Value;
            $(function () {
                $.each(data, 
    function (key, value) {
                    
    //初始化最后一个div为隐蔽
                    $("div").last().hide();
                    
    //ket是小图的地址;
                    var smallPath = $("<img src='" + key + "'/>").css("margin""5px").css("padding""2px").css("border""1px solid #000");
                    
    //设置大图地址和名称;
                    bigImgPath = smallPath.attr("bigMapPath", value[0]);
                    bigImgName 
    = smallPath.attr("bigMapName", value[1]);

                    
    //给小图添加事件
                    smallPath.mouseover(function () {
                        
    //最后一个div淡入效果
                        $("div").last().fadeIn("slow");
                        
    //获取大图地址
                        $("#show").attr("src", $(this).attr("bigMapPath"));
                        
    //获取大图名称并设置样式
                        $("#imgTitle").text($(this).attr("bigMapName")).css("background""#ebf1de").css("padding""10px").css("margin-bottom""10px");
                    });
                    smallPath.mouseout(
    function () {
                        
    //指定最后一个div;
                        $("div").last().fadeOut("slow");
                    });
                    
    //.first方法,指第第一个DIV添加小图;(过滤器)
                    $("div").first().append(smallPath);
                });
            });
        
    </script>
    </head>
    <body>
        
    <div class="column">
        
    </div>
        
    <div class="column">
            
    <id="imgTitle">
            
    </p>
            
    <img id="show" src="" alt="" />
        
    </div>
    </body>

    </ html>


  • 相关阅读:
    剑指 Offer 67. 把字符串转换成整数 && Leetcode 8 字符串转换整数 (atoi)
    剑指 Offer 49. 丑数 && Leetcode 264. 丑数 II
    [LeetCode] Implement strStr()
    [LeetCode] Rotate Image
    [LeetCode] Remove Duplicates from Sorted List II
    [LeetCode] Gas Station
    OpenCV-paper detection & perspective transformation 相关资料
    Install PIL on mac osX10.9
    为什么是 n(n+1)/2 ?
    数组排序
  • 原文地址:https://www.cnblogs.com/zhuiyi/p/2033718.html
Copyright © 2011-2022 走看看