<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册</title> 
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 55px;
            height: 40px;
            margin-top: 10px;
            margin-left: 10px;
            border: 2px solid #fff;
        }
            ul li.active{
                border-color: red;
            }
    </style>
</head>
<body>
        <img src="img/1.jpeg" id="img">
        <ul>
            <li>
                <a href="">
                    <img src="img/1.jpeg" width="55px" height="40px" class="small">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="img/2.jpeg" width="55px" height="40px"  class="small">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="img/3.jpeg" width="55px" height="40px" class="small">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="img/4.jpeg" width="55px" height="40px"  class="small">
                </a>
          </li>
        </ul>
   <script>
    var big=document.getElementById('img');
    var small=document.getElementsByClassName('small');
    for(var i=0;i<small.length;i++)
    {
        small[i].onmouseover=function()
        {
            for(var j=0;j<small.length;j++)
            {
                small[j].parentNode.parentNode.setAttribute('class','');
            }
            var smalls=this.getAttribute('src');
            big.setAttribute('src',smalls);
            this.parentNode.parentNode.setAttribute('class','active');
        }
    }
    </script>
</body>
</html>

JS淘宝浏览商品的更多相关文章

  1. 图片放大镜(像淘宝浏览商品一样)JS操作

    × 目录 [1]布局 [2]JS操作-获得元素 [3]大图及面板 [4]面板随着鼠标移动 [5]控制面板移动范围 [6]大图动起来 [7]代码 ---------------------------- ...

  2. 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...

  3. ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能

    如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...

  4. 简单的抓取淘宝关键字信息、图片的Python爬虫|Python3中级玩家：淘宝天猫商品搜索爬虫自动化工具（第一篇）

    Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇) 淘宝改字段,Bugfix,查看https://github.com/hunterhug/taobaoscrapy.git 由于Gith ...

  5. iOS 集成阿里百川最新版（3.1.1.96） 实现淘宝授权登录以及调用淘宝客户端商品详情页

      公司最近要做第三方登录,由于是做导购项目,必不可少的有淘宝的授权登录.本来就是一个授权登录,没什么大不了的.但淘宝的无线开放业务——阿里百川更新的最新版本3.1.1.96,开发文档不是不详细,是很 ...

  6. selenium+PhantomJS 抓取淘宝搜索商品

    最近项目有些需求,抓取淘宝的搜索商品,抓取的品类还多.直接用selenium+PhantomJS 抓取淘宝搜索商品,快速完成. #-*- coding:utf-8 -*-__author__ =''i ...

  7. Python网页信息采集：使用PhantomJS采集淘宝天猫商品内容

    1,引言 最近一直在看Scrapy 爬虫框架,并尝试使用Scrapy框架写一个可以实现网页信息采集的简单的小程序.尝试过程中遇到了很多小问题,希望大家多多指教. 本文主要介绍如何使用Scrapy结合P ...

  8. android 数据重构(仿淘宝浏览记录,足迹)

    数据结构 ->数据重构 原因 处理这个数据的主要原因是,后台服务器返回的数据格式在ios那边因为其控件可以对数据进行分区显示,可以直接处理,而在android上我们显示控件就是listview, ...

  9. 使用selenium抓取淘宝的商品信息

    淘宝的页面大量使用了js加载数据,所以采用selenium来进行爬取更为简单,selenum作为一个测试工具,主要配合无窗口浏览器phantomjs来使用. import re from seleni ...

随机推荐

  1. 痞子衡嵌入式：知名半导体MCU大厂软件开发C代码规范

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是飞思卡尔软件开发C语言编码规范. 2020鼠年春节是个漫长的假期,痞子衡在家百无聊赖,翻出了2016年10月1日(这个时间是痞子衡正式开始 ...

  2. Git详解之分布式应用

    前言 为了便于项目中的所有开发者分享代码,我们准备好了一台服务器存放远程 Git 仓库.经过前面几章的学习,我们已经学会了一些基本的本地工作流程中所需用到的命令.接下来,我们要学习下如何利用 Git ...

  3. 强大的Guava中的新集合类型: Multiset, Multimap, BiMap, Table, ClassToInstanceMap, RangeSet, RangeMap等

    一 Multiset /** * 新类型集合: Multiset: Multiset就是可以保存多个相同的对象,并且无序 * 占据了List和Set之间的一个灰色地带 * 其他实现: TreeMult ...

  4. try catch finally的理解

    定义以及用法: try/catch/finally 语句用于处理代码中可能出现的错误信息. 错误可能是语法错误,通常是程序员造成的编码错误或错别字.也可能是拼写错误或语言中缺少的功能(可能由于浏览器差 ...

  5. 我的一个git（码云）之旅

    合作开发项目,你就会用到git,现在码云比较简单,因为是中文化界面,学习起来难度比较低,又支持5人以下项目免费,所以学习码云更好入手一点. 下面的东西适合一些个基础比较低的用户学习,因为我就是啊... ...

  6. （数据科学学习手札74）基于geopandas的空间数据分析——数据结构篇

    本文对应代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 geopandas是建立在GEOS.GDAL.P ...

  7. java设计模式2————工厂模式

    1.工厂模式介绍: 1.1.实现了创建者与调用者的分离 1.2.详细分类: 简单工厂模式 工厂方法模式 抽象工厂模式 1.3.所遵循的OOP原则: 开闭原则:对扩展开放,对修改关闭 依赖倒转原则:面向 ...

  8. JavaScript所有函数和内置方法

    Number isFiniter() 检测传入的的数值是否在无穷大和无穷小之间(有限数字或者是可转换成有限数字)返回true,否则返回false.NaN返回false. isFinite(Number ...

  9. Rust学习笔记一 数据类型

    写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差. 自学了Java.Kotlin.Python. ...

  10. 《Python学习手册 第五版》 -第11章 赋值、表达式和打印

    上一章对Python的语句和语法已经进行了基本的说明,接下来就是每个章节的详细说明,本章的主要内容就是标题中涵盖的三点:赋值语句.表达式语句.打印语句 本章重点内容如下: 1.赋值语句 1)赋值语句的 ...