jquery custom container rain effect can change the rain icon to something else_jquery

css style

Copy code The code is as follows:

javascript

Copy code The code is as follows:

<script> <br><br>//width:400, <br>//height:300, <br>//pic:' water-drop.png', //The default rain picture is water-drop.png <br>//speed:1000, //Rain speed<br>//num:100, //Density of raindrops<br> //dir:['right',160], //The default direction of rain is the deviation of raindrops to the right<br><br><br>$(function(){ <br>$(".container" ).Rain({width:'500',dir:['right',100],speed:3000,num:100,func:back_func}); <br><br><br>}) <br>var i =0; <br>function back_func(d){ <br>if(parseInt($(".box").position()['left'] $(".box").width())> d&&d>parseInt($(".box").position()['left'])){ <br>if(i>$(".box").height()){ <br>$(". box .water").animate({height:0}); <br>i=0; <br>return; <br>} <br>$(".box .water").animate({height:i }); <br>} <br><br>if(parseInt($(".box2").position()['left'] $(".box2").width())>d&&d>parseInt ($(".box2").position()['left'])){ <br>if(i>$(".box2").height()){ <br>$(".box2 .water ").animate({height:0}); <br>i=0; <br>return; <br>} <br>$(".box2 .water").animate({height:i }); <br>} <br>} <br></script>

html

< ;div class="water">

All is OK

Related labels：

jquery rain container

source：php.cn

Previous article：JS optimizes the img tag and uses onerror to display the default image_javascript skills Next article：Example of javascript implementation of storing hmtl string_Basic knowledge

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...

From 2024-04-06 14:54:03

0

2

421

How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...

From 2024-04-05 09:26:49

0

1

1418

Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...

From 2024-04-04 18:40:04

0

1

3528

I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...

From 2024-04-04 17:27:27

0

1

417

Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...

From 2024-04-04 12:53:48

0

1

303

Related Topics

More>

• What are the jquery plug-ins?
• How to operate json with jquery
• How to delete elements in jquery
• Use of jQuery hover() method
• jquery implements paging method
• What is a hidden element in jquery
• What is highlighting in jquery
• The reason why header function returns 404 failure