• Use CSS to implement mouse click effects_CSS/HTML

    WBOY
    Release: 2016-05-16 12:11:19
    Original
    1851 people have browsed it

    If you can apply CSS well, your homepage will look beautiful. Below I will introduce to you a mouse click special effect image made with CSS.

    1. Copy the following code into and between your homepage.

    〈STYLE〉.shadow {
    FILTER: shadow(color=blue, direction=225)
    }
    .shadow1 {
    FILTER: shadow(color=red, direction=225)
     }
     .shadow2 {
     FILTER: shadow(color=green, direction=225)
     }
     .div {
     CURSOR: move; FILTER: blur(add=ture, direction =135,strength=10); WIDTH: 800px
     }
     〈/STYLE〉

    The blur filter is applied here.

    2. Insert a picture into the page. For example, I inserted Use CSS to implement mouse click effects_CSS/HTML

    Add 〈TD style="VERTICAL-ALIGN: top" width=314〉 to the line below the picture we just inserted.

    3. After setting the image attributes, we also need to apply Javascript script code, that is, to make the image follow the mouse movement with some special effects. The code is as follows.

    〈script language=Javascript〉
      !--
     var g_numlights=0;
     var blurbs= new Array("The current dynamic filter gives the web page more interactive performance to respond to the user Action. "," We use the light source filter to respond to the user's click. Clicking on the image can move the light source by capturing the user's mouse position. ") ;
    window.onload=setlights;
    document.onclick=keyhandler;
    flttgt.onmousemove=mousehandler;
    function setlights(){
    flttgt.filters[0].clear();
    flttgt.filters[0].addcone(0,0,5,100,100,225,225,0,60,15);
    if (g_numlights>0){
    flttgt.filters[ 0].addcone(400, 170, 5, 100, 100, 225, 0, 0, 160, 15);
     if (g_numlights>1){
    flttgt.filters[0].addcone(320, 330, 5, 100, 100, 0, 225, 225, 60, 15); 1)%4;
    holder.innerHTML=blurbs[g_numlights];
    setlights();
    }
    function mousehandler()
    {
    x=(window.event.x -80);
    y=(window.event.y-80);
    flttgt.filters[0].movelight(1,x,y,5,1);
    if(g_numlights>0 ){
    flttgt.filters[0].movelight(1,x,y,5,1);
    if(g_numlights>1)
    {
    flttgt.filters[0].movelight( 2, x, y, 5, 1);
     }
     }
     }
     〈/script〉

    In this way, you can set up a more personalized picture effect

    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
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!