JS实现图片放大镜效果(附源码)

thbcm阅读(300)

我们在浏览商城网页时,有一个最基本的 JS 功能就是将商品图片进行放大,也称图片放大器功能。W3Cschool 小编就来教大家如何用JS实现图片放大镜效果。

我们先来看下实现效果:

完整源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片放大镜 - 编程狮(w3cschool.cn)</title>
	<style>
		* {
			margin:0px;
			padding:0px;
			}
		#left {
			width:350px;
			height:350px;
			float:left;
			border:1px solid #cccccc;
			margin-top:10px;
			margin-left:10px;
			position:relative;
			}
		#right {
			border:1px solid #cccccc;
			float:left;
			position:relative;
			width:350px;
			height:350px;
			display:none;
			overflow:hidden;
			margin-top:10px;
			}
		#right img {
			position:absolute;
			}
		#small {
			width:150px;
			height:150px;
			background-color:#F90;
			border:1px solid #cccccc;
			opacity:0.3;
			top:0px;
			position:absolute;
			cursor:move;
			display:none;
			}
		#left img {
			width:100%;
			height:100%;
			}
	</style>
</head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
<script> $(document).ready(function(e) { $("#left").mousemove(move).mouseenter(function() { $("#small").show(); $("#right").show() }).mouseleave(function() { $("#small").hide(); $("#right").hide() }) }); function move(e) { var y = e.pageY - $("#left").offset().top; if (y >= 75 && y <= 275) { $("#small").css("top", y - 75); $("#right img").css("top", -(y - 75) * 800 / 350); } var x = e.pageX - $("#left").offset().left; if (x >= 75 && x <= 275) { $("#small").css("left", x - 75); $("#right img").css("left", -(x - 75) * 800 / 350); } } </script> <body> <div id="left"> <img src="./image/01.png"> <div id="small"></div> </div> <div id="right"> <img src="./image/01.png"> </div> </body> </html>

图片素材:

以上就是用 JS 实现图片放大器效果的全部代码及相关素材。请同学们自行练习和巩固噢。

bootstrap3 和 bootstrap4 的区别

thbcm阅读(329)

bootstrap 是常用的前端开发框架之一,它以其稳定性高,响应速度快,免费开源的特性广受前端开发人员的喜爱。那么 bootstrap3 和 bootstrap4 的区别在哪里呢?这篇文章告诉你。

bootstrap3 和bootstrap4 的区别:

 编写语言不同 bootstrap3 用 ​Less ​语言开发,bootstrap4 用 ​Sass​ 语言编写
 栅格类不同 bootstrap3 有四种栅格,分别是特小(col-xs-)适配手机、小(col-sm-)适配平板、中(col-md-)适配电脑、大(col-lg-)适配宽屏电脑。
bootstrap4 有五种栅格,分别是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)。
 布局方式不同 bootstrap3 使用 ​float​ 的布局方式,bootstrap4 采用​flexbox​布局方式。
 使用单位不同 bootstrap3 使用​px​为单位,bootstrap4 使用​rem​和​em​为单位(除部分 margin 和 padding 使用 px)

以上就是 bootstrap3 和 bootstrap4 的区别。

HTML按钮代码怎么写?如何写按钮的代码

thbcm阅读(308)

HTML 相信大家很了解了,HTML 中的按钮交互功能运用广泛,本篇文章教你如何实现 html 按钮效果。

HTML<button>标签

标签定义及使用说明

<button> 标签定义一个按钮,在它内部您可以放置文本或图像等内容,这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

tips:请始终为 <button> 元素规定 type 属性。不同的浏览器对<button> 元素的 type 属性使用不同的默认值。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button - 编程狮(w3cschool.cn)</title>
</head>
<body>
    <button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
</html>

效果图:

HTML5的<button>新属性

属性 描述
autofocus autofocus 规定当页面加载时按钮应当自动地获得焦点。
disabled disabled 规定应该禁用该按钮。
form form_id 规定按钮属于一个或多个表单。
formaction URL 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=”submit” 配合使用。
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type=”submit” 配合使用。
formmethod get
post
规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type=”submit” 配合使用。
formnovalidate formnovalidate 如果使用该属性,则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type=”submit” 配合使用。
formtarget _blank
_self
_parent
_top
framename
规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=”submit” 配合使用。
name name 规定按钮的名称。
type button
reset
submit 
规定按钮的类型。
value text 规定按钮的初始值。可由脚本进行修改。

HTML<input>标签

<input> ​标签用于创建交互式控件,这类控件是基于 web 表单的,它可以接收用户的数据、信息。

主要代码:

<input type="submit" value="提交">
<input type="reset" value="重置">

表单代码如下:

<!DOCTYPE html>

<html> <head> <meta charset="utf-8"> <title>button - 编程狮(w3cschool.cn)</title> </head> <body> <form action="example.htm" method="post"> 姓名: <input type="text" name="FirstName" value="张三丰"><br> 电话: <input type="text" name="LastName" value="123456"><br> <br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>

表单效果图:

以上就是小编为大家整理的关于 HTML 实现按钮效果的全部内容。

CSS如何设置渐变?

thbcm阅读(307)

之前 W3Cschool 小编为大家介绍了 CSS 如何给边框加上渐变,那么今天小编教大家 CSS 如何设置渐变。

先让我们来看下最终效果:

以上分别为线性渐变和径向渐变。渐变一般设置在背景,与元素相对应。

以下为源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>渐变色 - 编程狮(w3cschool.cn)</title>
	<style type="text/css">
        #box1{  /*线性渐变*/
            width: 500px;
			height: 200px;
			FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#eb5757, endColorStr=#000000);	/*IE 6 7 8*/
			background: -ms-linear-gradient(top, #eb5757, #000000);/*IE 10 */
			background: -moz-linear-gradient(top, #eb5757, #000000);/*火狐*/
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5757),to(#000000));/*谷歌*/
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5757),to(#000000));/*Safari 4-5, Chrome 1-9*/
			background: -webkit-linear-gradient(top, #eb5757, #000000);/*Safari5.1 Chrome 10+*/
			background: -o-linear-gradient(top, #eb5757, #000000);/*Opera 11.10+*/
        }
        #box2{  /*径向渐变*/
            width:500px;
            height:200px;
            background: -webkit-radial-gradient(#eb5757, #000000); /*Safari 5.1 - 6.0 */
            background: -o-radial-gradient(#eb5757, #000000); /*Opera 11.6 - 12.0*/
            background: -moz-radial-gradient(#eb5757, #000000); /*Firefox 3.6 - 15*/
         }

    </style>
</head>
<body>
	<div id="box1"></div>
	<p id="box2"></p>
</body>
</html>

以上就是 CSS 如何设置渐变的全部内容,请同学们自行练习巩固。

Java抽奖系统(附完整代码)

thbcm阅读(306)

很多大公司的年会都会抽年终奖,为一年一来的付出做出奖励,你知道如何用 JAVA 做抽奖系统么?小编来告诉你。

抽奖系统需求分析

1)实现抽奖系统的三大主要功能是登录、注册和抽奖。

2)登录需求指的是让用户输入其账号密码从而进行登录,用户输入其账号去匹配系统内已注册用户,如果输入账号不存在就退出,密码则能输入三次,登录成功后主界面会显示已登录用户的账号信息。

3)注册需求让用户先输入其账号,再有系统查询用户账号名是否已存在,如果已存在就让用户重新输入,不存在就进行下一步密码输入,密码的要求是6位数字字符串,用户注册成功后系统会随机分配与已有账号不一样的四位数字 id 编号。

4)抽奖需求功能实现的前提条件是要有用户处于已登录状态。当前提满足时系统从已存在用户中随机去抽取5位不同的用户标记为幸运用户,并接着判断此时在线的用户是否有被抽中。

5)数据存储采用的是文件系统,导入 java.io.*包,

6)登录用户信息保存在 ArrayList 中,幸运用户编号与 id 保存在长度为5的 ​HasMap<String id,String name>​ 其中它的 id 为 Key,name 为 Value。

实现结果

1)登录:

2)注册:

3)抽奖:

注意事项

在运行代码之前务必在 user.txt 中创建五个以上的用户。

完整代码

import java.util.Scanner;
import java.util.ArrayList;
import java.io.*;
import java.util.StringTokenizer;

public class Dos {
    static boolean logined=false;
    public static void main(String[] args) {
        User user=new User();
        int k=0;
        while( (k=Main(user))>=1&&k<5){
            switch (k){
                case 1:
                    System.out.print((k=user.login(user))==-1?"此用户不存在!\n":"");
                    System.out.print((k==-2)?"===<<警告>>用户:["+user.userName+"]已处于登录状态,无需重复登录!\n":"");
                    break;
                case 2:
                    user.regist();
                    break;
                case 3:
                    user.getLuckly();
                    break;
                default:System.exit(0);
            }
        }
    }
    static int Main(User user){
        System.out.println("**********************************************");
        System.out.println("********************主菜单********************");
        System.out.println("**********************************************");
        System.out.println("******          <1> 登   录             ******");
        System.out.println("******          <2> 注   册             ******");
        System.out.println("******          <3> 抽   奖             ******");
        System.out.println("******          <4> 退   出             ******");
        System.out.println("**********************************************");
        System.out.println("==============================================");
        System.out.println(logined ? "-[已登录]-  (1)用户名:"+user.userName+"   (2)用户账号:"+user.userId:"-[未登录]-   (1)用户名:NaN   (2)用户账号:NaN");
        System.out.println("==============================================");
        System.out.print("###===>请输入您的选择:");
        return (new Scanner(System.in)).nextInt();
    }
}
public class User{
    String userName,userId,userPwd;
    public User(){}
    public User(String userName, String userId, String userPwd) {
        this.userName = userName;
        this.userId = userId;
        this.userPwd = userPwd;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        if(!userName.equals("")) {
            ArrayList<String> temp;
            this.userId=(temp=(new operatorFile(this.userName = userName)).getUserMess(0)).get(1);
            this.userPwd=temp.get(2);
        }
    }
    public String getUserId() {
        return userId;
    }
    public String setUserId() {
        String userId="";
        while((new operatorFile(userId=String.valueOf ((int) (Math.random()*9000+1000)))).getUserMess(1).size()>0){ }
        return (this.userId = userId);
    }
    public String getUserPwd() {
        return userPwd;
    }
    public int login(User u) {
        int inputTimes=3;
        Scanner scanner=new Scanner(System.in);
        operatorFile getUserMessage=new operatorFile();
        System.out.print("======>请输入您的用户名:");
        String uName="";
        getUserMessage.setUser(uName=scanner.nextLine());
        ArrayList<String> userMess=getUserMessage.getUserMess(0);
        if(userMess.size()<1)       return -1;//返回-1表示用户不存在
        if (uName.equals(userName))     return -2;//返回-2表示用户重复登录
        System.out.print("======>请输入您的登录密码:");
        while(!scanner.next().equals(userMess.get(2))&&inputTimes>0)
            System.out.print("===>密码输入错误!"+((--inputTimes)>0?"您还剩"+inputTimes+"次机会!":"三次机会已经用完了!输入任意退出"));
        System.out.println(inputTimes>0?"==>登录成功!您本次输入密码"+(4-inputTimes)+"次!":"==>登录失败!");
        setUserName(inputTimes>0?uName:"");
        Dos.logined=inputTimes>0?true:false;
        return 0;
    }
    public void regist() {
        User u=new User();
        Scanner scanner=new Scanner(System.in);
        System.out.print("===>请输入新的用户名:");
        String name;
        while(new operatorFile(name=scanner.nextLine()).getUserMess(0).size() > 0)
            System.out.print("已存在此用户,注册失败!\n===>请重新输入新的用户名:");
        System.out.print("======>请设置您的(六位数字)登录密码:");
        String regex = "[0-9]{6}", pwd;
        while (!(pwd = scanner.nextLine()).matches(regex))
            System.out.print("==>密码格式不正确,请重新设置您的(六位数字)登录密码:");
        System.out.println("已为用户:"+(u.userName=name)+" 生成唯一ID: "+(u.userPwd=pwd));
        (new operatorFile()).writeUserMess(u);
        System.out.println("=======>注册成功!");
    }
    public static HashMap<String,String> lucklyUsers=new HashMap<>();
    public void getLuckly() {
        if (!Dos.logined)   {
            System.out.println("===>警告:没有用户登录,无法抽奖!");
            return ;
        }
        while(lucklyUsers.size()<5)
        {
            String id="";
            ArrayList<String> u;
            while((u=(new operatorFile(id=String.valueOf ((int) (Math.random()*9000+1000)))).getUserMess(1)).size()<1){ }
            lucklyUsers.put(u.get(1),u.get(0));
        }
        Iterator iterator=lucklyUsers.entrySet().iterator();
        int no=1;
        boolean LUCKLY=false;
        System.out.println("====>恭喜以下用户获得幸运称号:");
        while(iterator.hasNext()){
            Map.Entry entry=(Map.Entry) iterator.next();
            System.out.println("幸运用户["+(no++)+"]  用户名:"+entry.getValue()+"   用户编号:"+entry.getKey());
            LUCKLY = entry.getKey().equals(this.userId) ? true : LUCKLY;
        }
        System.out.println(LUCKLY?"=========>恭喜您在本次抽奖中获得幸运称号!":"=========>很遗憾,今日您未获奖 !-_-!");
    }
    public String toString(){
        return this.userName+" "+this.userId+" "+this.userPwd;
    }
}
public class operatorFile {
    String user;
    public void setUser(String user) {
        this.user = user;
    }
    public operatorFile(String user) {
        this.user = user;
    }
    public operatorFile() { }
    public ArrayList<String> getUserMess(int index){
        ArrayList<String> temp=new ArrayList<String>();
        File file=new File("user.txt");
        String line="";
        try{
            BufferedReader br=new BufferedReader(new FileReader(file));
            while ((line = br.readLine())!=null && line!="\n"){
                temp.clear();
                StringTokenizer sk=new StringTokenizer(line);
                while (sk.hasMoreTokens()) {
                    temp.add(sk.nextToken());
                }
                if (temp.get(index).equals(this.user))  break;
            }
        }
        catch(IOException e){}
        return (line==null)?new ArrayList<String>():temp;
    }
    public void writeUserMess(User u){
        try{
            BufferedWriter bw=new BufferedWriter(new FileWriter(new File("user.txt"),true));
            bw.write(u.toString()+"\n");
            bw.close();
        }
        catch (IOException e){ }
    }
}

以上就是使用 java 制作抽奖系统的全部内容,请务必三连。

HTML怎么插入图片?

thbcm阅读(305)

在开发网页时,我们免不了要插入图片,以增强用户体验感。那么,在 HTML 怎么插入图片呢?

在 HTML 中,使用​<img>​标签来定义图像。其中有两个必需的属性:​src​和​alt​。src 属性是用来确定图片的地址,alt 的属性是用来确定图片可替换文本的。

让我们先来看看具体的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>插入图片 - 编程狮(w3cschool.cn)</title>
</head>
<body>
	<img src="./image/logo.png" alt="这是一张logo">
        <img src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" alt="这是一张logo">
</body>
</html>

第一个 src 是图片的相对地址,第二个 src 为图片网址。

最终效果:

以上就是 HTML 怎么插入图片的全部内容。

python脚本怎么执行?怎么运行py文件?

thbcm阅读(351)

最近有不少小伙伴来问python脚本怎么执行?,今天W3Cschool小编就来和各位分享一下python脚本执行的几种方法。

第一种:使用脚本式编程

把下面的代码复制到W3Cschool.py文件中:

print ("Hello, Python!");

使用下面的命令运行脚本:

$ python ./W3Cschool.py
hello,python

如果使用的系统是Linux或Unix,可以在脚本的开端添加命令,像SHELL脚本一样直接执行Python脚本。

#! /usr/bin/env python3

给脚本添加执行权限:

$ chmod +x hello.py

执行:

./W3Cschool.pydede

得到运行结果:

Hello, Python!

第二种:使用IDLE

python内置了一款名为IDLE的IDE,运行后。点击文件→新窗口中开始使用。可以在IDLE中直接写python程序,写好后按F5保存,比如“W3Cschool.py”。保存之后,控制台窗口就会自动输出所有运行结果。

第三种:使用python.exe来执行

直接在win+R输入CMD,输入python就可以直接运行python相关代码。

python怎么运行py文件就为大家介绍到这里了,希望能对各位学员有所帮助。

HTML怎么引入CSS?

thbcm阅读(336)

CSS HTML 的结合能产生非常奇妙的化学反应,CSS 的样式可以让 HTML 更美的呈现在用户眼前,本篇我们来介绍如何把 CSS 嵌入到 HTML 中。

一、嵌入式

第一种方法嵌入式指的是使用 HTML 的 ​<style>​ 元素,在​<head>​ 内添加 ​<style type="text/css">​ ,接着在​<style>​内定义所指定的 CSS 样式内容。

上代码:

<head>
    <meta charset="utf-8">
    <title>button - 编程狮(w3cschool.cn)</title>
<style>
    h1{
        color:red;
    } 
    p{
        color:blue;
    }
</style>
</head>

二、内联样式

内联样式就比较直接了,它是在每个 HTML 元素中添加 style 属性,可以直接定义元素样式。此时这个 style 样式只对其元素有效,对于另一个同名或同类型的元素不起任何作用

上代码:

<p style="background-color: blue">w3cschool</p>
<h1 style="font-size:20px">编程狮</h1>

三、外部引用式

外部引用指的是在 HTML 中不存在嵌入和内联的 CSS 样式,而是去动态得引用外部 CSS 文件来修饰 HTML。

1、样式表处理指令语句

在 HTML 文档开头部分添加样式表指令语句

上代码:

<?xml-stylesheet type="text/css" href="w3cschool.css" ?>
<html>
指令语句 
</html>

这种情况是出于使用 xml 语法编写 html 文档所支持的指令,大部分浏览器要保存城 xhtml 或者 xml 格式才生效,而且 JS 无法处理此类 CSS ,不建议使用。

2、@import 命令

在​<style>​中使用@import 命令导入外部的 CSS 文件

上代码:

<head>
    <meta charset="utf-8">
    <title>button - 编程狮(w3cschool.cn)</title>
<style>
    <!--下面两行代码效果一样
    @import "w3cschool";
    @import url("w3cschool.css");
    -->
</style>
</head>

3、使用 link 元素(最常用)

上代码:

<head>
<link rel="stylesheet" href="w3cschool" type="text/css">
</head>

4、HTTP 消息报

使用 HTTP 消息报头部的 link 字段把它链接到一个外部样式表

上代码:

link:<mystyle.css>;rel=stylesheet;

以上就是小编总结的关于 HTML 如何引入 CSS 的全部内容。

HTML如何编写一个简单的表单?

thbcm阅读(335)

表单页面的编写是前端开发中一个重要的环节,在注册登录和填写资料信息时都会涉及到。那么 W3Cschool 小编为大家介绍下简单的表单编写。

我们先来看下常用的表单元素有哪些:

 文本域  文本域通过 ​<input type="text">​ 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
 密码字段  密码字段通过标签 ​<input type="password">​ 来定义
 单选按钮  ​<input type="radio">​ 标签定义了表单单选框选项。
 复选框  ​<input type="checkbox">​ 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
 提交按钮  当用户单击确认按钮时,表单的内容会被传送到另一个文件。

具体效果:

这是最基础的表单效果,包括了以上提及的五种表单元素。让我们来看下具体的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单表单 - 编程狮(w3cschool.cn)</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="username"><br>
密码:<input type="password" name="password"><br>
性别:<input type="radio" name="sex" value="女">女
      <input type="radio" name="sex" value="男">男<br>
爱好:<input type="checkbox" name="like" value="运动">运动
      <input type="checkbox" name="like" value="画画">画画
      <input type="checkbox" name="like" value="阅读">阅读<br>
<input type="submit" name="确定登录">
<input type="reset" name="重新填写">
</body>
</html>

以上就是 HTML 怎么编写简单的表单的全部内容。如果想让自己开发的页面更加美观,可以加入标签样式,背景图等。此处就不在叙述,请同学们自行练习开发。

html怎么插入视频?视频如何插入页面

thbcm阅读(320)

HTML 的功能强大,基本所有的静态效果都可以在此轻松呈现,各种视频网站内有大量的视频内容,本篇文章教你如何在 html 中插入视频

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>video - 编程狮(w3cschool.cn)</title>
<style>
</style>
</head>
<body>
    <video width="320" height="240" controls>
        <source src="/statics/demosource/movie.mp4"  type="video/mp4">
        <source src="/statics/demosource/movie.ogg"  type="video/ogg">
        您的浏览器不支持 HTML5 video 标签。
    </video>
</body>
</html>

标签定义和使用说明

<video>​标签定义视频,类似电源片段和其他视频流。

<video>​目前为止支持三种视频格式:Ogg、WebM、MP4

浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES
从 Firefox 21 版本开始
Linux 系统从 Firefox 30 开始
YES YES
Safari YES NO NO
Opera YES
从 Opera 25 版本开始
YES YES

<video>可选属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 如果出现该属性,视频的音频输出为静音。
poster URL 规定视频正在下载时显示的图像,直到用户点击播放按钮。
preload auto
metadata
none
如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
src URL 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

以上就是小编为您带来的html中如何插入视频的全部内容。

联系我们